xmlui 0.9.58 → 0.9.59

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

@@ -1,22 +1,81 @@
 "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());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AppWithCodeViewNative = AppWithCodeViewNative;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const AppWithCodeView_module_scss_1 = __importDefault(require("./AppWithCodeView.module.scss"));
-const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
 const NestedAppNative_1 = require("./NestedAppNative");
 const Markdown_1 = require("../Markdown/Markdown");
+const ButtonNative_1 = require("../Button/ButtonNative");
+const NestedApp_module_scss_1 = __importDefault(require("./NestedApp.module.scss"));
+const AppHeaderNative_1 = require("../AppHeader/AppHeaderNative");
+const Tooltip_1 = require("./Tooltip");
+const rx_1 = require("react-icons/rx");
+const lia_1 = require("react-icons/lia");
+const utils_1 = require("./utils");
+const AppContext_1 = require("../../components-core/AppContext");
+const classnames_1 = __importDefault(require("classnames"));
+const logo_svg_react_1 = __importDefault(require("./logo.svg?react"));
 /**
  * A component that displays markdown content on the left and a NestedApp on the right
  */
-function AppWithCodeViewNative({ markdown, sideBySide, app, api, components = [], config, activeTone, activeTheme, title, height, allowPlaygroundPopup, withFrame, }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(AppWithCodeView_module_scss_1.default.container, {
-            [AppWithCodeView_module_scss_1.default.horizontal]: sideBySide,
-            [AppWithCodeView_module_scss_1.default.vertical]: !sideBySide,
-        }), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)({ [AppWithCodeView_module_scss_1.default.column]: sideBySide }), children: (0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { children: markdown }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)({ [AppWithCodeView_module_scss_1.default.column]: sideBySide }), children: (0, jsx_runtime_1.jsx)(NestedAppNative_1.NestedApp, { app: app, api: api, components: components, config: config, activeTone: activeTone, activeTheme: activeTheme, title: title, height: height, allowPlaygroundPopup: allowPlaygroundPopup, withFrame: sideBySide ? false : withFrame }) })] }));
+function AppWithCodeViewNative({ markdown, splitView, initiallyShowCode = false, app, api, components = [], config, activeTone, activeTheme, title, height, allowPlaygroundPopup, }) {
+    const [showCode, setShowCode] = (0, react_1.useState)(initiallyShowCode);
+    const logoUrl = (0, AppHeaderNative_1.useLogoUrl)();
+    const { appGlobals } = (0, AppContext_1.useAppContext)();
+    const [refreshVersion, setRefreshVersion] = (0, react_1.useState)(0);
+    const useHashBasedRouting = (appGlobals === null || appGlobals === void 0 ? void 0 : appGlobals.useHashBasedRouting) || true;
+    const openPlayground = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
+        const data = {
+            standalone: {
+                app,
+                components,
+                config: {
+                    name: title,
+                    themes: [],
+                    defaultTheme: activeTheme,
+                },
+                api: api,
+            },
+            options: {
+                fixedTheme: false,
+                swapped: false,
+                previewMode: false,
+                orientation: "horizontal",
+                activeTheme,
+                activeTone,
+                content: "app",
+            },
+        };
+        const appQueryString = yield (0, utils_1.createQueryString)(JSON.stringify(data));
+        window.open(useHashBasedRouting
+            ? `https://docs.xmlui.com/#/playground#${appQueryString}`
+            : `https://docs.xmlui.com/playground#${appQueryString}`, "_blank");
+    }), [app, components, title, activeTheme, api, activeTone, useHashBasedRouting]);
+    if (splitView) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.nestedAppContainer, style: { height }, children: [(0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsx)(logo_svg_react_1.default, { className: NestedApp_module_scss_1.default.logo }), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.viewControls, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => setShowCode(true), variant: showCode ? "solid" : "ghost", className: (0, classnames_1.default)(NestedApp_module_scss_1.default.splitViewButton), style: {
+                                        backgroundColor: !showCode ? "transparent" : "",
+                                    }, children: "XML" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => setShowCode(false), variant: showCode ? "ghost" : "solid", className: (0, classnames_1.default)(NestedApp_module_scss_1.default.splitViewButton), style: {
+                                        backgroundColor: showCode ? "transparent" : "",
+                                    }, children: "UI" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [allowPlaygroundPopup && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
+                                            openPlayground();
+                                        }, children: (0, jsx_runtime_1.jsx)(rx_1.RxOpenInNewWindow, {}) }), label: "View and edit in new full-width window" })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
+                                            setShowCode(false);
+                                            setRefreshVersion(refreshVersion + 1);
+                                        }, children: (0, jsx_runtime_1.jsx)(lia_1.LiaUndoAltSolid, {}) }), label: "Reset the app" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.contentContainer, children: [showCode && (0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { style: { height: "100%" }, children: markdown }), !showCode && ((0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { refVersion: refreshVersion, app: app, api: api, components: components, config: config, activeTone: activeTone, activeTheme: activeTheme, title: title, allowPlaygroundPopup: allowPlaygroundPopup, withFrame: false }))] })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { children: markdown }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { app: app, api: api, components: components, config: config, activeTone: activeTone, activeTheme: activeTheme, title: title, height: height, allowPlaygroundPopup: allowPlaygroundPopup, withFrame: true }) })] }));
 }
 /**
  * Export a named default for easier imports

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

@@ -58,14 +58,20 @@ exports.NestedAppMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         [`marginTop-${COMP}`]: "$space-3",
         [`marginBottom-${COMP}`]: "$space-3",
-        [`padding-${COMP}`]: "$space-4",
-        [`paddingTop-${COMP}`]: "$space-2",
-        [`border-${COMP}`]: "1px solid $color-surface-100",
-        [`borderRadius-${COMP}`]: "$space-4",
+        [`padding-${COMP}`]: "0",
+        [`paddingTop-${COMP}`]: "0",
+        [`border-${COMP}`]: "0.5px solid $borderColor",
+        [`borderRadius-${COMP}`]: "$space-2",
         [`backgroundColor-frame-${COMP}`]: "$color-primary-50",
-        [`gap-frame-${COMP}`]: "$space-4",
+        [`gap-frame-${COMP}`]: "0",
         [`fontWeight-header-${COMP}`]: "$fontWeight-bold",
         [`boxShadow-${COMP}`]: "$boxShadow-md",
+        [`backgroundColor-viewControls-${COMP}`]: "$color-primary-100",
+        [`borderRadius-viewControls-${COMP}`]: "5px",
+        [`padding-viewControls-${COMP}`]: "$space-0_5",
+        [`padding-button-splitView-${COMP}`]: "4px 6px",
+        [`width-button-splitView-${COMP}`]: "60px",
+        [`borderBottom-header-${COMP}`]: "0.5px solid $borderColor",
     },
 });
 exports.nestedAppComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NestedAppMd, ({ node, extractValue, layoutCss }) => {

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

@@ -53,22 +53,25 @@ function IndexAwareNestedApp(props) {
     }
     return (0, jsx_runtime_1.jsx)(LazyNestedApp, Object.assign({}, props));
 }
-function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, activeTheme, activeTone, title, height, allowPlaygroundPopup = defaultProps_1.defaultProps.allowPlaygroundPopup, withFrame = defaultProps_1.defaultProps.withFrame, style }) {
+function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, activeTheme, activeTone, title, height, allowPlaygroundPopup = defaultProps_1.defaultProps.allowPlaygroundPopup, withFrame = defaultProps_1.defaultProps.withFrame, style, refVersion = 0, }) {
     const rootRef = (0, react_1.useRef)(null);
     const shadowRef = (0, react_1.useRef)(null);
     const contentRootRef = (0, react_1.useRef)(null);
     const nestedAppId = (0, react_1.useId)();
-    const [refreshVersion, setRefreshVersion] = (0, react_1.useState)(0);
+    const [refreshVersion, setRefreshVersion] = (0, react_1.useState)(refVersion);
     const theme = (0, ThemeContext_1.useTheme)();
     const toneToApply = activeTone || (config === null || config === void 0 ? void 0 : config.defaultTone) || (theme === null || theme === void 0 ? void 0 : theme.activeThemeTone);
     const { appGlobals } = (0, AppContext_1.useAppContext)();
     const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();
     const { interceptorWorker } = (0, useApiInterceptorContext_1.useApiInterceptorContext)();
+    (0, react_1.useEffect)(() => {
+        setRefreshVersion(refVersion);
+    }, [refVersion]);
     //TODO illesg: we should come up with something to make sure that nestedApps doesn't overwrite each other's mocked api endpoints
     //   disabled for now, as it messes up the paths of not mocked APIs (e.g. resources/{staticJsonfiles})
     //const safeId = playgroundId || nestedAppId;
     //const apiUrl = api ? `/${safeId.replaceAll(":", "")}` : '';
-    const apiUrl = '';
+    const apiUrl = "";
     const mock = (0, react_1.useMemo)(() => {
         if (!api) {
             return undefined;
@@ -148,7 +151,7 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
         Object.keys(theme.themeStyles).forEach((key) => {
             themeVarReset[key] = "initial";
         });
-        let nestedAppRoot = ((0, jsx_runtime_1.jsx)(ApiInterceptorProvider_1.ApiInterceptorProvider, { interceptor: mock, apiWorker: interceptorWorker, children: (0, jsx_runtime_1.jsx)("div", { style: Object.assign(Object.assign({ height }, style), themeVarReset), children: (0, jsx_runtime_1.jsx)(AppRoot_1.AppRoot, { previewMode: true, standalone: true, trackContainerHeight: height ? "fixed" : "auto", node: component, globalProps: globalProps, defaultTheme: activeTheme || (config === null || config === void 0 ? void 0 : config.defaultTheme), defaultTone: toneToApply, contributes: {
+        let nestedAppRoot = ((0, jsx_runtime_1.jsx)(ApiInterceptorProvider_1.ApiInterceptorProvider, { interceptor: mock, apiWorker: interceptorWorker, children: (0, jsx_runtime_1.jsx)("div", { style: Object.assign(Object.assign({ height }, style), themeVarReset), children: (0, jsx_runtime_1.jsx)(AppRoot_1.AppRoot, { isNested: true, previewMode: true, standalone: true, trackContainerHeight: height ? "fixed" : "auto", node: component, globalProps: globalProps, defaultTheme: activeTheme || (config === null || config === void 0 ? void 0 : config.defaultTheme), defaultTone: toneToApply, contributes: {
                         compoundComponents,
                         themes: config === null || config === void 0 ? void 0 : config.themes,
                     }, resources: config === null || config === void 0 ? void 0 : config.resources, extensionManager: componentRegistry.getExtensionManager() }, `app-${nestedAppId}-${refreshVersion}`) }) }));

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

@@ -30,12 +30,12 @@ exports.PagesMd = (0, ComponentDefs_1.createMetadata)({
     description: "`Pages` serves as the routing coordinator within an [App](/components/App), " +
         "managing which [Page](/components/Page)  displays based on the current URL.",
     props: {
-        defaultRoute: {
-            description: `The default route when displaying the app`,
-            defaultValue: PagesNative_1.defaultProps.defaultRoute,
+        fallbackPath: {
+            description: `The fallback path when the current URL does not match any of the paths of the pages.`,
+            defaultValue: PagesNative_1.defaultProps.fallbackPath,
         },
     },
 });
 exports.pagesRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.PagesMd, ({ node, extractValue, renderChild }) => {
-    return ((0, jsx_runtime_1.jsx)(PagesNative_1.Pages, { defaultRoute: extractValue(node.props.defaultRoute), node: node, renderChild: renderChild, extractValue: extractValue }));
+    return ((0, jsx_runtime_1.jsx)(PagesNative_1.Pages, { fallbackPath: extractValue(node.props.fallbackPath), node: node, renderChild: renderChild, extractValue: extractValue }));
 });

package/dist/scripts/src/components/Pages/PagesNative.js

@@ -23,12 +23,17 @@ const react_2 = require("@remix-run/react");
 const classnames_1 = __importDefault(require("classnames"));
 const constants_1 = require("../../components-core/constants");
 const Pages_module_scss_1 = __importDefault(require("./Pages.module.scss"));
+const AppLayoutContext_1 = require("../App/AppLayoutContext");
 // Default props for Pages component
 exports.defaultProps = {
-    defaultRoute: "/"
+    fallbackPath: "/",
 };
 function RouteWrapper({ childRoute = constants_1.EMPTY_ARRAY, renderChild, layoutContext, style, uid, }) {
+    var _a;
     const params = (0, react_2.useParams)();
+    const location = (0, react_2.useLocation)();
+    const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
+    const linkInfo = ((_a = appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.linkMap) === null || _a === void 0 ? void 0 : _a.get(location.pathname)) || {};
     //we need to wrap the child route in a container to make sure the route params are available.
     // we do this wrapping by providing an empty object to vars.
     // this way it becomes an 'implicit' container (vars/state inside this container is propagated to the parent)
@@ -54,7 +59,7 @@ function RouteWrapper({ childRoute = constants_1.EMPTY_ARRAY, renderChild, layou
     }, [style]);
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Pages_module_scss_1.default.wrapper, "xmlui-page-root"), style: wrapperStyle, children: renderChild(wrappedWithContainer, layoutContext) }, JSON.stringify(params)));
 }
-function Pages({ node, renderChild, extractValue, defaultRoute }) {
+function Pages({ node, renderChild, extractValue, fallbackPath }) {
     var _a;
     const routes = [];
     const restChildren = [];
@@ -68,5 +73,5 @@ function Pages({ node, renderChild, extractValue, defaultRoute }) {
     });
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Routes, { children: [routes.map((child, i) => {
                         return ((0, jsx_runtime_1.jsx)(react_2.Route, { path: extractValue(child.props.url), element: renderChild(child) }, i));
-                    }), !!defaultRoute && (0, jsx_runtime_1.jsx)(react_2.Route, { path: "*", element: (0, jsx_runtime_1.jsx)(react_2.Navigate, { to: defaultRoute, replace: true }) })] }), renderChild(restChildren)] }));
+                    }), !!fallbackPath && (0, jsx_runtime_1.jsx)(react_2.Route, { path: "*", element: (0, jsx_runtime_1.jsx)(react_2.Navigate, { to: fallbackPath, replace: true }) })] }), renderChild(restChildren)] }));
 }

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

@@ -41,20 +41,21 @@ exports.RadioGroupMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         [`gap-${RGOption}`]: "$space-1_5",
         [`borderWidth-${RGOption}`]: "1px",
-        [`backgroundColor-checked-${RGOption}-indicator`]: `$backgroundColor-primary`,
-        [`backgroundColor-checked-${RGOption}--disabled]`]: `$borderColor-${RGOption}--disabled`,
-        [`backgroundColor-checked-${RGOption}-error`]: `$borderColor-${RGOption}-error`,
-        [`backgroundColor-checked-${RGOption}-warning`]: `$borderColor-${RGOption}-warning`,
-        [`backgroundColor-checked-${RGOption}-success`]: `$borderColor-${RGOption}-success`,
-        [`fontSize-${RGOption}`]: "$fontSize-small",
-        [`fontWeight-${RGOption}`]: "$fontWeight-bold",
-        [`textColor-${RGOption}-error`]: `$borderColor-${RGOption}-error`,
-        [`textColor-${RGOption}-warning`]: `$borderColor-${RGOption}-warning`,
-        [`textColor-${RGOption}-success`]: `$borderColor-${RGOption}-success`,
-        [`backgroundColor-checked-${RGOption}-default`]: "$color-primary-500",
+        [`borderWidth-${RGOption}-validation`]: `2px`,
         [`borderColor-${RGOption}-default`]: "$color-surface-500",
+        [`borderColor-checked-${RGOption}`]: "$color-primary-500",
         [`borderColor-${RGOption}-default--hover`]: "$color-surface-700",
         [`borderColor-${RGOption}-default--active`]: "$color-primary-500",
+        [`backgroundColor-${RGOption}--disabled`]: "$backgroundColor--disabled",
+        [`backgroundColor-checked-${RGOption}`]: "$color-primary-500",
+        [`backgroundColor-${RGOption}-checked--disabled`]: `$textColor--disabled`,
+        [`backgroundColor-checked-indicator-${RGOption}`]: `transparent`,
+        [`backgroundColor-${RGOption}-checked-indicator--disabled`]: `transparent`,
+        [`backgroundColor-checked-${RGOption}-error`]: `$borderColor-error`,
+        [`backgroundColor-checked-${RGOption}-warning`]: `$borderColor-warning`,
+        [`backgroundColor-checked-${RGOption}-success`]: `$borderColor-success`,
+        [`fontSize-${RGOption}`]: "$fontSize-small",
+        [`fontWeight-${RGOption}`]: "$fontWeight-bold",
     },
 });
 exports.radioGroupRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.RadioGroupMd, ({ node, extractValue, layoutCss, state, updateState, lookupEventHandler, renderChild, registerComponentApi, }) => {

package/dist/scripts/src/components/RadioGroup/RadioGroupNative.js

@@ -37,7 +37,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioGroupOption = exports.RadioGroup = exports.defaultProps = void 0;
-exports.useRadioGroupValue = useRadioGroupValue;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const InnerRadioGroup = __importStar(require("@radix-ui/react-radio-group"));
@@ -54,8 +53,9 @@ exports.defaultProps = {
     validationStatus: "none",
     required: false,
 };
-const RadioGroupValidationStatusContext = (0, react_1.createContext)({
+const RadioGroupStatusContext = (0, react_1.createContext)({
     status: "none",
+    enabled: exports.defaultProps.enabled,
 });
 exports.RadioGroup = (0, react_1.forwardRef)(function RadioGroup({ id, value = exports.defaultProps.value, initialValue = exports.defaultProps.initialValue, enabled = exports.defaultProps.enabled, validationStatus = exports.defaultProps.validationStatus, label, labelPosition, labelWidth, labelBreak, required = exports.defaultProps.required, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, children, registerComponentApi, style, }, forwardedRef) {
     const [focused, setFocused] = react_1.default.useState(false);
@@ -90,40 +90,25 @@ exports.RadioGroup = (0, react_1.forwardRef)(function RadioGroup({ id, value = e
         });
     }, [/* focus, */ registerComponentApi, setValue]);
     const contextValue = (0, react_1.useMemo)(() => {
-        return { value, status: validationStatus };
-    }, [value, validationStatus]);
-    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: exports.RadioGroupOption, children: (0, jsx_runtime_1.jsx)(RadioGroupValidationStatusContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Root, { id: id, onBlur: handleOnBlur, onFocus: handleOnFocus, onValueChange: onInputChange, value: value, disabled: !enabled, className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioGroupContainer, {
+        return { value, status: validationStatus, enabled };
+    }, [value, validationStatus, enabled]);
+    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: exports.RadioGroupOption, children: (0, jsx_runtime_1.jsx)(RadioGroupStatusContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Root, { id: id, onBlur: handleOnBlur, onFocus: handleOnFocus, onValueChange: onInputChange, value: value, disabled: !enabled, className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioGroupContainer, {
                         [RadioGroup_module_scss_1.default.focused]: focused,
                         [RadioGroup_module_scss_1.default.disabled]: !enabled,
                     }), children: children }) }) }) }));
 });
-function useRadioGroupValue() {
-    const context = (0, react_1.useContext)(RadioGroupValidationStatusContext);
-    if (!context) {
-        throw new Error("useRadioGroupValue must be used within a RadioGroup");
-    }
-    const { value } = context;
-    const isChecked = (0, react_1.useCallback)((optionValue) => value === optionValue, [value]);
-    return {
-        value,
-        isChecked,
-    };
-}
 const RadioGroupOption = ({ value, label, enabled = true, optionRenderer, style, }) => {
     const id = (0, react_1.useId)();
-    const validationContext = (0, react_1.useContext)(RadioGroupValidationStatusContext);
-    const { isChecked } = useRadioGroupValue();
+    const radioGroupContext = (0, react_1.useContext)(RadioGroupStatusContext);
     const statusStyles = (0, react_1.useMemo)(() => ({
-        [RadioGroup_module_scss_1.default.disabled]: !enabled,
-        [RadioGroup_module_scss_1.default.error]: value === validationContext.value && validationContext.status === "error",
-        [RadioGroup_module_scss_1.default.warning]: value === validationContext.value && validationContext.status === "warning",
-        [RadioGroup_module_scss_1.default.valid]: value === validationContext.value && validationContext.status === "valid",
-    }), [enabled, validationContext.status, validationContext.value, value]);
-    const item = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InnerRadioGroup.Item, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioOption, statusStyles, {
-                    [RadioGroup_module_scss_1.default.checked]: isChecked(value),
-                }), value: value, disabled: !enabled, id: id, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Indicator, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.indicator, statusStyles) }) }), (0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.label, statusStyles), children: label !== null && label !== void 0 ? label : value })] })), [enabled, id, label, statusStyles, value]);
+        [RadioGroup_module_scss_1.default.disabled]: radioGroupContext.enabled === false ? true : !enabled,
+        [RadioGroup_module_scss_1.default.error]: value === radioGroupContext.value && radioGroupContext.status === "error",
+        [RadioGroup_module_scss_1.default.warning]: value === radioGroupContext.value && radioGroupContext.status === "warning",
+        [RadioGroup_module_scss_1.default.valid]: value === radioGroupContext.value && radioGroupContext.status === "valid",
+    }), [enabled, radioGroupContext, value]);
+    const item = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InnerRadioGroup.Item, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioOption, statusStyles), value: value, disabled: !enabled, id: id, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Indicator, { className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.indicator, statusStyles) }) }), (0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.label, statusStyles), children: label !== null && label !== void 0 ? label : value })] })), [enabled, id, label, statusStyles, value]);
     return ((0, jsx_runtime_1.jsx)("div", { className: RadioGroup_module_scss_1.default.radioOptionContainer, style: style, children: optionRenderer ? ((0, jsx_runtime_1.jsxs)("label", { className: RadioGroup_module_scss_1.default.optionLabel, children: [(0, jsx_runtime_1.jsx)("div", { className: RadioGroup_module_scss_1.default.itemContainer, children: item }), optionRenderer({
-                    $checked: value === validationContext.value,
+                    $checked: value === radioGroupContext.value,
                 })] })) : (item) }, id));
 };
 exports.RadioGroupOption = RadioGroupOption;

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

@@ -75,7 +75,6 @@ exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
         [`borderRadius-menu-${COMP}`]: "$borderRadius",
         [`borderWidth-menu-${COMP}`]: "1px",
         [`borderColor-menu-${COMP}`]: "$borderColor",
-        [`minHeight-Input`]: "39px",
         [`backgroundColor-${COMP}-badge`]: "$color-primary-500",
         [`fontSize-${COMP}-badge`]: "$fontSize-small",
         [`paddingHorizontal-${COMP}-badge`]: "$space-1",
@@ -91,6 +90,8 @@ exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
         [`backgroundColor-item-${COMP}`]: "$backgroundColor-dropdown-item",
         [`backgroundColor-item-${COMP}--hover`]: "$backgroundColor-dropdown-item--hover",
         [`backgroundColor-item-${COMP}--active`]: "$backgroundColor-dropdown-item--active",
+        // Default borderColor-Input--disabled is too light so the disabled component is barely visible
+        [`borderColor-${COMP}--disabled`]: "initial",
     },
 });
 exports.selectComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SelectMd, ({ node, state, updateState, extractValue, renderChild, lookupEventHandler, layoutCss, registerComponentApi, }) => {

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

@@ -47,14 +47,18 @@ exports.SwitchMd = (0, ComponentDefs_1.createMetadata)({
         [`backgroundColor-checked-${COMP}-warning`]: `$borderColor-${COMP}-warning`,
         [`borderColor-checked-${COMP}-success`]: `$borderColor-${COMP}-success`,
         [`backgroundColor-checked-${COMP}-success`]: `$borderColor-${COMP}-success`,
-        [`backgroundColor-${COMP}`]: "$backgroundColor-primary",
+        [`backgroundColor-${COMP}`]: "$color-surface-0",
         [`borderColor-${COMP}`]: "$color-surface-200",
         [`borderWidth-${COMP}`]: "1px",
-        [`backgroundColor-indicator-${COMP}`]: "$color-surface-200",
+        [`backgroundColor-indicator-${COMP}`]: "$color-surface-400",
+        [`backgroundColor-${COMP}-indicator--disabled`]: "$backgroundColor-primary",
         [`backgroundColor-indicator-checked-${COMP}`]: "$backgroundColor-primary",
         [`borderColor-checked-${COMP}`]: "$color-primary-500",
         [`backgroundColor-checked-${COMP}`]: "$color-primary-500",
         [`backgroundColor-${COMP}--disabled`]: "$color-surface-200",
+        dark: {
+            [`backgroundColor-indicator-${COMP}`]: "$color-surface-500",
+        }
     },
 });
 exports.switchComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SwitchMd, ({ node, extractValue, layoutCss, updateState, state, lookupEventHandler, registerComponentApi, }) => {

package/dist/scripts/src/components/Table/TableNative.js

@@ -106,6 +106,7 @@ exports.Table = (0, react_1.forwardRef)(({ data = exports.defaultProps.data, col
         visibleItems,
         rowsSelectable,
         enableMultiRowSelection,
+        rowDisabledPredicate,
         onSelectionDidChange,
     });
     // --- Create data with order information whenever the items in the table change
@@ -221,8 +222,11 @@ exports.Table = (0, react_1.forwardRef)(({ data = exports.defaultProps.data, col
                 }),
                 value: table.getIsAllRowsSelected(),
                 indeterminate: table.getIsSomeRowsSelected(),
-                onDidChange: (checked) => {
-                    checkAllRows(checked);
+                onDidChange: () => {
+                    const allSelected = table
+                        .getRowModel()
+                        .rows.every((row) => rowDisabledPredicate(row.original) || row.getIsSelected());
+                    checkAllRows(!allSelected);
                 } })) : null,
             cell: ({ row }) => ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { className: Table_module_scss_1.default.checkBoxWrapper,
                 value: row.getIsSelected(),

package/dist/scripts/src/components/Table/useRowSelection.js

@@ -7,7 +7,7 @@ const misc_1 = require("../../components-core/utils/misc");
 const constants_1 = require("../../components-core/constants");
 const hooks_1 = require("../../components-core/utils/hooks");
 const SelectionStoreNative_1 = require("../SelectionStore/SelectionStoreNative");
-function useRowSelection({ items = constants_1.EMPTY_ARRAY, visibleItems = items, rowsSelectable, enableMultiRowSelection, onSelectionDidChange, }) {
+function useRowSelection({ items = constants_1.EMPTY_ARRAY, visibleItems = items, rowsSelectable, enableMultiRowSelection, rowDisabledPredicate, onSelectionDidChange, }) {
     // --- The focused index in the row source (if there is any)
     const [focusedIndex, setFocusedIndex] = (0, react_1.useState)(-1);
     // --- The current selection interval
@@ -187,7 +187,11 @@ function useRowSelection({ items = constants_1.EMPTY_ARRAY, visibleItems = items
         if (!enableMultiRowSelection && checked) {
             return;
         }
-        setSelectedRowIds(checked ? items.map((item) => item[idKey]) : []);
+        setSelectedRowIds(checked
+            ? items
+                .filter((item) => (rowDisabledPredicate ? !rowDisabledPredicate(item) : true))
+                .map((item) => item[idKey])
+            : []);
     });
     /**
      * This operation creates a hash object that indicates the selected status of selected row IDs

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

@@ -64,7 +64,7 @@ exports.TextBoxMd = (0, ComponentDefs_1.createMetadata)({
         "borderColor-Input-error": "$borderColor-Input-default--error",
         "borderColor-Input-warning": "$borderColor-Input-default--warning",
         "borderColor-Input-success": "$borderColor-Input-default--success",
-        "color-placeholder-Input": "$textColor-subtitle",
+        "textColor-placeholder-Input": "$textColor-subtitle",
         "color-adornment-Input": "$textColor-subtitle",
         "outlineColor-Input--focus": "$outlineColor--focus",
         "outlineWidth-Input--focus": "$outlineWidth--focus",

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

@@ -40,6 +40,8 @@ exports.TreeDisplayMd = (0, ComponentDefs_1.createMetadata)({
         [`fontFamily-${COMP}`]: "$fontFamily-monospace",
         [`color-${COMP}`]: "$textColor-primary",
         [`color-connect-${COMP}`]: "$color-surface-200",
+        [`boxShadow-${COMP}`]: "none",
+        [`border-${COMP}`]: "0.5px solid $borderColor",
     },
 });
 exports.treeDisplayComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TreeDisplayMd, ({ node, extractValue, renderChild, layoutCss }) => {

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

@@ -10,6 +10,9 @@ exports.FragmentMd = (0, ComponentDefs_1.createMetadata)({
     description: "`Fragment` provides conditional rendering. You can use `when=` on any " +
         "component to render it conditionally, use `Fragment` to apply `when` to a group of components.",
     opaque: true,
+    props: {
+    // Note: 'when' is a universal property defined in ComponentDefCore, no need to redefine it here
+    },
 });
 exports.fragmentComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.FragmentMd, ({ node, extractValue, renderChild, layoutContext }) => {
     return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderChild(node.children, layoutContext) }, extractValue(node.uid)));

package/dist/scripts/src/components-core/appContext/date-functions.js

@@ -20,4 +20,5 @@ exports.dateFunctions = {
     differenceInMinutes: date_fns_1.differenceInMinutes,
     isSameDay: date_fns_1.isSameDay,
     isThisYear: date_fns_1.isThisYear,
+    formatHumanElapsedTime: date_utils_1.formatHumanElapsedTime
 };

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

@@ -48,7 +48,7 @@ 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, apiWorker, useHashBasedRouting, }) {
+function ApiInterceptorProvider({ interceptor, children, apiWorker, useHashBasedRouting, waitForApiInterceptor = false }) {
     const [initialized, setInitialized] = (0, react_1.useState)(!interceptor);
     const [interceptorWorker, setInterceptorWorker] = (0, react_1.useState)(null);
     // --- Whenever the interceptor changes, update the provider accordingly
@@ -94,5 +94,5 @@ function ApiInterceptorProvider({ interceptor, children, apiWorker, useHashBased
             isMocked: (url) => interceptor !== undefined && !!process.env.VITE_MOCK_ENABLED,
         };
     }, [interceptorWorker, initialized, interceptor]);
-    return ((0, jsx_runtime_1.jsx)(useApiInterceptorContext_1.ApiInterceptorContext.Provider, { value: contextValue, children: children }));
+    return ((0, jsx_runtime_1.jsx)(useApiInterceptorContext_1.ApiInterceptorContext.Provider, { value: contextValue, children: waitForApiInterceptor && !initialized ? null : children }));
 }

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

@@ -27,7 +27,7 @@ exports.queryClient = new react_query_1.QueryClient({
  * from either code-behind files or inlined markup expressions) and executes
  * the app accordingly.
  */
-function AppRoot({ apiInterceptor, contributes, node, decorateComponentsWithTestId, debugEnabled, defaultTheme, defaultTone, resources, globalProps, standalone, trackContainerHeight, routerBaseName, previewMode, resourceMap, sources, extensionManager, children, projectCompilation, }) {
+function AppRoot({ apiInterceptor, contributes, node, decorateComponentsWithTestId, debugEnabled, defaultTheme, defaultTone, resources, globalProps, standalone, trackContainerHeight, routerBaseName, previewMode, resourceMap, sources, extensionManager, children, projectCompilation, isNested = false, }) {
     // --- Make sure, the root node is wrapped in a `Theme` component. Also,
     // --- the root node must be wrapped in a `Container` component managing
     // --- the app's top-level state.
@@ -54,9 +54,11 @@ function AppRoot({ apiInterceptor, contributes, node, decorateComponentsWithTest
     }
     // --- Start with an error-free state
     (0, reportEngineError_1.resetErrors)();
+    // --- Add isNested to global props so it can be accessed throughout the app
+    const enhancedGlobalProps = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, globalProps), { isNested })), [globalProps, isNested]);
     // --- Render the app providing a component registry (in which the engine finds a
     // --- component definition by its name). Ensure the app has a context for debugging.
-    return ((0, jsx_runtime_1.jsx)(ComponentProvider_1.ComponentProvider, { contributes: contributes, extensionManager: extensionManager, children: (0, jsx_runtime_1.jsx)(DebugViewProvider_1.DebugViewProvider, { debugConfig: globalProps === null || globalProps === void 0 ? void 0 : globalProps.debug, children: (0, jsx_runtime_1.jsx)(AppWrapper_1.AppWrapper, { projectCompilation: projectCompilation, resourceMap: resourceMap, apiInterceptor: apiInterceptor, node: rootNode, contributes: contributes, resources: resources, routerBaseName: routerBaseName, decorateComponentsWithTestId: decorateComponentsWithTestId, debugEnabled: debugEnabled, defaultTheme: defaultTheme, defaultTone: defaultTone, globalProps: globalProps, standalone: standalone, trackContainerHeight: trackContainerHeight, previewMode: previewMode, sources: sources, children: children }) }) }));
+    return ((0, jsx_runtime_1.jsx)(ComponentProvider_1.ComponentProvider, { contributes: contributes, extensionManager: extensionManager, children: (0, jsx_runtime_1.jsx)(DebugViewProvider_1.DebugViewProvider, { debugConfig: globalProps === null || globalProps === void 0 ? void 0 : globalProps.debug, children: (0, jsx_runtime_1.jsx)(AppWrapper_1.AppWrapper, { projectCompilation: projectCompilation, resourceMap: resourceMap, apiInterceptor: apiInterceptor, node: rootNode, contributes: contributes, resources: resources, routerBaseName: routerBaseName, decorateComponentsWithTestId: decorateComponentsWithTestId, debugEnabled: debugEnabled, defaultTheme: defaultTheme, defaultTone: defaultTone, globalProps: enhancedGlobalProps, standalone: standalone, trackContainerHeight: trackContainerHeight, previewMode: previewMode, sources: sources, children: children }) }) }));
 }
 /**
  *

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

@@ -37,6 +37,7 @@ const ParameterParser_1 = require("../script-runner/ParameterParser");
 const eval_tree_sync_1 = require("../script-runner/eval-tree-sync");
 const extractParam_1 = require("../utils/extractParam");
 const misc_1 = require("../utils/misc");
+const AppLayoutContext_1 = require("../../components/App/AppLayoutContext");
 // A React component that wraps a view container into an error boundary
 // (it's a named function inside the memo, this way it will be visible with that name in the react devtools)
 exports.StateContainer = (0, react_1.memo)((0, react_1.forwardRef)(function StateContainer(_a, ref) {
@@ -145,6 +146,8 @@ exports.StateContainer = (0, react_1.memo)((0, react_1.forwardRef)(function Stat
 const useRoutingParams = () => {
     const [queryParams] = (0, react_2.useSearchParams)();
     const routeParams = (0, react_2.useParams)();
+    const location = (0, react_2.useLocation)();
+    const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
     const queryParamsMap = (0, react_1.useMemo)(() => {
         const result = {};
         for (const [key, value] of Array.from(queryParams.entries())) {
@@ -153,9 +156,12 @@ const useRoutingParams = () => {
         return result;
     }, [queryParams]);
     return (0, react_1.useMemo)(() => {
+        var _a;
         return {
+            $pathname: location.pathname,
             $routeParams: routeParams,
             $queryParams: queryParamsMap,
+            $linkInfo: ((_a = appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.linkMap) === null || _a === void 0 ? void 0 : _a.get(location.pathname)) || {},
         };
     }, [queryParamsMap, routeParams]);
 };

package/dist/scripts/src/components-core/theming/themes/root.js

@@ -208,6 +208,9 @@ exports.RootThemeDefinition = {
         "textColor-secondary": $colorSurface600,
         // --- Input is an abstract component, so we define its default theme variables here
         "backgroundColor-Input-default": $colorSurface0,
+        "backgroundColor-Input-success": $colorSurface0,
+        "backgroundColor-Input-warning": $colorSurface0,
+        "backgroundColor-Input-error": $colorSurface0,
         "borderColor-Input-default": $colorSurface200,
         "borderColor-Input-default--hover": $colorSurface600,
         "borderColor-Input-default--focus": $colorSurface600,

package/dist/scripts/src/components-core/utils/date-utils.js

@@ -13,6 +13,7 @@ exports.smartFormatDate = smartFormatDate;
 exports.isDateToday = isDateToday;
 exports.isDateYesterday = isDateYesterday;
 exports.isDateTomorrow = isDateTomorrow;
+exports.formatHumanElapsedTime = formatHumanElapsedTime;
 const date_fns_1 = require("date-fns");
 const misc_1 = require("../utils/misc");
 function isoDateString(date) {
@@ -76,3 +77,62 @@ function isDateYesterday(date) {
 function isDateTomorrow(date) {
     return (0, date_fns_1.isTomorrow)(new Date(date));
 }
+/**
+ * Formats a date into a human-readable elapsed time string.
+ * Returns strings like "now", "12 seconds ago", "3 hours ago", "today", "yesterday", "3 weeks ago", etc.
+ *
+ * @param date The date to format
+ * @returns A human-readable elapsed time string
+ */
+function formatHumanElapsedTime(date) {
+    const now = new Date();
+    const inputDate = new Date(date);
+    // Calculate time difference in milliseconds
+    const diffMs = now.getTime() - inputDate.getTime();
+    // Handle future dates
+    if (diffMs < 0) {
+        return formatDate(date);
+    }
+    // Convert to seconds, minutes, hours, days, weeks
+    const diffSeconds = Math.floor(diffMs / 1000);
+    const diffMinutes = Math.floor(diffSeconds / 60);
+    const diffHours = Math.floor(diffMinutes / 60);
+    const diffDays = Math.floor(diffHours / 24);
+    const diffWeeks = Math.floor(diffDays / 7);
+    const diffMonths = Math.floor(diffDays / 30);
+    const diffYears = Math.floor(diffDays / 365);
+    // Just now (within 10 seconds)
+    if (diffSeconds < 10) {
+        return "now";
+    }
+    // Seconds ago (up to 1 minute)
+    if (diffSeconds < 60) {
+        return `${diffSeconds} second${diffSeconds === 1 ? "" : "s"} ago`;
+    }
+    // Minutes ago (up to 1 hour)
+    if (diffMinutes < 60) {
+        return `${diffMinutes} minute${diffMinutes === 1 ? "" : "s"} ago`;
+    }
+    // Hours ago (up to today)
+    if ((0, date_fns_1.isToday)(inputDate)) {
+        return `${diffHours} hour${diffHours === 1 ? "" : "s"} ago`;
+    }
+    // Yesterday
+    if ((0, date_fns_1.isYesterday)(inputDate)) {
+        return "yesterday";
+    }
+    // Days ago (up to 1 week)
+    if (diffDays < 7) {
+        return `${diffDays} day${diffDays === 1 ? "" : "s"} ago`;
+    }
+    // Weeks ago (up to 4 weeks / 1 month)
+    if (diffWeeks < 4) {
+        return `${diffWeeks} week${diffWeeks === 1 ? "" : "s"} ago`;
+    }
+    // Months ago (up to 12 months / 1 year)
+    if (diffMonths < 12) {
+        return `${diffMonths} month${diffMonths === 1 ? "" : "s"} ago`;
+    }
+    // Years ago
+    return `${diffYears} year${diffYears === 1 ? "" : "s"} ago`;
+}