xmlui 0.4.0

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

@@ -0,0 +1,341 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_es_1 = require("lodash-es");
+const isPlainObject_1 = __importDefault(require("lodash/isPlainObject"));
+const extractParam_1 = require("@components-core/utils/extractParam");
+const misc_1 = require("@components-core/utils/misc");
+const EngineError_1 = require("@components-core/EngineError");
+const process_statement_sync_1 = require("@components-core/script-runner/process-statement-sync");
+function isAxiosResponse(response) {
+    return "data" in response;
+}
+function parseResponseJson(response) {
+    return __awaiter(this, void 0, void 0, function* () {
+        let resp;
+        if (isAxiosResponse(response)) {
+            resp = response.data;
+        }
+        else {
+            try {
+                resp = yield response.clone().json();
+            }
+            catch (e) { }
+        }
+        return resp;
+    });
+}
+//TODO illesg unit test.....
+function appendFormFieldValue({ key, value }, formData, prevKey = key) {
+    if (value === undefined || value === null) {
+        return;
+    }
+    if (value instanceof File || value instanceof Blob) {
+        formData.append(key, value);
+        return;
+    }
+    if (Array.isArray(value)) {
+        value.forEach((val) => {
+            appendFormFieldValue({ key, value: val }, formData, prevKey);
+        });
+    }
+    else if ((0, isPlainObject_1.default)(value)) {
+        Object.entries(value).forEach(([objKey, objVal]) => {
+            const concatenatedObjectKey = `${prevKey}.${objKey}`;
+            appendFormFieldValue({
+                key: concatenatedObjectKey,
+                value: objVal,
+            }, formData, concatenatedObjectKey);
+        });
+    }
+    else {
+        formData.append(key, value.toString());
+    }
+}
+class RestApiProxy {
+    constructor(appContext) {
+        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({
+                operation,
+                abortSignal,
+                contextParams: params,
+                resolveBindingExpressions,
+                parseResponse: (parseOptions === null || parseOptions === void 0 ? void 0 : parseOptions.asFile)
+                    ? (response) => __awaiter(this, void 0, void 0, function* () {
+                        var _a;
+                        //we can't access content-disposition header if it's a CORS request: The suggested workaround was adding Access-Control-Expose-Headers:Content-Disposition to the response header on the server.
+                        // more info here: https://github.com/matthew-andrews/isomorphic-fetch/issues/67
+                        let fileName = operation.fileName || "unknown";
+                        if (response.headers && response.headers.get && typeof response.headers.get === "function") {
+                            const contentDisposition = (_a = response.headers.get("Content-Disposition")) === null || _a === void 0 ? void 0 : _a.toString();
+                            if (contentDisposition) {
+                                const fileNameMatch = contentDisposition.match(/filename="(.+)"/);
+                                if (fileNameMatch && fileNameMatch.length === 2)
+                                    fileName = fileNameMatch[1];
+                            }
+                        }
+                        return isAxiosResponse(response) ? response.data : new File([yield response.clone().blob()], fileName);
+                    })
+                    : undefined,
+                transactionId,
+                onUploadProgress: onProgress,
+            });
+        });
+        this.upload = (_a) => __awaiter(this, [_a], void 0, function* ({ operation, params = {}, chunk, onUploadProgress, abortSignal, transactionId = (0, misc_1.randomUUID)(), resolveBindingExpressions = false, }) {
+            const { file, asForm, formParams } = this.extractParam(resolveBindingExpressions, operation, params);
+            const uploadParams = {
+                chunkStart: chunk === null || chunk === void 0 ? void 0 : chunk.chunkStart,
+                chunkEnd: chunk ? (chunk === null || chunk === void 0 ? void 0 : chunk.chunkEnd) - 1 : undefined,
+                chunkLength: chunk ? (chunk === null || chunk === void 0 ? void 0 : chunk.chunkEnd) - (chunk === null || chunk === void 0 ? void 0 : chunk.chunkStart) : undefined,
+                fileSize: file.size,
+                urlSafeName: encodeURIComponent(file.name),
+                fileName: file.name,
+            };
+            const contextParams = Object.assign(Object.assign({}, params), { $uploadParams: uploadParams });
+            if (asForm) {
+                const data = new FormData();
+                data.append(file.name, (chunk === null || chunk === void 0 ? void 0 : chunk.blob) || file);
+                if (formParams) {
+                    Object.entries(this.extractParam(resolveBindingExpressions, formParams, params)).forEach(([key, value]) => {
+                        data.append(key, value);
+                    });
+                }
+                return yield this.executeOperation({
+                    operation,
+                    contextParams,
+                    resolveBindingExpressions,
+                    rawBody: data,
+                    headers: Object.assign(Object.assign({}, this.extractParam(resolveBindingExpressions, operation.headers || {}, contextParams)), { 
+                        // https://muffinman.io/blog/uploading-files-using-fetch-multipart-form-data/
+                        // the browser sets the content-type in this case
+                        "Content-Type": undefined }),
+                    onUploadProgress,
+                    abortSignal,
+                    transactionId,
+                });
+            }
+            return new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.readAsArrayBuffer((chunk === null || chunk === void 0 ? void 0 : chunk.blob) || file);
+                reader.onload = (evt) => __awaiter(this, void 0, void 0, function* () {
+                    try {
+                        if (evt.target === null) {
+                            reject();
+                            return;
+                        }
+                        resolve(yield this.executeOperation({
+                            operation,
+                            contextParams,
+                            resolveBindingExpressions,
+                            rawBody: evt.target.result,
+                            headers: Object.assign(Object.assign({}, this.extractParam(resolveBindingExpressions, operation.headers || {}, contextParams)), { "Content-Type": file.type }),
+                            onUploadProgress,
+                            abortSignal,
+                            transactionId,
+                        }));
+                    }
+                    catch (e) {
+                        reject(e);
+                    }
+                });
+                reader.onerror = () => {
+                    reject();
+                };
+            });
+        });
+        this.resolveUrl = ({ operation, params = {}, resolveBindingExpressions = false, }) => {
+            return this.generateFullApiUrl(this.extractParam(resolveBindingExpressions, operation.url, params), this.extractParam(resolveBindingExpressions, operation.queryParams, params));
+        };
+        this.extractParam = (resolveAsBindingExpression, value, params = {}, strict) => {
+            var _a, _b;
+            const localContext = Object.assign({ $adapterConfig: this.config }, params);
+            if (resolveAsBindingExpression) {
+                return (0, extractParam_1.extractParam)(localContext, value, this.appContext, strict);
+            }
+            if (value === null || value === void 0 ? void 0 : value._ARROW_EXPR_) {
+                //TODO illesg review, this whole processstatement is because of the chunked uploads (headers as function)
+                const evalContext = {
+                    eventArgs: [localContext],
+                };
+                try {
+                    const arrowStmt = {
+                        type: "ArrowS",
+                        expression: value,
+                    };
+                    (0, process_statement_sync_1.processStatementQueue)([arrowStmt], evalContext);
+                    if ((_b = (_a = evalContext.mainThread) === null || _a === void 0 ? void 0 : _a.blocks) === null || _b === void 0 ? void 0 : _b.length) {
+                        return evalContext.mainThread.blocks[evalContext.mainThread.blocks.length - 1].returnValue;
+                    }
+                    return undefined;
+                }
+                catch (e) {
+                    console.error(e);
+                    return undefined;
+                }
+            }
+            return value;
+        };
+        this.executeOperation = (_a) => __awaiter(this, [_a], void 0, function* ({ operation, contextParams, abortSignal, resolveBindingExpressions, relativePath = this.extractParam(resolveBindingExpressions, operation.url, contextParams), method = this.extractParam(resolveBindingExpressions, operation.method, contextParams), queryParams = this.extractParam(resolveBindingExpressions, operation.queryParams, contextParams), body = this.extractParam(resolveBindingExpressions, operation.body, contextParams, true), rawBody = this.extractParam(resolveBindingExpressions, operation.rawBody, contextParams), headers = this.extractParam(resolveBindingExpressions, operation.headers, contextParams), payloadType = this.extractParam(resolveBindingExpressions, operation.payloadType, contextParams) || "json", onUploadProgress, parseResponse = this.tryParseResponse, transactionId, }) {
+            const includeClientTxId = method && method !== "get" && !!transactionId;
+            const headersWithoutContentType = Object.assign(Object.assign({}, this.getHeaders()), { ["Content-Type"]: undefined });
+            const aggregatedHeaders = (0, lodash_es_1.omitBy)(Object.assign(Object.assign({}, (body ? this.getHeaders() : headersWithoutContentType)), headers), lodash_es_1.isUndefined);
+            if (includeClientTxId) {
+                aggregatedHeaders["x-ue-client-tx-id"] = transactionId;
+            }
+            let requestBody;
+            if (rawBody) {
+                requestBody = rawBody;
+            }
+            else {
+                if (payloadType === "multipart-form" || payloadType === "form") {
+                    const formData = new FormData();
+                    Object.entries(body).forEach(([key, value]) => {
+                        appendFormFieldValue({ key, value }, formData);
+                    });
+                    if (payloadType === "multipart-form") {
+                        requestBody = formData;
+                        // https://muffinman.io/blog/uploading-files-using-fetch-multipart-form-data/
+                        // the browser sets the content-type in this case
+                        delete aggregatedHeaders["Content-Type"];
+                    }
+                    else {
+                        requestBody = new URLSearchParams(formData).toString();
+                        aggregatedHeaders["Content-Type"] = "application/x-www-form-urlencoded";
+                    }
+                }
+                else {
+                    requestBody = body ? JSON.stringify(body) : undefined;
+                }
+            }
+            const options = {
+                method: method,
+                headers: aggregatedHeaders,
+                signal: abortSignal,
+                body: requestBody,
+            };
+            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),
+                        method: options.method,
+                        headers: aggregatedHeaders,
+                        data: options.body,
+                        onUploadProgress,
+                    });
+                    return yield parseResponse(response);
+                }
+                catch (error) {
+                    if (axios.isAxiosError(error) && error.response) {
+                        throw yield this.raiseError(error.response);
+                    }
+                    else {
+                        throw error;
+                    }
+                }
+            }
+            else {
+                const response = yield fetch(this.generateFullApiUrl(relativePath, queryParams), options);
+                if (!response.clone().ok) {
+                    throw yield this.raiseError(response);
+                }
+                return yield parseResponse(response.clone());
+            }
+        });
+        this.tryParseResponse = (response) => __awaiter(this, void 0, void 0, function* () {
+            return yield parseResponseJson(response);
+        });
+        this.raiseError = (response) => __awaiter(this, void 0, void 0, function* () {
+            if ("config" in response) {
+                //poor man's axios response type guard
+                try {
+                    return new EngineError_1.GenericBackendError(this.config.errorResponseTransform
+                        ? this.extractParam(true, this.config.errorResponseTransform, { $response: response.data })
+                        : response.data, response.status);
+                }
+                catch (_a) { }
+            }
+            else {
+                try {
+                    const respObject = yield response.json();
+                    return new EngineError_1.GenericBackendError(this.config.errorResponseTransform
+                        ? this.extractParam(true, this.config.errorResponseTransform, { $response: respObject })
+                        : respObject, response.status);
+                }
+                catch (_b) { }
+            }
+            return new Error(`[!] Server responded with an error: ${response.status} - ${response.statusText}`);
+        });
+        this.getHeaders = () => {
+            var _a;
+            return Object.assign({ ["Content-Type"]: "application/json; charset=UTF-8" }, ((_a = this.config.headers) !== null && _a !== void 0 ? _a : {}));
+        };
+        const conf = (appContext === null || appContext === void 0 ? void 0 : appContext.globals) || { apiUrl: "" };
+        const { apiUrl, errorResponseTransform } = conf;
+        this.appContext = appContext;
+        this.config = {
+            apiUrl,
+            errorResponseTransform,
+            headers: Object.assign({}, (_a = appContext === null || appContext === void 0 ? void 0 : appContext.globals) === null || _a === void 0 ? void 0 : _a.headers)
+        };
+    }
+    generateFullApiUrl(relativePath, queryParams) {
+        let queryString = "";
+        if (queryParams) {
+            const params = new URLSearchParams();
+            Object.entries(queryParams).forEach(([key, value]) => {
+                if (Array.isArray(value)) {
+                    value.forEach((item) => {
+                        params.append(key, item);
+                    });
+                }
+                else if (value !== undefined) {
+                    params.append(key, value);
+                }
+            });
+            queryString = `?${params}`;
+        }
+        if (relativePath.startsWith("http://") || relativePath.startsWith("https://")) {
+            return `${relativePath}${queryString}`;
+        }
+        //TODO check if autoEncode is enabled
+        return `${this.config.apiUrl || ""}${relativePath}${queryString}`;
+    }
+}
+exports.default = RestApiProxy;

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

@@ -0,0 +1,272 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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 });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_router_dom_1 = require("react-router-dom");
+const react_2 = require("@remix-run/react");
+const react_query_1 = require("@tanstack/react-query");
+const lodash_es_1 = require("lodash-es");
+const react_helmet_async_1 = require("react-helmet-async");
+const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
+const immer_1 = require("immer");
+const ErrorBoundary_1 = require("./ErrorBoundary");
+const ThemeProvider_1 = __importDefault(require("@components-core//theming/ThemeProvider"));
+const Container_1 = require("./container/Container");
+const misc_1 = require("@components-core/utils/misc");
+const treeUtils_1 = require("./utils/treeUtils");
+const constants_1 = require("@components-core/constants");
+const IconProvider_1 = require("@components/IconProvider");
+const date_fns_1 = require("date-fns");
+const AppContext_1 = require("@components-core/AppContext");
+const useApiInterceptorContext_1 = require("@components-core/interception/useApiInterceptorContext");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const reportEngineError_1 = require("@components-core/reportEngineError");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const date_functions_1 = require("./appContext/date-functions");
+const misc_utils_1 = require("./appContext/misc-utils");
+const ViewComponentRegistryContext_1 = require("@components/ViewComponentRegistryContext");
+const abstractions_1 = require("@components-core/theming/abstractions");
+const ComponentProvider_1 = require("@components/ComponentProvider");
+const ConfirmationModalContextProvider_1 = require("@components/ModalDialog/ConfirmationModalContextProvider");
+const AppStateContext_1 = require("@components/App/AppStateContext");
+const hooks_1 = require("./utils/hooks");
+// --- We want to enable the produce method of `immer` on Map objects
+(0, immer_1.enableMapSet)();
+// =====================================================================================================================
+/**
+ * We use this object in the app context to represent the `QlientQuery` of the react-query package.
+ */
+const queryClient = new react_query_1.QueryClient({
+    defaultOptions: {
+        queries: {
+            refetchOnWindowFocus: false,
+        },
+    },
+});
+const Transforms = {
+    unPackTree: treeUtils_1.unPackTree,
+};
+const Utils = {
+    getByPath: lodash_es_1.get,
+};
+const DateUtils = {
+    differenceInMinutes: (date1, date2) => {
+        return (0, date_fns_1.differenceInMinutes)(new Date(date1), new Date(date2));
+    },
+    isSameDay: (dateLeft, dateRight) => {
+        // console.log("IS SAME DAY", dateLeft, dateRight);
+        if (!dateLeft || !dateRight) {
+            return false;
+        }
+        return (0, date_fns_1.isSameDay)(new Date(dateLeft), new Date(dateRight));
+    },
+    isToday: (date) => {
+        return (0, date_fns_1.isToday)(new Date(date));
+    },
+    isThisYear: (date) => {
+        return (0, date_fns_1.isThisYear)(new Date(date));
+    },
+};
+function handleError(error) {
+    react_hot_toast_1.default.error(typeof error === "string" ? error : error.message || "Something went wrong");
+}
+/**
+ *  This React component implements the innermost part of the root component with access to the app and view state
+ *  contexts.
+ */
+function RootContentComponent({ rootContainer, routerBaseName, globalProps, standalone, decorateComponentsWithTestId, }) {
+    const [localLoggedInUser, setLocalLoggedInUser] = (0, react_1.useState)(null);
+    const componentRegistry = (0, ViewComponentRegistryContext_1.useComponentRegistry)();
+    const navigate = (0, react_2.useNavigate)();
+    const { confirm } = (0, ConfirmationModalContextProvider_1.useConfirm)();
+    const { activeThemeId, activeThemeTone, setActiveThemeId, setActiveThemeTone, availableThemeIds, root } = (0, ThemeContext_1.useThemes)();
+    (0, hooks_1.useDocumentKeydown)((event) => {
+        if (event.code === "KeyT" && event.altKey && event.ctrlKey && event.shiftKey) {
+            setActiveThemeId(availableThemeIds[(availableThemeIds.indexOf(activeThemeId) + 1) % availableThemeIds.length]);
+        }
+        if (event.code === "KeyO" && event.altKey && event.ctrlKey && event.shiftKey) {
+            setActiveThemeTone(abstractions_1.ThemeToneKeys[(abstractions_1.ThemeToneKeys.indexOf(activeThemeTone) + 1) % abstractions_1.ThemeToneKeys.length]);
+        }
+    });
+    // we use the initial value from the scss variable
+    const [maxWidthPhone, setMaxWidthPhone] = (0, react_1.useState)("0");
+    const [maxWidthTablet, setMaxWidthTablet] = (0, react_1.useState)("0");
+    // we sync with the theme variable value (because we can't use css var in media queries)
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        setMaxWidthPhone(getComputedStyle(root).getPropertyValue((0, themeVars_1.getVarKey)("media-max-width-phone")));
+        setMaxWidthTablet(getComputedStyle(root).getPropertyValue((0, themeVars_1.getVarKey)("media-max-width-tablet")));
+    }, [activeThemeId, root]);
+    const isViewportPhone = (0, hooks_1.useMediaQuery)(`(max-width: ${maxWidthPhone})`);
+    const isViewportTablet = (0, hooks_1.useMediaQuery)(`(min-width: ${maxWidthPhone}) and (max-width: ${maxWidthTablet})`);
+    const isViewportDesktop = (0, hooks_1.useMediaQuery)(`(min-width: ${maxWidthTablet})`);
+    const isInIFrame = (0, hooks_1.useIsInIFrame)();
+    const isWindowFocused = (0, hooks_1.useIsWindowFocused)();
+    const apiInterceptorContext = (0, useApiInterceptorContext_1.useApiInterceptorContext)();
+    const location = (0, react_2.useLocation)();
+    const lastHash = (0, react_1.useRef)("");
+    // listen to location change using useEffect with location as dependency
+    // https://jasonwatmore.com/react-router-v6-listen-to-location-route-change-without-history-listen
+    (0, react_1.useEffect)(() => {
+        if (location.hash) {
+            lastHash.current = location.hash.slice(1); // safe hash for further use after navigation
+        }
+        if (lastHash.current) {
+            setTimeout(() => {
+                var _a;
+                (_a = document.getElementById(lastHash.current)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "instant", block: "start" });
+                lastHash.current = "";
+            }, 100);
+        }
+    }, [location]);
+    const Actions = (0, react_1.useMemo)(() => {
+        const ret = {
+            _SUPPORT_IMPLICIT_CONTEXT: true,
+        };
+        for (const [key, value] of componentRegistry.actionFunctions) {
+            ret[key] = value;
+        }
+        return ret;
+    }, [componentRegistry.actionFunctions]);
+    const embed = (0, react_1.useMemo)(() => {
+        return {
+            isInIFrame: isInIFrame,
+        };
+    }, [isInIFrame]);
+    const environment = (0, react_1.useMemo)(() => {
+        return {
+            isWindowFocused,
+        };
+    }, [isWindowFocused]);
+    const mediaSize = (0, react_1.useMemo)(() => {
+        return {
+            phone: isViewportPhone,
+            tablet: isViewportTablet,
+            desktop: isViewportDesktop,
+            smallScreen: isViewportPhone || isViewportTablet,
+            largeScreen: isViewportDesktop,
+        };
+    }, [isViewportDesktop, isViewportPhone, isViewportTablet]);
+    const globals = (0, react_1.useMemo)(() => {
+        return globalProps ? Object.assign({}, globalProps) : constants_1.EMPTY_OBJECT;
+    }, [globalProps]);
+    const appContextValue = (0, react_1.useMemo)(() => {
+        const ret = Object.assign(Object.assign(Object.assign({}, date_functions_1.dateFunctions), misc_utils_1.miscellaneousUtils), { navigate,
+            confirm, signError: handleError, toast: react_hot_toast_1.default, loggedInUser: localLoggedInUser, setLoggedInUser: setLocalLoggedInUser, queryClient,
+            routerBaseName,
+            standalone,
+            decorateComponentsWithTestId, activeThemeUid: activeThemeId, activeThemeTone: activeThemeTone, availableThemeUids: availableThemeIds, globals,
+            delay: misc_1.delay,
+            Actions,
+            Transforms,
+            Utils,
+            DateUtils,
+            embed,
+            environment,
+            mediaSize,
+            apiInterceptorContext, setTheme: setActiveThemeId, setTone: setActiveThemeTone });
+        return ret;
+    }, [
+        Actions,
+        activeThemeId,
+        activeThemeTone,
+        apiInterceptorContext,
+        availableThemeIds,
+        confirm,
+        decorateComponentsWithTestId,
+        embed,
+        environment,
+        globals,
+        localLoggedInUser,
+        mediaSize,
+        navigate,
+        routerBaseName,
+        setActiveThemeId,
+        setActiveThemeTone,
+        standalone,
+    ]);
+    const [appState, setAppState] = (0, react_1.useState)(constants_1.EMPTY_OBJECT);
+    const registerAppState = (0, react_1.useCallback)((bucket, initialValue) => {
+        setAppState((prev) => {
+            return Object.assign(Object.assign({}, prev), { [bucket]: initialValue });
+        });
+    }, []);
+    const update = (0, react_1.useCallback)((bucket, patch) => {
+        setAppState((prev) => {
+            return Object.assign(Object.assign({}, prev), { [bucket]: Object.assign(Object.assign({}, (prev[bucket] || {})), patch) });
+        });
+    }, []);
+    const appStateContextValue = (0, react_1.useMemo)(() => {
+        return {
+            registerAppState,
+            appState,
+            update,
+        };
+    }, [appState, registerAppState, update]);
+    const memoedVars = (0, react_1.useRef)(new Map());
+    return ((0, jsx_runtime_1.jsx)(AppContext_1.AppContext.Provider, { value: appContextValue, children: (0, jsx_runtime_1.jsx)(AppStateContext_1.AppStateContext.Provider, { value: appStateContextValue, children: (0, Container_1.renderRoot)(rootContainer, memoedVars) }) }));
+}
+// =====================================================================================================================
+/**
+ * This React component is intended to be the root component in a browser window. It handles the application state
+ * changes, routing, and theming, provides an error boundary, and handles a few other aspects.
+ */
+const RootComponent = ({ node, previewMode = false, servedFromSingleFile = false, baseName = "", contributes = constants_1.EMPTY_OBJECT, globalProps, standalone, decorateComponentsWithTestId, defaultTheme, defaultTone, resources, resourceMap, }) => {
+    if (previewMode) {
+        //to prevent leaking the meta items to the parent document, if it lives in an iframe (e.g. docs)
+        react_helmet_async_1.HelmetProvider.canUseDOM = false;
+    }
+    const siteName = (globalProps === null || globalProps === void 0 ? void 0 : globalProps.name) || "NS app";
+    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.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)(ConfirmationModalContextProvider_1.ConfirmationModalContextProvider, { children: (0, jsx_runtime_1.jsx)(RootContentComponent, { rootContainer: node, routerBaseName: baseName, globalProps: globalProps, standalone: standalone, decorateComponentsWithTestId: decorateComponentsWithTestId }) }) }) })] }));
+    const Router = previewMode
+        ? react_router_dom_1.MemoryRouter
+        : servedFromSingleFile || (globalProps === null || globalProps === void 0 ? void 0 : globalProps.useHashBasedRouting)
+            ? react_router_dom_1.HashRouter
+            : react_router_dom_1.BrowserRouter;
+    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: queryClient, children: [(typeof window === "undefined" || process.env.VITE_REMIX) && dynamicChildren, !(typeof window === "undefined" || process.env.VITE_REMIX) && ((0, jsx_runtime_1.jsx)(Router, { basename: baseName, children: dynamicChildren }))] }) }) }));
+};
+function AppRoot({ apiInterceptor, contributes, node, decorateComponentsWithTestId, defaultTheme, defaultTone, resources, globalProps, standalone, baseName, previewMode, servedFromSingleFile, resourceMap, }) {
+    const rootNode = (0, react_1.useMemo)(() => {
+        const themedRoot = node.type === "Theme"
+            ? Object.assign(Object.assign({}, node), { props: Object.assign(Object.assign({}, node.props), { root: true }) }) : {
+            type: "Theme",
+            props: {
+                root: true,
+            },
+            children: [node],
+        };
+        return {
+            type: "Container",
+            children: [themedRoot],
+            uses: [],
+        };
+    }, [node]);
+    (0, reportEngineError_1.resetErrors)();
+    return ((0, jsx_runtime_1.jsx)(ComponentProvider_1.ComponentProvider, { contributes: contributes, children: (0, jsx_runtime_1.jsx)(RootComponent, { resourceMap: resourceMap, apiInterceptor: apiInterceptor, node: rootNode, contributes: contributes, resources: resources, baseName: baseName, decorateComponentsWithTestId: decorateComponentsWithTestId, defaultTheme: defaultTheme, defaultTone: defaultTone, globalProps: globalProps, standalone: standalone, previewMode: previewMode, servedFromSingleFile: servedFromSingleFile }) }));
+}
+exports.default = AppRoot;

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

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RouteContext = void 0;
+exports.useRouteContextValue = useRouteContextValue;
+exports.useRouteContext = useRouteContext;
+const react_1 = require("react");
+const immer_1 = __importDefault(require("immer"));
+const constants_1 = require("@components-core/constants");
+exports.RouteContext = (0, react_1.createContext)({
+    register: (col) => { },
+    unRegister: (id) => { },
+});
+function useRouteContextValue() {
+    const [routes, setRoutes] = (0, react_1.useState)(constants_1.EMPTY_ARRAY);
+    const routeContextValue = (0, react_1.useMemo)(() => {
+        return {
+            register: (column) => {
+                setRoutes((0, immer_1.default)((draft) => {
+                    const existing = draft.findIndex((col) => col.id === column.id);
+                    if (existing < 0) {
+                        draft.push(column);
+                    }
+                    else {
+                        draft[existing] = column;
+                    }
+                }));
+            },
+            unRegister: (id) => {
+                setRoutes((0, immer_1.default)((draft) => {
+                    return draft.filter((col) => col.id !== id);
+                }));
+            },
+        };
+    }, []);
+    return {
+        routes,
+        routeContextValue,
+    };
+}
+function useRouteContext() {
+    return (0, react_1.useContext)(exports.RouteContext);
+}

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

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollContext = void 0;
+const react_1 = __importDefault(require("react"));
+// --- The scroll context of the app
+exports.ScrollContext = react_1.default.createContext(null);