xmlui 0.4.0

package/dist/scripts/src/abstractions/ComponentDefs.js

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

package/dist/scripts/src/abstractions/ComponentDescriptorDefs.js

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

package/dist/scripts/src/abstractions/ContainerDefs.js

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

package/dist/scripts/src/abstractions/FunctionDefs.js

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

package/dist/scripts/src/abstractions/RendererDefs.js

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

package/dist/scripts/src/abstractions/scripting/ScriptParserError.js

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

package/dist/scripts/src/abstractions/scripting/ScriptingSourceTree.js

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

package/dist/scripts/src/abstractions/scripting/Token.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TokenType = void 0;
+// Token types available for parsing
+var TokenType;
+(function (TokenType) {
+    TokenType[TokenType["Eof"] = -1] = "Eof";
+    TokenType[TokenType["Ws"] = -2] = "Ws";
+    TokenType[TokenType["BlockComment"] = -3] = "BlockComment";
+    TokenType[TokenType["EolComment"] = -4] = "EolComment";
+    TokenType[TokenType["Unknown"] = 0] = "Unknown";
+    // --- Binding Expression specific tokens
+    TokenType[TokenType["LParent"] = 1] = "LParent";
+    TokenType[TokenType["RParent"] = 2] = "RParent";
+    TokenType[TokenType["Identifier"] = 3] = "Identifier";
+    TokenType[TokenType["Exponent"] = 4] = "Exponent";
+    TokenType[TokenType["Divide"] = 5] = "Divide";
+    TokenType[TokenType["Multiply"] = 6] = "Multiply";
+    TokenType[TokenType["Remainder"] = 7] = "Remainder";
+    TokenType[TokenType["Plus"] = 8] = "Plus";
+    TokenType[TokenType["Minus"] = 9] = "Minus";
+    TokenType[TokenType["BitwiseXor"] = 10] = "BitwiseXor";
+    TokenType[TokenType["BitwiseOr"] = 11] = "BitwiseOr";
+    TokenType[TokenType["LogicalOr"] = 12] = "LogicalOr";
+    TokenType[TokenType["BitwiseAnd"] = 13] = "BitwiseAnd";
+    TokenType[TokenType["LogicalAnd"] = 14] = "LogicalAnd";
+    TokenType[TokenType["IncOp"] = 15] = "IncOp";
+    TokenType[TokenType["DecOp"] = 16] = "DecOp";
+    TokenType[TokenType["Assignment"] = 17] = "Assignment";
+    TokenType[TokenType["AddAssignment"] = 18] = "AddAssignment";
+    TokenType[TokenType["SubtractAssignment"] = 19] = "SubtractAssignment";
+    TokenType[TokenType["ExponentAssignment"] = 20] = "ExponentAssignment";
+    TokenType[TokenType["MultiplyAssignment"] = 21] = "MultiplyAssignment";
+    TokenType[TokenType["DivideAssignment"] = 22] = "DivideAssignment";
+    TokenType[TokenType["RemainderAssignment"] = 23] = "RemainderAssignment";
+    TokenType[TokenType["ShiftLeftAssignment"] = 24] = "ShiftLeftAssignment";
+    TokenType[TokenType["ShiftRightAssignment"] = 25] = "ShiftRightAssignment";
+    TokenType[TokenType["SignedShiftRightAssignment"] = 26] = "SignedShiftRightAssignment";
+    TokenType[TokenType["BitwiseAndAssignment"] = 27] = "BitwiseAndAssignment";
+    TokenType[TokenType["BitwiseXorAssignment"] = 28] = "BitwiseXorAssignment";
+    TokenType[TokenType["BitwiseOrAssignment"] = 29] = "BitwiseOrAssignment";
+    TokenType[TokenType["LogicalAndAssignment"] = 30] = "LogicalAndAssignment";
+    TokenType[TokenType["LogicalOrAssignment"] = 31] = "LogicalOrAssignment";
+    TokenType[TokenType["NullCoalesceAssignment"] = 32] = "NullCoalesceAssignment";
+    TokenType[TokenType["Semicolon"] = 33] = "Semicolon";
+    TokenType[TokenType["Comma"] = 34] = "Comma";
+    TokenType[TokenType["Colon"] = 35] = "Colon";
+    TokenType[TokenType["LSquare"] = 36] = "LSquare";
+    TokenType[TokenType["RSquare"] = 37] = "RSquare";
+    TokenType[TokenType["QuestionMark"] = 38] = "QuestionMark";
+    TokenType[TokenType["NullCoalesce"] = 39] = "NullCoalesce";
+    TokenType[TokenType["OptionalChaining"] = 40] = "OptionalChaining";
+    TokenType[TokenType["BinaryNot"] = 41] = "BinaryNot";
+    TokenType[TokenType["LBrace"] = 42] = "LBrace";
+    TokenType[TokenType["RBrace"] = 43] = "RBrace";
+    TokenType[TokenType["Equal"] = 44] = "Equal";
+    TokenType[TokenType["StrictEqual"] = 45] = "StrictEqual";
+    TokenType[TokenType["LogicalNot"] = 46] = "LogicalNot";
+    TokenType[TokenType["NotEqual"] = 47] = "NotEqual";
+    TokenType[TokenType["StrictNotEqual"] = 48] = "StrictNotEqual";
+    TokenType[TokenType["LessThan"] = 49] = "LessThan";
+    TokenType[TokenType["LessThanOrEqual"] = 50] = "LessThanOrEqual";
+    TokenType[TokenType["ShiftLeft"] = 51] = "ShiftLeft";
+    TokenType[TokenType["GreaterThan"] = 52] = "GreaterThan";
+    TokenType[TokenType["GreaterThanOrEqual"] = 53] = "GreaterThanOrEqual";
+    TokenType[TokenType["ShiftRight"] = 54] = "ShiftRight";
+    TokenType[TokenType["SignedShiftRight"] = 55] = "SignedShiftRight";
+    TokenType[TokenType["Dot"] = 56] = "Dot";
+    TokenType[TokenType["Spread"] = 57] = "Spread";
+    TokenType[TokenType["Global"] = 58] = "Global";
+    TokenType[TokenType["Arrow"] = 59] = "Arrow";
+    TokenType[TokenType["DecimalLiteral"] = 60] = "DecimalLiteral";
+    TokenType[TokenType["HexadecimalLiteral"] = 61] = "HexadecimalLiteral";
+    TokenType[TokenType["BinaryLiteral"] = 62] = "BinaryLiteral";
+    TokenType[TokenType["RealLiteral"] = 63] = "RealLiteral";
+    TokenType[TokenType["StringLiteral"] = 64] = "StringLiteral";
+    TokenType[TokenType["Infinity"] = 65] = "Infinity";
+    TokenType[TokenType["NaN"] = 66] = "NaN";
+    TokenType[TokenType["True"] = 67] = "True";
+    TokenType[TokenType["False"] = 68] = "False";
+    TokenType[TokenType["Typeof"] = 69] = "Typeof";
+    TokenType[TokenType["Null"] = 70] = "Null";
+    TokenType[TokenType["Undefined"] = 71] = "Undefined";
+    TokenType[TokenType["In"] = 72] = "In";
+    TokenType[TokenType["Let"] = 73] = "Let";
+    TokenType[TokenType["Const"] = 74] = "Const";
+    TokenType[TokenType["Var"] = 75] = "Var";
+    TokenType[TokenType["If"] = 76] = "If";
+    TokenType[TokenType["Else"] = 77] = "Else";
+    TokenType[TokenType["Return"] = 78] = "Return";
+    TokenType[TokenType["Break"] = 79] = "Break";
+    TokenType[TokenType["Continue"] = 80] = "Continue";
+    TokenType[TokenType["Do"] = 81] = "Do";
+    TokenType[TokenType["While"] = 82] = "While";
+    TokenType[TokenType["For"] = 83] = "For";
+    TokenType[TokenType["Of"] = 84] = "Of";
+    TokenType[TokenType["Try"] = 85] = "Try";
+    TokenType[TokenType["Catch"] = 86] = "Catch";
+    TokenType[TokenType["Finally"] = 87] = "Finally";
+    TokenType[TokenType["Throw"] = 88] = "Throw";
+    TokenType[TokenType["Switch"] = 89] = "Switch";
+    TokenType[TokenType["Case"] = 90] = "Case";
+    TokenType[TokenType["Default"] = 91] = "Default";
+    TokenType[TokenType["Delete"] = 92] = "Delete";
+    TokenType[TokenType["Function"] = 93] = "Function";
+    TokenType[TokenType["Export"] = 94] = "Export";
+    TokenType[TokenType["Import"] = 95] = "Import";
+    TokenType[TokenType["As"] = 96] = "As";
+    TokenType[TokenType["From"] = 97] = "From";
+})(TokenType || (exports.TokenType = TokenType = {}));

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

@@ -0,0 +1,253 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.appRenderer = void 0;
+exports.getAppLayoutOrientation = getAppLayoutOrientation;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@remix-run/react");
+const lodash_es_1 = require("lodash-es");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const App_module_scss_1 = __importDefault(require("./App.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const AppContext_1 = require("@components-core/AppContext");
+const AppLayoutContext_1 = require("./AppLayoutContext");
+const Sheet_1 = require("@components/App/Sheet");
+const ScrollContext_1 = require("@components-core/ScrollContext");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const AppHeader_1 = require("@components/AppHeader/AppHeader");
+const misc_1 = require("@components-core/utils/misc");
+const hooks_1 = require("@components-core/utils/hooks");
+function App({ children, style, layout = "horizontal", loggedInUser, logoContent, scrollWholePage = true, onReady = lodash_es_1.noop, header, footer, }) {
+    const safeLayout = layout === null || layout === void 0 ? void 0 : layout.trim().replace(/[\u2013\u2014\u2011]/g, "-"); //It replaces all &ndash; (–) and &mdash; (—) and non-breaking hyphen '‑' symbols with simple dashes (-).
+    const { setLoggedInUser, mediaSize } = (0, AppContext_1.useAppContext)();
+    const [registeredHeaders, setRegisteredHeaders] = (0, react_1.useState)({});
+    const [registeredNavPanels, setRegisteredNavPanels] = (0, react_1.useState)({});
+    const hasRegisteredHeader = Object.keys(registeredHeaders).length > 0 || header !== undefined;
+    const hasRegisteredFooter = Object.keys(registeredHeaders).length > 0 || footer !== undefined;
+    const hasRegisteredNavPanel = Object.keys(registeredNavPanels).length > 0;
+    (0, react_1.useEffect)(() => {
+        setLoggedInUser(loggedInUser);
+    }, [loggedInUser, setLoggedInUser]);
+    (0, react_1.useEffect)(() => {
+        onReady();
+    }, [onReady]);
+    //we don't hide the nav panel if there's no header,
+    // because in that case we don't have a show drawer button
+    // the exception is the condensed layout, because we render a header in that case (otherwise we couldn't show the navPanel)
+    const navPanelVisible = mediaSize.largeScreen || (!hasRegisteredHeader && safeLayout !== "condensed" && safeLayout !== "condensed-sticky");
+    const scrollPageContainerRef = (0, react_1.useRef)(null);
+    const noScrollPageContainerRef = (0, react_1.useRef)(null);
+    const scrollContainerRef = scrollWholePage ? scrollPageContainerRef : noScrollPageContainerRef;
+    const [footerHeight, setFooterHeight] = (0, react_1.useState)(0);
+    const [headerHeight, setHeaderHeight] = (0, react_1.useState)(0);
+    const [navPanelRoot, setNavPanelRoot] = (0, react_1.useState)(null);
+    const [drawerRoot, setDrawerRoot] = (0, react_1.useState)(null);
+    const [headerRoot, setHeaderRoot] = (0, react_1.useState)(null);
+    const [footerRoot, setFooterRoot] = (0, react_1.useState)(null);
+    const footerRef = (0, react_1.useRef)();
+    const footerRefCallback = (0, react_1.useCallback)((element) => {
+        footerRef.current = element;
+        setFooterRoot(element);
+    }, []);
+    const headerRef = (0, react_1.useRef)();
+    const headerRefCallback = (0, react_1.useCallback)((element) => {
+        headerRef.current = element;
+        if (safeLayout !== "horizontal" && safeLayout !== "horizontal-sticky") {
+            setHeaderRoot(element);
+        }
+    }, [safeLayout]);
+    (0, hooks_1.useResizeObserver)(footerRef, (0, react_1.useCallback)((entries) => {
+        var _a, _b;
+        setFooterHeight((_b = (_a = entries === null || entries === void 0 ? void 0 : entries[0]) === null || _a === void 0 ? void 0 : _a.contentRect) === null || _b === void 0 ? void 0 : _b.height);
+    }, []));
+    (0, hooks_1.useResizeObserver)(headerRef, (0, react_1.useCallback)((entries) => {
+        var _a, _b;
+        setHeaderHeight((_b = (_a = entries === null || entries === void 0 ? void 0 : entries[0]) === null || _a === void 0 ? void 0 : _a.contentRect) === null || _b === void 0 ? void 0 : _b.height);
+    }, []));
+    const styleWithHelpers = (0, react_1.useMemo)(() => {
+        return Object.assign(Object.assign({}, style), { "--header-height": !scrollWholePage ? 0 : headerHeight + "px", "--footer-height": !scrollWholePage ? 0 : footerHeight + "px" });
+    }, [footerHeight, headerHeight, scrollWholePage, style]);
+    const [drawerVisible, setDrawerVisible] = (0, react_1.useState)(false);
+    const location = (0, react_2.useLocation)();
+    const toggleDrawer = (0, react_1.useCallback)(() => {
+        setDrawerVisible((prev) => !prev);
+    }, []);
+    const layoutContextValue = (0, react_1.useMemo)(() => {
+        return {
+            registerHeader: (id) => {
+                setRegisteredHeaders((prev) => {
+                    if (prev[id]) {
+                        return prev;
+                    }
+                    return Object.assign(Object.assign({}, prev), { [id]: true });
+                });
+            },
+            unregisterHeader: (id) => {
+                setRegisteredHeaders((prev) => {
+                    if (!prev[id]) {
+                        return prev;
+                    }
+                    const ret = Object.assign({}, prev);
+                    delete ret[id];
+                    return ret;
+                });
+            },
+            registerNavPanel: (id) => {
+                setRegisteredNavPanels((prev) => {
+                    if (prev[id]) {
+                        return prev;
+                    }
+                    return Object.assign(Object.assign({}, prev), { [id]: true });
+                });
+            },
+            unregisterNavPanel: (id) => {
+                setRegisteredNavPanels((prev) => {
+                    if (!prev[id]) {
+                        return prev;
+                    }
+                    const ret = Object.assign({}, prev);
+                    delete ret[id];
+                    return ret;
+                });
+            },
+            navPanelRoot,
+            drawerRoot,
+            headerRoot,
+            footerRoot,
+            navPanelVisible,
+            drawerVisible,
+            hasRegisteredHeader,
+            hasRegisteredNavPanel,
+            hasRegisteredFooter,
+            layout: safeLayout,
+            setNavPanelRoot: (el) => {
+                setNavPanelRoot(el);
+            },
+            showDrawer: () => {
+                setDrawerVisible(true);
+            },
+            hideDrawer: () => {
+                setDrawerVisible(false);
+            },
+            toggleDrawer: toggleDrawer,
+        };
+    }, [
+        navPanelRoot,
+        drawerRoot,
+        headerRoot,
+        footerRoot,
+        navPanelVisible,
+        drawerVisible,
+        hasRegisteredHeader,
+        hasRegisteredNavPanel,
+        hasRegisteredFooter,
+        safeLayout,
+        toggleDrawer,
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (navPanelVisible) {
+            setDrawerVisible(false);
+        }
+    }, [navPanelVisible]);
+    (0, react_1.useEffect)(() => {
+        setDrawerVisible(false);
+    }, [location, safeLayout]);
+    const wrapperBaseClasses = [
+        App_module_scss_1.default.wrapper,
+        {
+            [App_module_scss_1.default.scrollWholePage]: scrollWholePage,
+            "media-large": mediaSize.largeScreen,
+            "media-small": mediaSize.smallScreen,
+            "media-desktop": mediaSize.desktop,
+            "media-phone": mediaSize.phone,
+            "media-tablet": mediaSize.tablet,
+        },
+    ];
+    let content;
+    switch (safeLayout) {
+        case "vertical":
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.vertical), style: styleWithHelpers, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(App_module_scss_1.default.navPanelWrapper), ref: setNavPanelRoot }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.contentWrapper, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { ref: headerRefCallback, className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper), children: header }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, children: children }) }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })] }));
+            break;
+        case "vertical-sticky":
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.vertical, App_module_scss_1.default.sticky), style: styleWithHelpers, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(App_module_scss_1.default.navPanelWrapper), ref: setNavPanelRoot }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.contentWrapper, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { ref: headerRefCallback, className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), children: header }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, children: children }) }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] })] }));
+            break;
+        case "vertical-full-header":
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.verticalFullHeader), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: header }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.content, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("aside", { className: App_module_scss_1.default.navPanelWrapper, ref: setNavPanelRoot }), (0, jsx_runtime_1.jsx)("main", { className: App_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, children: children }) }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] }));
+            break;
+        case "condensed":
+        case "condensed-sticky":
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.horizontal, {
+                    [App_module_scss_1.default.sticky]: safeLayout === "condensed-sticky",
+                }), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsxs)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, {
+                            [App_module_scss_1.default.sticky]: safeLayout === "condensed-sticky",
+                        }), ref: headerRefCallback, children: [!hasRegisteredHeader && hasRegisteredNavPanel && ((0, jsx_runtime_1.jsx)(AppHeader_1.AppHeader, { canRestrictContentWidth: true, logoContent: logoContent, navPanelVisible: navPanelVisible, toggleDrawer: toggleDrawer, children: (0, jsx_runtime_1.jsx)("div", { ref: setNavPanelRoot, style: { minWidth: 0 } }) })), header] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, children: children }) }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] }));
+            break;
+        case "horizontal": {
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.horizontal), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsxs)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper), ref: headerRefCallback, children: [(0, jsx_runtime_1.jsx)("div", { ref: setHeaderRoot, children: header }), navPanelVisible && (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.navPanelWrapper, ref: setNavPanelRoot })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, children: children }) }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] }));
+            break;
+        }
+        case "horizontal-sticky":
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.horizontal, App_module_scss_1.default.sticky), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsxs)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: [(0, jsx_runtime_1.jsx)("div", { ref: setHeaderRoot, children: header }), navPanelVisible && (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.navPanelWrapper, ref: setNavPanelRoot })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, children: children }) }) }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] }));
+            break;
+        default:
+            throw new Error("layout type not supported: " + safeLayout);
+    }
+    return ((0, jsx_runtime_1.jsxs)(AppLayoutContext_1.AppLayoutContext.Provider, { value: layoutContextValue, children: [(0, jsx_runtime_1.jsx)(Sheet_1.Sheet, { open: drawerVisible, onOpenChange: (open) => setDrawerVisible(open), children: (0, jsx_runtime_1.jsx)(Sheet_1.SheetContent, { side: "left", ref: setDrawerRoot }) }), content] }));
+}
+function getAppLayoutOrientation(appLayout) {
+    switch (appLayout) {
+        case "vertical":
+        case "vertical-sticky":
+        case "vertical-full-header":
+            return "vertical";
+        default:
+            return "horizontal";
+    }
+}
+const metadata = {
+    displayName: "App",
+    description: "Display an app",
+    props: {
+        layout: (0, descriptorHelper_1.desc)("The layout type of the app"),
+        defaultRoute: (0, descriptorHelper_1.desc)("The app's default route"),
+        loggedInUser: (0, descriptorHelper_1.desc)("Optional information about the logged-in user"),
+        logoTemplate: {
+            description: "Optional template of the app logo",
+            valueType: "ComponentDef",
+        },
+        scrollWholePage: (0, descriptorHelper_1.desc)("Whether the whole page should scroll or just the content area"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(App_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "width-navPanel-App": "$space-72",
+        "max-content-width-App": "$max-content-width",
+        "shadow-header-App": "$shadow-spread",
+        "shadow-pages-App": "$shadow-spread",
+        light: {
+        // --- No light-specific theme vars
+        },
+        dark: {
+        // --- No dark-specific theme vars
+        },
+    },
+};
+exports.appRenderer = (0, renderers_1.createComponentRenderer)("App", ({ node, extractValue, renderChild, layoutCss, lookupEventHandler }) => {
+    const _a = (0, misc_1.groupChildrenByType)(node), { AppHeader, Footer } = _a, rest = __rest(_a, ["AppHeader", "Footer"]);
+    const layoutType = extractValue(node.props.layout) || "condensed-sticky";
+    return ((0, jsx_runtime_1.jsx)(App, { scrollWholePage: extractValue.asOptionalBoolean(node.props.scrollWholePage), style: layoutCss, layout: layoutType, loggedInUser: extractValue(node.props.loggedInUser), logoContent: renderChild(node.props.logoTemplate), onReady: lookupEventHandler("ready"), header: renderChild(AppHeader), footer: renderChild(Footer), children: renderChild(Object.values(rest).flatMap((a) => a)) }));
+}, metadata);

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppLayoutContext = void 0;
+exports.useAppLayoutContext = useAppLayoutContext;
+const react_1 = require("react");
+exports.AppLayoutContext = (0, react_1.createContext)(null);
+function useAppLayoutContext() {
+    return (0, react_1.useContext)(exports.AppLayoutContext);
+}

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppStateContext = void 0;
+exports.useAppStateContextPart = useAppStateContextPart;
+const use_context_selector_1 = require("use-context-selector");
+exports.AppStateContext = (0, use_context_selector_1.createContext)(null);
+function useAppStateContextPart(selector) {
+    return (0, use_context_selector_1.useContextSelector)(exports.AppStateContext, selector);
+}

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

@@ -0,0 +1,89 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SheetContent = exports.Sheet = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const SheetPrimitive = __importStar(require("@radix-ui/react-dialog"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const Icon_1 = require("@components/Icon/Icon");
+const Sheet_module_scss_1 = __importDefault(require("./Sheet.module.scss"));
+const react_visually_hidden_1 = require("@radix-ui/react-visually-hidden");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+//based on this: https://ui.shadcn.com/docs/components/sheet
+const Sheet = SheetPrimitive.Root;
+exports.Sheet = Sheet;
+const SheetPortal = SheetPrimitive.Portal;
+const SheetOverlay = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return ((0, jsx_runtime_1.jsx)(SheetPrimitive.Overlay, Object.assign({ className: (0, classnames_1.default)(Sheet_module_scss_1.default.overlay, className) }, props, { ref: ref })));
+});
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+const SheetContent = React.forwardRef((_a, ref) => {
+    var { side = "left", className, children } = _a, props = __rest(_a, ["side", "className", "children"]);
+    const { root } = (0, ThemeContext_1.useTheme)();
+    return ((0, jsx_runtime_1.jsxs)(SheetPortal, { container: root, children: [(0, jsx_runtime_1.jsx)(SheetOverlay, {}), (0, jsx_runtime_1.jsxs)(SheetPrimitive.Content, Object.assign({ forceMount: true, ref: ref, className: (0, classnames_1.default)(Sheet_module_scss_1.default.sheetContent, {
+                    [Sheet_module_scss_1.default.top]: side === "top",
+                    [Sheet_module_scss_1.default.bottom]: side === "bottom",
+                    [Sheet_module_scss_1.default.left]: side === "left",
+                    [Sheet_module_scss_1.default.right]: side === "right",
+                }, className) }, props, { children: [children, (0, jsx_runtime_1.jsxs)(SheetPrimitive.Close, { className: Sheet_module_scss_1.default.close, children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "close" }), (0, jsx_runtime_1.jsx)(react_visually_hidden_1.VisuallyHidden, { children: "Close" })] })] }))] }));
+});
+exports.SheetContent = SheetContent;
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+const SheetHeader = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)("flex flex-col space-y-2 text-center sm:text-left", className) }, props)));
+};
+SheetHeader.displayName = "SheetHeader";
+const SheetFooter = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className) }, props)));
+};
+SheetFooter.displayName = "SheetFooter";
+const SheetTitle = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return ((0, jsx_runtime_1.jsx)(SheetPrimitive.Title, Object.assign({ ref: ref, className: (0, classnames_1.default)("text-lg font-semibold text-foreground", className) }, props)));
+});
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+const SheetDescription = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return ((0, jsx_runtime_1.jsx)(SheetPrimitive.Description, Object.assign({ ref: ref, className: (0, classnames_1.default)("text-sm text-muted-foreground", className) }, props)));
+});
+SheetDescription.displayName = SheetPrimitive.Description.displayName;

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

@@ -0,0 +1,121 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.appHeaderComponentRenderer = exports.AppHeader = void 0;
+exports.useLogoUrl = useLogoUrl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const AppHeader_module_scss_1 = __importDefault(require("./AppHeader.module.scss"));
+const Icon_1 = require("@components/Icon/Icon");
+const renderers_1 = require("@components-core/renderers");
+const constants_1 = require("@components-core/constants");
+const AppContext_1 = require("@components-core/AppContext");
+const Logo_1 = require("@components/Logo/Logo");
+const AppLayoutContext_1 = require("@components/App/AppLayoutContext");
+const Button_1 = require("@components/Button/Button");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const base_utils_1 = require("@components-core/theming/themes/base-utils");
+const hooks_1 = require("@components-core/utils/hooks");
+function useLogoUrl(inDrawer) {
+    const { activeThemeId, activeThemeTone } = (0, ThemeContext_1.useTheme)();
+    const logoResourceString = "resource:logo";
+    const drawerLogoResourceString = "resource:logo.drawer";
+    const tonedLogoResourceString = `resource:logo-${activeThemeTone}`;
+    const themedLogoResourceString = `resource:logo-${activeThemeId}`;
+    const baseLogoUrl = (0, ThemeContext_1.useResourceUrl)(logoResourceString);
+    const drawerLogoUrl = (0, ThemeContext_1.useResourceUrl)(drawerLogoResourceString);
+    const toneLogoUrl = (0, ThemeContext_1.useResourceUrl)(tonedLogoResourceString); //TODO illesg review, it's for light/dark built in themes
+    const themeLogoUrl = (0, ThemeContext_1.useResourceUrl)(themedLogoResourceString); //TODO illesg review, it's for light/dark built in themes
+    if (inDrawer) {
+        return drawerLogoUrl || baseLogoUrl;
+    }
+    return themeLogoUrl || toneLogoUrl || baseLogoUrl;
+}
+const AppHeader = ({ children, profileMenu, style = constants_1.EMPTY_OBJECT, logoContent, className, canRestrictContentWidth, navPanelVisible = true, toggleDrawer, showLogo, hasRegisteredNavPanel, logoTitle }) => {
+    const { loggedInUser } = (0, AppContext_1.useAppContext)();
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.header, className), style: style, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.headerInner, {
+                [AppHeader_module_scss_1.default.full]: !canRestrictContentWidth,
+            }), children: [!navPanelVisible && hasRegisteredNavPanel && ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: toggleDrawer, icon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "hamburger" }), variant: "ghost", style: { color: "inherit" } })), (showLogo || !navPanelVisible) && ((0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoContainer, children: logoContent ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: logoContent }) : (0, jsx_runtime_1.jsx)(Logo_1.Logo, { title: logoTitle }) })), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.childrenWrapper, children: children }), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.rightItems, children: profileMenu })] }) }));
+};
+exports.AppHeader = AppHeader;
+function AppContextAwareAppHeader({ children, logoContent, profileMenu, style, className, logoTitle, }) {
+    const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
+    const id = (0, react_1.useId)();
+    const registered = (0, react_1.useRef)(false);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        if (!appLayoutContext || registered.current) {
+            return;
+        }
+        appLayoutContext.registerHeader(id);
+        registered.current = true;
+        return () => {
+            registered.current = false;
+            appLayoutContext.unregisterHeader(id);
+        };
+    }, [appLayoutContext, id]);
+    const { navPanelVisible, toggleDrawer, headerRoot, layout, setNavPanelRoot, hasRegisteredHeader, hasRegisteredNavPanel, } = appLayoutContext || {};
+    const showLogo = layout !== "vertical" && layout !== "vertical-sticky";
+    const canRestrictContentWidth = layout !== "vertical-full-header";
+    if (headerRoot) {
+        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)(exports.AppHeader, { hasRegisteredNavPanel: hasRegisteredNavPanel, navPanelVisible: navPanelVisible, toggleDrawer: toggleDrawer, canRestrictContentWidth: canRestrictContentWidth, showLogo: showLogo, logoContent: logoContent, profileMenu: profileMenu, style: style, className: className, logoTitle: logoTitle, children: [layout && layout.startsWith("condensed") && (0, jsx_runtime_1.jsx)("div", { ref: setNavPanelRoot, style: { minWidth: 0 } }), children] }), headerRoot);
+    }
+    return ((0, jsx_runtime_1.jsxs)(exports.AppHeader, { hasRegisteredNavPanel: hasRegisteredNavPanel, navPanelVisible: navPanelVisible, toggleDrawer: toggleDrawer, canRestrictContentWidth: canRestrictContentWidth, showLogo: showLogo, logoContent: logoContent, profileMenu: profileMenu, style: style, className: className, logoTitle: logoTitle, children: [layout && layout.startsWith("condensed") && (0, jsx_runtime_1.jsx)("div", { ref: setNavPanelRoot, style: { minWidth: 0 } }), children] }));
+}
+// @ts-ignore
+const metadata = {
+    displayName: "AppHeader",
+    description: "Display an application header",
+    props: {
+        logoTemplate: {
+            description: "Template for the application logo",
+            valueType: "ComponentDef",
+        },
+        profileMenuTemplate: {
+            description: "Template for the profile menu",
+            valueType: "ComponentDef",
+        },
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(AppHeader_module_scss_1.default.themeVars),
+    defaultThemeVars: Object.assign(Object.assign(Object.assign(Object.assign({ "height-AppHeader": "$space-16", "max-content-width-AppHeader": "$max-content-width-App" }, (0, base_utils_1.borderSubject)("AppHeader", {
+        bottom: {
+            color: "$color-border",
+            thickness: "1px",
+            style: "solid",
+        },
+        all: {
+            color: "$color-border",
+            thickness: "0",
+            style: "solid",
+        },
+    })), (0, base_utils_1.paddingSubject)("logo-AppHeader", { horizontal: "$space-0", vertical: "$space-4" })), (0, base_utils_1.paddingSubject)("AppHeader", { horizontal: "$space-4", vertical: "$space-0" })), { "radius-AppHeader": "0px", light: {
+            "color-bg-AppHeader": "white",
+        }, dark: {
+            "color-bg-AppHeader": "$color-surface-900",
+        } }),
+};
+exports.appHeaderComponentRenderer = (0, renderers_1.createComponentRenderer)("AppHeader", ({ node, renderChild, layoutCss, layoutContext, extractValue }) => {
+    // --- Convert the plain (text) logo template into component definition
+    let logoTemplate = node.props.logoTemplate;
+    if (typeof logoTemplate === "string") {
+        logoTemplate = {
+            type: "TextNode",
+            props: {
+                value: logoTemplate,
+            },
+        };
+    }
+    return ((0, jsx_runtime_1.jsx)(AppContextAwareAppHeader, { profileMenu: renderChild(extractValue(node.props.profileMenuTemplate, true)), logoTitle: extractValue(node.props.logoTitle) || (layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.logoTitle), logoContent: renderChild(logoTemplate, {
+            type: "Stack",
+            orientation: "horizontal",
+        }) || (layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.logoContent), style: layoutCss, className: layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.themeClassName, children: renderChild(node.children, {
+            // Since the AppHeader is a flex container, it's children should behave the same as in a stack
+            type: "Stack",
+            width: "100%",
+            height: "100%",
+        }) }));
+}, metadata);