xmlui 0.8.6 → 0.9.0

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

@@ -49,18 +49,10 @@ exports.RadioGroupMd = (0, ComponentDefs_1.createMetadata)({
         [`textColor-${RGOption}-error`]: `$borderColor-${RGOption}-error`,
         [`textColor-${RGOption}-warning`]: `$borderColor-${RGOption}-warning`,
         [`textColor-${RGOption}-success`]: `$borderColor-${RGOption}-success`,
-        light: {
-            [`backgroundColor-checked-${RGOption}-default`]: "$color-primary-500",
-            [`borderColor-${RGOption}-default`]: "$color-surface-500",
-            [`borderColor-${RGOption}-default--hover`]: "$color-surface-700",
-            [`borderColor-${RGOption}-default--active`]: "$color-primary-500",
-        },
-        dark: {
-            [`backgroundColor-checked-${RGOption}-default`]: "$color-primary-500",
-            [`borderColor-${RGOption}-default`]: "$color-surface-500",
-            [`borderColor-${RGOption}-default--hover`]: "$color-surface-300",
-            [`borderColor-${RGOption}-default--active`]: "$color-primary-400",
-        },
+        [`backgroundColor-checked-${RGOption}-default`]: "$color-primary-500",
+        [`borderColor-${RGOption}-default`]: "$color-surface-500",
+        [`borderColor-${RGOption}-default--hover`]: "$color-surface-700",
+        [`borderColor-${RGOption}-default--active`]: "$color-primary-500",
     },
 });
 exports.radioGroupRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.RadioGroupMd, ({ node, extractValue, layoutCss, state, updateState, lookupEventHandler, renderChild, registerComponentApi, }) => {

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

@@ -54,7 +54,7 @@ exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(Select_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`backgroundColor-menu-${COMP}`]: "$backgroundColor-primary",
+        [`backgroundColor-menu-${COMP}`]: "$color-surface-raised",
         [`boxShadow-menu-${COMP}`]: "$boxShadow-md",
         [`borderRadius-menu-${COMP}`]: "$borderRadius",
         [`borderWidth-menu-${COMP}`]: "1px",
@@ -69,18 +69,10 @@ exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
         [`paddingVertical-${COMP}-badge`]: "$space-1",
         [`opacity-text-item-${COMP}--disabled`]: "0.5",
         [`opacity-${COMP}--disabled`]: "0.5",
-        light: {
-            [`backgroundColor-${COMP}-badge--hover`]: "$color-primary-400",
-            [`backgroundColor-${COMP}-badge--active`]: "$color-primary-500",
-            [`textColor-item-${COMP}--disabled`]: "$color-surface-200",
-            [`textColor-${COMP}-badge`]: "$color-surface-50",
-        },
-        dark: {
-            [`backgroundColor-${COMP}-badge--hover`]: "$color-primary-600",
-            [`backgroundColor-${COMP}-badge--active`]: "$color-primary-500",
-            [`textColor-${COMP}-badge`]: "$color-surface-50",
-            [`textColor-item-${COMP}--disabled`]: "$color-surface-800",
-        },
+        [`backgroundColor-${COMP}-badge--hover`]: "$color-primary-400",
+        [`backgroundColor-${COMP}-badge--active`]: "$color-primary-500",
+        [`textColor-item-${COMP}--disabled`]: "$color-surface-200",
+        [`textColor-${COMP}-badge`]: "$color-surface-50",
     },
 });
 exports.selectComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SelectMd, ({ node, state, updateState, extractValue, renderChild, lookupEventHandler, layoutCss, registerComponentApi, }) => {

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

@@ -182,9 +182,13 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
 exports.ComboboxOption = (0, react_1.forwardRef)(function Combobox(option, forwardedRef) {
     const id = (0, react_1.useId)();
     const { label, value, enabled = true, keywords } = option;
-    const { value: selectedValue, onChange, multi, optionLabelRenderer } = (0, SelectContext_1.useSelect)();
-    const selected = Array.isArray(selectedValue) && multi ? selectedValue.includes(value) : selectedValue === value;
-    return ((0, jsx_runtime_1.jsxs)(cmdk_1.CommandItem, { id: id, ref: forwardedRef, disabled: !enabled, value: value, className: Select_module_scss_1.default.multiComboboxOption, onSelect: () => {
+    const { value: selectedValue, onChange, multiSelect, optionLabelRenderer } = (0, SelectContext_1.useSelect)();
+    const selected = (0, react_1.useMemo)(() => {
+        return Array.isArray(selectedValue) && multiSelect
+            ? selectedValue.includes(value)
+            : selectedValue === value;
+    }, [selectedValue, value, multiSelect]);
+    return ((0, jsx_runtime_1.jsxs)(cmdk_1.CommandItem, { id: id, ref: forwardedRef, disabled: !enabled, value: `${value}`, className: Select_module_scss_1.default.multiComboboxOption, onSelect: () => {
             onChange(value);
         }, "data-state": selected ? "checked" : undefined, keywords: keywords, children: [optionLabelRenderer ? optionLabelRenderer({ label, value }) : label, selected && (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" })] }, id));
 });

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

@@ -53,14 +53,8 @@ exports.SliderMd = (0, ComponentDefs_1.createMetadata)({
         [`borderColor-thumb-${COMP}`]: "$color-surface-50",
         [`backgroundColor-thumb-${COMP}`]: "$color-primary",
         [`boxShadow-thumb-${COMP}`]: "$boxShadow-md",
-        light: {
-            [`backgroundColor-track-${COMP}--disabled`]: "$color-surface-300",
-            [`backgroundColor-range-${COMP}--disabled`]: "$color-surface-400",
-        },
-        dark: {
-            [`backgroundColor-track-${COMP}--disabled`]: "$color-surface-600",
-            [`backgroundColor-range-${COMP}--disabled`]: "$color-surface-800",
-        },
+        [`backgroundColor-track-${COMP}--disabled`]: "$color-surface-300",
+        [`backgroundColor-range-${COMP}--disabled`]: "$color-surface-400",
     },
 });
 exports.sliderComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SliderMd, ({ node, extractValue, lookupEventHandler, layoutCss, updateState, state, registerComponentApi, }) => {

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

@@ -31,12 +31,7 @@ exports.SpinnerMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         [`size-${COMP}`]: "$space-10",
         [`thickness-${COMP}`]: "$space-0_5",
-        light: {
-            [`borderColor-${COMP}`]: "$color-surface-400",
-        },
-        dark: {
-            [`borderColor-${COMP}`]: "$color-surface-600",
-        },
+        [`borderColor-${COMP}`]: "$color-surface-400",
     },
 });
 exports.spinnerComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SpinnerMd, ({ node, layoutCss, extractValue }) => {

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

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.subNavPanelRenderer = exports.NavPanelMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SubNavPanel_module_scss_1 = __importDefault(require("./SubNavPanel.module.scss"));
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const SubNavPanelNative_1 = require("./SubNavPanelNative");
+const COMP = "SubNavPanel";
+exports.NavPanelMd = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    props: {},
+    themeVars: (0, themeVars_1.parseScssVar)(SubNavPanel_module_scss_1.default.themeVars),
+    defaultThemeVars: {},
+});
+exports.subNavPanelRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NavPanelMd, ({ node, renderChild, layoutCss, layoutContext }) => {
+    return ((0, jsx_runtime_1.jsx)(SubNavPanelNative_1.SubNavPanel, { children: renderChild(node.children) }));
+});

package/dist/scripts/src/components/SubNavPanel/SubNavPanelNative.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubNavPanel = SubNavPanel;
+const react_dom_1 = require("react-dom");
+const AppLayoutContext_1 = require("../App/AppLayoutContext");
+function SubNavPanel(props) {
+    const { subNavPanelSlot } = (0, AppLayoutContext_1.useAppLayoutContext)();
+    return subNavPanelSlot ? (0, react_dom_1.createPortal)(props.children, subNavPanelSlot) : null;
+}

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

@@ -48,22 +48,12 @@ 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`,
-        light: {
-            [`backgroundColor-${COMP}`]: "$color-surface-400",
-            [`borderColor-${COMP}`]: "$color-surface-400",
-            [`backgroundColor-indicator-${COMP}`]: "$backgroundColor-primary",
-            [`borderColor-checked-${COMP}`]: "$color-primary-500",
-            [`backgroundColor-checked-${COMP}`]: "$color-primary-500",
-            [`backgroundColor-${COMP}--disabled`]: "$color-surface-200",
-        },
-        dark: {
-            [`backgroundColor-${COMP}`]: "$color-surface-500",
-            [`borderColor-${COMP}`]: "$color-surface-500",
-            [`backgroundColor-indicator-${COMP}`]: "$backgroundColor-primary",
-            [`borderColor-checked-${COMP}`]: "$color-primary-400",
-            [`backgroundColor-checked-${COMP}`]: "$color-primary-400",
-            [`backgroundColor-${COMP}--disabled`]: "$color-surface-800",
-        },
+        [`backgroundColor-${COMP}`]: "$color-surface-400",
+        [`borderColor-${COMP}`]: "$color-surface-400",
+        [`backgroundColor-indicator-${COMP}`]: "$backgroundColor-primary",
+        [`borderColor-checked-${COMP}`]: "$color-primary-500",
+        [`backgroundColor-checked-${COMP}`]: "$color-primary-500",
+        [`backgroundColor-${COMP}--disabled`]: "$color-surface-200",
     },
 });
 exports.switchComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SwitchMd, ({ node, extractValue, layoutCss, updateState, state, lookupEventHandler, registerComponentApi, }) => {

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

@@ -110,27 +110,18 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
         [`fontWeight-heading-${COMP}`]: "$fontWeight-bold",
         [`textTransform-heading-${COMP}`]: "uppercase",
         [`fontSize-row-${COMP}`]: "$fontSize-small",
-        [`backgroundColor-${COMP}`]: "$backgroundColor",
-        [`backgroundColor-row-${COMP}`]: "inherit",
+        // [`backgroundColor-${COMP}`]: "transparent",
+        // [`backgroundColor-row-${COMP}`]: "inherit",
         [`backgroundColor-selected-${COMP}--hover`]: `$backgroundColor-row-${COMP}--hover`,
         [`backgroundColor-pagination-${COMP}`]: `$backgroundColor-${COMP}`,
         [`outlineColor-heading-${COMP}--focus`]: "$outlineColor--focus",
         [`textColor-pagination-${COMP}`]: "$color-secondary",
-        light: {
-            [`backgroundColor-row-${COMP}--hover`]: "$color-primary-50",
-            [`backgroundColor-selected-${COMP}`]: "$color-primary-100",
-            [`backgroundColor-heading-${COMP}--hover`]: "$color-surface-200",
-            [`backgroundColor-heading-${COMP}--active`]: "$color-surface-300",
-            [`backgroundColor-heading-${COMP}`]: "$color-surface-100",
-            [`textColor-heading-${COMP}`]: "$color-surface-500",
-        },
-        dark: {
-            [`backgroundColor-row-${COMP}--hover`]: "$color-primary-900",
-            [`backgroundColor-selected-${COMP}`]: "$color-primary-800",
-            [`backgroundColor-heading-${COMP}--hover`]: "$color-surface-800",
-            [`backgroundColor-heading-${COMP}`]: "$color-surface-950",
-            [`backgroundColor-heading-${COMP}--active`]: "$color-surface-700",
-        },
+        [`backgroundColor-row-${COMP}--hover`]: "$color-primary-50",
+        [`backgroundColor-selected-${COMP}`]: "$color-primary-100",
+        [`backgroundColor-heading-${COMP}--hover`]: "$color-surface-200",
+        [`backgroundColor-heading-${COMP}--active`]: "$color-surface-300",
+        [`backgroundColor-heading-${COMP}`]: "$color-surface-100",
+        [`textColor-heading-${COMP}`]: "$color-surface-500",
     },
 });
 const TableWithColumns = (0, react_1.forwardRef)(({ extractValue, node, renderChild, lookupEventHandler, lookupSyncCallback, layoutCss, registerComponentApi, }, ref) => {

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

@@ -65,18 +65,10 @@ exports.TableOfContentsMd = (0, ComponentDefs_1.createMetadata)({
         [`textTransform-${COMP}Item`]: "none",
         [`verticalAlign-${COMP}Item`]: "baseline",
         [`letterSpacing-${COMP}Item`]: "0",
-        light: {
-            [`color-${COMP}Item`]: "$textColor-primary",
-            [`borderColor-${COMP}Item`]: "$borderColor",
-            [`borderColor-${COMP}Item--active`]: "$color-primary-500",
-            [`color-${COMP}Item--active`]: "$color-primary-500",
-        },
-        dark: {
-            [`color-${COMP}Item`]: "$textColor-primary",
-            [`borderColor-${COMP}Item`]: "$borderColor",
-            [`borderColor-${COMP}Item--active`]: "$color-primary-500",
-            [`color-${COMP}Item--active`]: "$textColor-secondary",
-        },
+        [`color-${COMP}Item`]: "$textColor-primary",
+        [`borderColor-${COMP}Item`]: "$borderColor",
+        [`borderColor-${COMP}Item--active`]: "$color-primary-500",
+        [`color-${COMP}Item--active`]: "$color-primary-500",
     },
 });
 exports.tableOfContentsRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TableOfContentsMd, ({ layoutCss, node, extractValue }) => {

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

@@ -40,16 +40,9 @@ exports.TabsMd = (0, ComponentDefs_1.createMetadata)({
         [`borderColor-active-${COMP}`]: "$color-primary",
         [`borderWidth-${COMP}`]: "2px",
         [`backgroundColor-trigger-${COMP}`]: "$backgroundColor-primary",
-        light: {
-            [`backgroundColor-trigger-${COMP}--hover`]: "$color-primary-50",
-            [`backgroundColor-list-${COMP}`]: "$color-primary-50",
-            [`textColor-trigger-${COMP}`]: "$color-primary-100",
-        },
-        dark: {
-            [`backgroundColor-trigger-${COMP}--hover`]: "$color-primary-800",
-            [`backgroundColor-list-${COMP}`]: "$color-primary-800",
-            [`textColor-trigger-${COMP}`]: "$color-primary-100",
-        },
+        [`backgroundColor-trigger-${COMP}--hover`]: "$color-primary-50",
+        [`backgroundColor-list-${COMP}`]: "$color-primary-50",
+        [`textColor-trigger-${COMP}`]: "$color-primary-100",
     },
 });
 exports.tabsComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TabsMd, ({ extractValue, node, renderChild, layoutCss, registerComponentApi }) => {

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

@@ -100,30 +100,16 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         [`marginBottom-${COMP}-tableheading`]: "$space-4",
         [`paddingHorizontal-${COMP}-tableheading`]: "$space-1",
         [`fontWeight-${COMP}-tableheading`]: "$fontWeight-bold",
-        light: {
-            [`backgroundColor-${COMP}-code`]: "$color-surface-100",
-            [`borderColor-${COMP}-code`]: "$color-surface-200",
-            [`backgroundColor-${COMP}-keyboard`]: "$color-surface-200",
-            [`borderColor-${COMP}-keyboard`]: "$color-surface-300",
-            [`backgroundColor-${COMP}-marked`]: "yellow",
-            [`color-${COMP}-placeholder`]: "$color-surface-500",
-            [`backgroundColor-${COMP}-codefence`]: "$color-primary-100",
-            [`color-${COMP}-codefence`]: "$color-surface-900",
-            [`color-${COMP}-subheading`]: "$textColor-secondary",
-            [`color-${COMP}-secondary`]: "$textColor-secondary",
-        },
-        dark: {
-            [`backgroundColor-${COMP}-code`]: "$color-surface-800",
-            [`borderColor-${COMP}-code`]: "$color-surface-700",
-            [`backgroundColor-${COMP}-keyboard`]: "$color-surface-800",
-            [`borderColor-${COMP}-keyboard`]: "$color-surface-700",
-            [`backgroundColor-${COMP}-marked`]: "orange",
-            [`color-${COMP}-placeholder`]: "$color-surface-500",
-            [`backgroundColor-${COMP}-codefence`]: "$color-primary-800",
-            [`color-${COMP}-codefence`]: "$color-surface-200",
-            [`color-${COMP}-subheading`]: "$textColor-secondary",
-            [`color-${COMP}-secondary`]: "$textColor-secondary",
-        },
+        [`backgroundColor-${COMP}-code`]: "$color-surface-100",
+        [`borderColor-${COMP}-code`]: "$color-surface-200",
+        [`backgroundColor-${COMP}-keyboard`]: "$color-surface-200",
+        [`borderColor-${COMP}-keyboard`]: "$color-surface-300",
+        [`backgroundColor-${COMP}-marked`]: "yellow",
+        [`color-${COMP}-placeholder`]: "$color-surface-500",
+        [`backgroundColor-${COMP}-codefence`]: "$color-primary-100",
+        [`color-${COMP}-codefence`]: "$color-surface-900",
+        [`color-${COMP}-subheading`]: "$textColor-secondary",
+        [`color-${COMP}-secondary`]: "$textColor-secondary",
     },
 });
 exports.textComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TextMd, ({ node, extractValue, layoutCss, renderChild }) => {

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

@@ -96,7 +96,7 @@ exports.TextBox = (0, react_1.forwardRef)(function TextBox({ id, type = "text",
             setValue,
         });
     }, [focus, registerComponentApi, setValue]);
-    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, ref: ref, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(TextBox_module_scss_1.default.inputRoot, {
+    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, style: style, ref: ref, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(TextBox_module_scss_1.default.inputRoot, {
                 [TextBox_module_scss_1.default.disabled]: !enabled,
                 [TextBox_module_scss_1.default.readOnly]: readOnly,
                 [TextBox_module_scss_1.default.error]: validationStatus === "error",

package/dist/scripts/src/components/Theme/ThemeNative.js

@@ -122,7 +122,7 @@ function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 50
     }, [devToolsEnabled, devToolsSide, devToolsSize]);
     if (isRoot) {
         const faviconUrl = getResourceUrl("resource:favicon") || "/resources/favicon.ico";
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_helmet_async_1.Helmet, { children: [!!faviconUrl && (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/svg+xml", href: faviconUrl }), fontLinks === null || fontLinks === void 0 ? void 0 : fontLinks.map((fontLink) => (0, jsx_runtime_1.jsx)("link", { href: fontLink, rel: "stylesheet" }, fontLink))] }), (0, jsx_runtime_1.jsx)("style", { children: `.${className} {${css}}` }), (0, jsx_runtime_1.jsxs)("div", { style: inspectStyle, id: "_ui-engine-theme-root", className: (0, classnames_1.default)(Theme_module_scss_1.default.baseRootComponent, className), ref: (el) => {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_helmet_async_1.Helmet, { children: [!!faviconUrl && (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/svg+xml", href: faviconUrl }), fontLinks === null || fontLinks === void 0 ? void 0 : fontLinks.map((fontLink) => (0, jsx_runtime_1.jsx)("link", { href: fontLink, rel: "stylesheet" }, fontLink))] }), (0, jsx_runtime_1.jsx)("style", { type: "text/css", children: `:root {${css}}` }), (0, jsx_runtime_1.jsxs)("div", { style: inspectStyle, id: "_ui-engine-theme-root", className: (0, classnames_1.default)(Theme_module_scss_1.default.baseRootComponent), ref: (el) => {
                         if (el) {
                             setRoot(el);
                         }

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

@@ -38,9 +38,9 @@ function ValidationSummary({ fieldValidationResults = constants_1.EMPTY_OBJECT,
         });
         return ret;
     }, [fieldValidationResults, generalValidationResults]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: animateContainerRef, className: ValidationSummary_module_scss_1.default.summaryContainer, children: [(0, jsx_runtime_1.jsx)(ValidationDisplay, { issues: groupedInvalidResults.warning, severity: "warning", heading: "Validation warnings" }), (0, jsx_runtime_1.jsx)(ValidationDisplay, { issues: groupedInvalidResults.error, severity: "error", heading: "Validation errors" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: animateContainerRef, className: ValidationSummary_module_scss_1.default.summaryContainer, "data-validation-summary": true, children: [(0, jsx_runtime_1.jsx)(ValidationDisplay, { issues: groupedInvalidResults.warning, severity: "warning", heading: "Validation warnings" }), (0, jsx_runtime_1.jsx)(ValidationDisplay, { issues: groupedInvalidResults.error, severity: "error", heading: "Validation errors" })] }));
 }
-const ValidationDisplay = ({ heading, issues = constants_1.EMPTY_ARRAY, severity = "error", onClose }) => {
+const ValidationDisplay = ({ heading, issues = constants_1.EMPTY_ARRAY, severity = "error", onClose, }) => {
     const [animateContainerRef] = (0, react_2.useAutoAnimate)({ duration: 100 });
     if (issues.length === 0) {
         return null;
@@ -50,7 +50,7 @@ const ValidationDisplay = ({ heading, issues = constants_1.EMPTY_ARRAY, severity
             [ValidationSummary_module_scss_1.default.info]: severity === "info",
             [ValidationSummary_module_scss_1.default.warning]: severity === "warning",
             [ValidationSummary_module_scss_1.default.error]: severity === "error",
-        }), style: { paddingTop: !onClose ? "0.5rem" : undefined }, children: [(0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", verticalAlignment: "center", style: { gap: "0.5rem" }, children: [(0, jsx_runtime_1.jsx)(IconNative_1.Icon, { className: ValidationSummary_module_scss_1.default.heading, name: severity, size: "md" }), (0, jsx_runtime_1.jsx)("div", { className: ValidationSummary_module_scss_1.default.heading, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { children: heading }) }), !!onClose && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SpaceFillerNative_1.SpaceFiller, {}), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: onClose, variant: "ghost", themeColor: "secondary", icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "close", size: "sm" }), orientation: "vertical" })] }))] }), (0, jsx_runtime_1.jsx)("ul", { ref: animateContainerRef, children: issues.map((issue, i) => ((0, jsx_runtime_1.jsx)(ValidationEntry, { issue: issue }, i))) })] }));
+        }), style: { paddingTop: !onClose ? "0.5rem" : undefined }, "data-validation-display-severity": severity, children: [(0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", verticalAlignment: "center", style: { gap: "0.5rem" }, children: [(0, jsx_runtime_1.jsx)(IconNative_1.Icon, { className: ValidationSummary_module_scss_1.default.heading, name: severity, size: "md" }), (0, jsx_runtime_1.jsx)("div", { className: ValidationSummary_module_scss_1.default.heading, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { children: heading }) }), !!onClose && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SpaceFillerNative_1.SpaceFiller, {}), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: onClose, variant: "ghost", themeColor: "secondary", icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "close", size: "sm" }), orientation: "vertical" })] }))] }), (0, jsx_runtime_1.jsx)("ul", { ref: animateContainerRef, children: issues.map((issue, i) => ((0, jsx_runtime_1.jsx)(ValidationEntry, { issue: issue }, i))) })] }));
 };
 // --- ValidationEntry
 const ValidationEntry = ({ issue }) => {

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

@@ -52,6 +52,7 @@ const bi_1 = require("react-icons/bi");
 const DropdownMenu = __importStar(require("@radix-ui/react-dropdown-menu"));
 const all_1 = require("react-icons/all");
 const hi2_1 = require("react-icons/hi2");
+const IconNative_1 = __importDefault(require("../components/Icon/IconNative"));
 const DevTools = ({ setIsOpen, node }) => {
     var _a;
     const [side, setSide] = (0, react_2.useState)("bottom");
@@ -152,12 +153,12 @@ const DevTools = ({ setIsOpen, node }) => {
                 height: ref.offsetHeight,
             });
             setPosition(position);
-        }, bounds: "window", children: (0, jsx_runtime_1.jsxs)(react_tabs_1.Root, { defaultValue: "code", className: DevTools_module_scss_1.default.tabs, style: { width: "100%", height: "100%" }, children: [(0, jsx_runtime_1.jsxs)(react_tabs_1.List, { className: DevTools_module_scss_1.default.list, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(react_tabs_1.Trigger, { value: "code", children: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", size: "xs", children: "Code" }) }), (0, jsx_runtime_1.jsx)(react_tabs_1.Trigger, { value: "console", children: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", size: "xs", children: "Console" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: DevTools_module_scss_1.default.actions, children: [(0, jsx_runtime_1.jsxs)(DropdownMenu.Root, { children: [(0, jsx_runtime_1.jsx)(DropdownMenu.Trigger, { children: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", size: "xs", children: (0, jsx_runtime_1.jsx)(all_1.HiOutlineDotsVertical, { color: "currentColor" }) }) }), (0, jsx_runtime_1.jsx)(DropdownMenu.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(DropdownMenu.Content, { className: DevTools_module_scss_1.default.menu, children: (0, jsx_runtime_1.jsxs)(DropdownMenu.Item, { className: DevTools_module_scss_1.default.menuItem, children: ["Dock side", (0, jsx_runtime_1.jsxs)("div", { className: DevTools_module_scss_1.default.sideButtons, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { style: { padding: 8 }, onClick: () => {
+        }, bounds: "window", children: (0, jsx_runtime_1.jsxs)(react_tabs_1.Root, { defaultValue: "code", className: DevTools_module_scss_1.default.tabs, style: { width: "100%", height: "100%" }, children: [(0, jsx_runtime_1.jsxs)(react_tabs_1.List, { className: DevTools_module_scss_1.default.list, children: [(0, jsx_runtime_1.jsxs)("div", { className: DevTools_module_scss_1.default.tabItems, children: [(0, jsx_runtime_1.jsx)(react_tabs_1.Trigger, { value: "code", children: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", size: "sm", children: "Code" }) }), (0, jsx_runtime_1.jsx)(react_tabs_1.Trigger, { value: "console", children: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", size: "sm", children: "Console" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: DevTools_module_scss_1.default.actions, children: [(0, jsx_runtime_1.jsxs)(DropdownMenu.Root, { children: [(0, jsx_runtime_1.jsx)(DropdownMenu.Trigger, { children: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", size: "xs", children: (0, jsx_runtime_1.jsx)(all_1.HiOutlineDotsVertical, { color: "currentColor" }) }) }), (0, jsx_runtime_1.jsx)(DropdownMenu.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(DropdownMenu.Content, { className: DevTools_module_scss_1.default.menu, children: (0, jsx_runtime_1.jsxs)(DropdownMenu.Item, { className: DevTools_module_scss_1.default.menuItem, children: ["Dock side", (0, jsx_runtime_1.jsxs)("div", { className: DevTools_module_scss_1.default.sideButtons, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { style: { padding: 8 }, onClick: () => {
                                                                         setSide("left");
-                                                                    }, variant: "ghost", children: (0, jsx_runtime_1.jsx)(bi_1.BiDockLeft, { color: "currentColor" }) }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { style: { padding: 8 }, onClick: () => {
+                                                                    }, variant: "ghost", children: (0, jsx_runtime_1.jsx)(bi_1.BiDockLeft, { color: "currentColor", size: 16 }) }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { style: { padding: 8 }, onClick: () => {
                                                                         setSide("bottom");
-                                                                    }, variant: "ghost", children: (0, jsx_runtime_1.jsx)(bi_1.BiDockBottom, { color: "currentColor" }) }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { style: { padding: 8 }, onClick: () => {
+                                                                    }, variant: "ghost", children: (0, jsx_runtime_1.jsx)(bi_1.BiDockBottom, { color: "currentColor", size: 16 }) }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { style: { padding: 8 }, onClick: () => {
                                                                         setSide("right");
-                                                                    }, variant: "ghost", children: (0, jsx_runtime_1.jsx)(bi_1.BiDockRight, { color: "currentColor" }) })] })] }) }) })] }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => setIsOpen(false), size: "xs", variant: "ghost", children: "Close" })] })] }), (0, jsx_runtime_1.jsxs)(react_tabs_1.Content, { value: "code", className: DevTools_module_scss_1.default.content, children: [(0, jsx_runtime_1.jsx)(XmluiCodeHighlighter_1.XmluiCodeHighlighter, { value: value }), (0, jsx_runtime_1.jsx)("div", { className: DevTools_module_scss_1.default.copyButton, children: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: copyToClipboard, variant: "solid", themeColor: "secondary", style: { padding: 8 }, size: "sm", children: copied ? ((0, jsx_runtime_1.jsx)(hi2_1.HiOutlineClipboardDocumentCheck, { size: 16 })) : ((0, jsx_runtime_1.jsx)(hi2_1.HiOutlineClipboardDocument, { size: 16 })) }) })] }), (0, jsx_runtime_1.jsx)(react_tabs_1.Content, { value: "console", className: DevTools_module_scss_1.default.content, children: "Debug console" })] }) }), root);
+                                                                    }, variant: "ghost", children: (0, jsx_runtime_1.jsx)(bi_1.BiDockRight, { color: "currentColor", size: 16 }) })] })] }) }) })] }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => setIsOpen(false), size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close" }) })] })] }), (0, jsx_runtime_1.jsxs)(react_tabs_1.Content, { value: "code", className: DevTools_module_scss_1.default.content, children: [(0, jsx_runtime_1.jsx)(XmluiCodeHighlighter_1.XmluiCodeHighlighter, { value: value }), (0, jsx_runtime_1.jsx)("div", { className: DevTools_module_scss_1.default.copyButton, children: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: copyToClipboard, variant: "solid", themeColor: "secondary", style: { padding: 8 }, size: "sm", children: copied ? ((0, jsx_runtime_1.jsx)(hi2_1.HiOutlineClipboardDocumentCheck, { size: 16 })) : ((0, jsx_runtime_1.jsx)(hi2_1.HiOutlineClipboardDocument, { size: 16 })) }) })] }), (0, jsx_runtime_1.jsx)(react_tabs_1.Content, { value: "console", className: DevTools_module_scss_1.default.content, children: "Debug console" })] }) }), root);
 };
 exports.DevTools = DevTools;

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

@@ -43,6 +43,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_es_1 = require("lodash-es");
+const ScriptingSourceTreeExp_1 = require("../abstractions/scripting/ScriptingSourceTreeExp");
 const extractParam_1 = require("./utils/extractParam");
 const misc_1 = require("./utils/misc");
 const EngineError_1 = require("./EngineError");
@@ -207,8 +208,8 @@ class RestApiProxy {
                 };
                 try {
                     const arrowStmt = {
-                        type: "ArrowS",
-                        expression: value,
+                        type: ScriptingSourceTreeExp_1.T_ARROW_EXPRESSION_STATEMENT,
+                        expr: 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) {
@@ -322,10 +323,13 @@ class RestApiProxy {
         const conf = (appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals) || { apiUrl: "" };
         const { apiUrl, errorResponseTransform } = conf;
         this.appContext = appContext;
+        const xsrfHeaders = {
+            "X-XSRF-TOKEN": (0, misc_1.readCookie)('XSRF-TOKEN')
+        };
         this.config = {
             apiUrl,
             errorResponseTransform,
-            headers: Object.assign({}, (_a = appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals) === null || _a === void 0 ? void 0 : _a.headers)
+            headers: Object.assign(Object.assign({}, (_a = appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals) === null || _a === void 0 ? void 0 : _a.headers), xsrfHeaders)
         };
     }
     generateFullApiUrl(relativePath, queryParams) {

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

@@ -176,7 +176,7 @@ function updateQueriesWithOptimisticValue(_a) {
     });
 }
 function callApi(_a, _b) {
-    return __awaiter(this, arguments, void 0, function* ({ state, appContext, lookupAction, uid: containerUid }, { confirmTitle, confirmMessage, confirmButtonLabel, params = {}, onBeforeRequest, onSuccess, onError, invalidates, updates, optimisticValue, payloadType, when, getOptimisticValue, inProgressNotificationMessage, completedNotificationMessage, errorNotificationMessage, uid: actionUid, onProgress, 
+    return __awaiter(this, arguments, void 0, function* ({ state, appContext, lookupAction, getCurrentState }, { confirmTitle, confirmMessage, confirmButtonLabel, params = {}, onBeforeRequest, onSuccess, onError, invalidates, updates, optimisticValue, payloadType, when, getOptimisticValue, inProgressNotificationMessage, completedNotificationMessage, errorNotificationMessage, uid: actionUid, onProgress, 
     //operation
     headers, url, queryParams, rawBody, method, body, }, { resolveBindingExpressions } = {}) {
         const uid = typeof actionUid === "symbol" ? actionUid : Symbol(actionUid);
@@ -237,6 +237,7 @@ function callApi(_a, _b) {
             });
             const onSuccessFn = lookupAction(onSuccess, uid, {
                 eventName: "success",
+                context: getCurrentState()
             });
             yield (onSuccessFn === null || onSuccessFn === void 0 ? void 0 : onSuccessFn(result, stateContext["$param"]));
             updateQueriesWithResult(queryKeysToUpdate, optimisticValuesByQueryKeys, clientTxId, appContext.queryClient, result);

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

@@ -52,6 +52,7 @@ const react_2 = require("@remix-run/react");
 const lodash_es_1 = require("lodash-es");
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 const memoize_one_1 = __importDefault(require("memoize-one"));
+const ScriptingSourceTreeExp_1 = require("../../abstractions/scripting/ScriptingSourceTreeExp");
 const containers_1 = require("../abstractions/containers");
 const AppContext_1 = require("../AppContext");
 const buildProxy_1 = require("../rendering/buildProxy");
@@ -114,7 +115,7 @@ exports.Container = (0, react_1.memo)((0, react_1.forwardRef)(function Container
         let changes = [];
         const getComponentStateClone = () => {
             changes.length = 0;
-            const poj = (0, lodash_es_1.cloneDeep)(Object.assign({}, stateRef.current));
+            const poj = (0, lodash_es_1.cloneDeep)(Object.assign(Object.assign({}, stateRef.current), ((options === null || options === void 0 ? void 0 : options.context) || {})));
             poj["$this"] = stateRef.current[componentUid];
             return (0, buildProxy_1.buildProxy)(poj, (changeInfo) => {
                 var _a;
@@ -134,6 +135,7 @@ exports.Container = (0, react_1.memo)((0, react_1.forwardRef)(function Container
                 return {
                     uid: componentUid,
                     state: stateRef.current,
+                    getCurrentState: () => stateRef.current,
                     dispatch,
                     appContext: evalAppContext,
                     navigate,
@@ -161,8 +163,8 @@ exports.Container = (0, react_1.memo)((0, react_1.forwardRef)(function Container
             else {
                 statements = [
                     {
-                        type: "ArrowS",
-                        expression: (0, lodash_es_1.cloneDeep)(source), //TODO illesg (talk it through why we need to deep clone, it it's omitted, it gets slower every time we run it)
+                        type: ScriptingSourceTreeExp_1.T_ARROW_EXPRESSION_STATEMENT,
+                        expr: source, //TODO illesg (talk it through why we need to deep clone, it it's omitted, it gets slower every time we run it)
                     },
                 ];
             }
@@ -180,7 +182,7 @@ exports.Container = (0, react_1.memo)((0, react_1.forwardRef)(function Container
                 });
             }
             let mainThreadBlockingRuns = 0;
-            yield (0, process_statement_async_1.processStatementQueueAsync)(statements, evalContext, undefined, (evalContext) => __awaiter(this, void 0, void 0, function* () {
+            evalContext.onStatementCompleted = (evalContext) => __awaiter(this, void 0, void 0, function* () {
                 if (changes.length) {
                     mainThreadBlockingRuns = 0;
                     changes.forEach((change) => {
@@ -231,7 +233,8 @@ exports.Container = (0, react_1.memo)((0, react_1.forwardRef)(function Container
                     }
                 }
                 evalContext.localContext = getComponentStateClone();
-            }));
+            });
+            yield (0, process_statement_async_1.processStatementQueueAsync)(statements, evalContext);
             if (canSignEventLifecycle()) {
                 // --- Sign the event handler has successfully completed
                 dispatch({
@@ -275,8 +278,8 @@ exports.Container = (0, react_1.memo)((0, react_1.forwardRef)(function Container
         };
         try {
             const arrowStmt = {
-                type: "ArrowS",
-                expression: arrowExpression,
+                type: ScriptingSourceTreeExp_1.T_ARROW_EXPRESSION_STATEMENT,
+                expr: arrowExpression,
             };
             (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) {
@@ -291,7 +294,10 @@ exports.Container = (0, react_1.memo)((0, react_1.forwardRef)(function Container
     }, [appContext]);
     const getOrCreateEventHandlerFn = (0, misc_1.useEvent)((src, uid, options) => {
         var _a;
-        const stringSrc = typeof src === "string" ? src : src.statement.source;
+        if (Array.isArray(src)) {
+            throw new Error("Multiple event handlers are not supported");
+        }
+        const stringSrc = typeof src === "string" ? src : src.statement.nodeId;
         const fnCacheKey = `${options === null || options === void 0 ? void 0 : options.eventName};${stringSrc}`;
         const handler = (...eventArgs) => {
             return runCodeAsync(src, uid, options, ...(0, lodash_es_1.cloneDeep)(eventArgs));
@@ -307,13 +313,11 @@ exports.Container = (0, react_1.memo)((0, react_1.forwardRef)(function Container
     });
     const getOrCreateSyncCallbackFn = (0, react_1.useCallback)((arrowExpression, uid) => {
         var _a;
-        const fnCacheKey = `sync-callback-${arrowExpression.source}`;
+        const fnCacheKey = `sync-callback-${arrowExpression.nodeId}`;
         if (!((_a = fnsRef.current[uid]) === null || _a === void 0 ? void 0 : _a[fnCacheKey])) {
             fnsRef.current[uid] = fnsRef.current[uid] || {};
             fnsRef.current[uid][fnCacheKey] = (0, memoize_one_1.default)((arrowExpression) => {
-                // console.log('busting sync callback cache', arrowExpression);
                 return (...eventArgs) => {
-                    // console.log("calling sync callback", arrowExpression);
                     return runCodeSync(arrowExpression, ...eventArgs);
                 };
             });

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

@@ -11,6 +11,7 @@ const lodash_es_1 = require("lodash-es");
 const memoize_one_1 = __importDefault(require("memoize-one"));
 const react_2 = require("@remix-run/react");
 const containers_1 = require("../abstractions/containers");
+const ScriptingSourceTreeExp_1 = require("../../abstractions/scripting/ScriptingSourceTreeExp");
 const constants_1 = require("../constants");
 const collectFnVarDeps_1 = require("../rendering/collectFnVarDeps");
 const reducer_1 = require("../rendering/reducer");
@@ -19,7 +20,7 @@ const ErrorBoundary_1 = require("../rendering/ErrorBoundary");
 const visitors_1 = require("../script-runner/visitors");
 const hooks_1 = require("../utils/hooks");
 const Container_1 = require("./Container");
-const code_behind_collect_1 = require("../../parsers/scripting/code-behind-collect");
+const code_behind_collect_1 = require("../../parsers/scripting-exp/code-behind-collect");
 const AppContext_1 = require("../AppContext");
 const ParameterParser_1 = require("../script-runner/ParameterParser");
 const eval_tree_sync_1 = require("../script-runner/eval-tree-sync");
@@ -77,7 +78,7 @@ exports.StateContainer = (0, react_1.memo)((0, react_1.forwardRef)(function Stat
     const functionDeps = (0, react_1.useMemo)(() => {
         const fnDeps = {};
         Object.entries(varDefinitions).forEach(([key, value]) => {
-            if (isParsedValue(value) && value.tree.type === "ArrowE") {
+            if (isParsedValue(value) && value.tree.type === ScriptingSourceTreeExp_1.T_ARROW_EXPRESSION) {
                 fnDeps[key] = (0, visitors_1.collectVariableDependencies)(value.tree, referenceTrackedApi);
             }
         });

package/dist/scripts/src/components-core/script-runner/BindingTreeEvaluationContext.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CancellationToken = void 0;
 exports.createEvalContext = createEvalContext;
 /**
  * A token that signals the cancellation of an operation
@@ -16,7 +15,6 @@ class CancellationToken {
         this._cancelled = true;
     }
 }
-exports.CancellationToken = CancellationToken;
 /**
  * Creates an evaluation context with the given parts
  * @param parts Parts of the evaluation context

package/dist/scripts/src/components-core/script-runner/ParameterParser.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseParameterString = parseParameterString;
-const Parser_1 = require("../../parsers/scripting/Parser");
+const Parser_1 = require("../../parsers/scripting-exp/Parser");
 /**
  * This function parses a parameter string and splits them into string literal and binding expression sections
  * @param source String to parse