xmlui 0.10.26 → 0.11.1

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

@@ -165,6 +165,14 @@ exports.FormItemMd = (0, metadata_helpers_1.createMetadata)({
             valueType: "string",
             defaultValue: FormItemNative_1.defaultProps.gap,
         },
+        noSubmit: {
+            description: "When set to `true`, the field will not be included in the form's submitted data. " +
+                "This is useful for fields that should be present in the form but not submitted, " +
+                "similar to hidden fields. If multiple FormItems reference the same `bindTo` value " +
+                "and any of them has `noSubmit` set to `true`, the field will NOT be submitted.",
+            type: "boolean",
+            defaultValue: FormItemNative_1.defaultProps.noSubmit,
+        },
     },
     events: {
         validate: (0, metadata_helpers_1.d)(`This event is used to define a custom validation function.`),
@@ -204,7 +212,7 @@ exports.FormItemMd = (0, metadata_helpers_1.createMetadata)({
 });
 exports.formItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.FormItemMd, ({ node, renderChild, extractValue, className, layoutContext, lookupEventHandler, lookupAction, registerComponentApi, }) => {
     var _a;
-    const _b = node.props, { bindTo, autoFocus, label, labelPosition, labelWidth, labelBreak, enabled, required, type, requiredInvalidMessage, minLength, maxLength, lengthInvalidMessage, lengthInvalidSeverity, minValue, maxValue, rangeInvalidMessage, rangeInvalidSeverity, pattern, patternInvalidMessage, patternInvalidSeverity, regex, regexInvalidMessage, regexInvalidSeverity, customValidationsDebounce, validationMode, maxTextLength, gap } = _b, rest = __rest(_b, ["bindTo", "autoFocus", "label", "labelPosition", "labelWidth", "labelBreak", "enabled", "required", "type", "requiredInvalidMessage", "minLength", "maxLength", "lengthInvalidMessage", "lengthInvalidSeverity", "minValue", "maxValue", "rangeInvalidMessage", "rangeInvalidSeverity", "pattern", "patternInvalidMessage", "patternInvalidSeverity", "regex", "regexInvalidMessage", "regexInvalidSeverity", "customValidationsDebounce", "validationMode", "maxTextLength", "gap"]);
+    const _b = node.props, { bindTo, autoFocus, label, labelPosition, labelWidth, labelBreak, enabled, required, type, requiredInvalidMessage, minLength, maxLength, lengthInvalidMessage, lengthInvalidSeverity, minValue, maxValue, rangeInvalidMessage, rangeInvalidSeverity, pattern, patternInvalidMessage, patternInvalidSeverity, regex, regexInvalidMessage, regexInvalidSeverity, customValidationsDebounce, validationMode, maxTextLength, gap, noSubmit } = _b, rest = __rest(_b, ["bindTo", "autoFocus", "label", "labelPosition", "labelWidth", "labelBreak", "enabled", "required", "type", "requiredInvalidMessage", "minLength", "maxLength", "lengthInvalidMessage", "lengthInvalidSeverity", "minValue", "maxValue", "rangeInvalidMessage", "rangeInvalidSeverity", "pattern", "patternInvalidMessage", "patternInvalidSeverity", "regex", "regexInvalidMessage", "regexInvalidSeverity", "customValidationsDebounce", "validationMode", "maxTextLength", "gap", "noSubmit"]);
     const resolvedRestProps = extractValue(rest);
     const formItemType = extractValue.asOptionalString(type);
     const isCustomFormItem = (formItemType === undefined || formItemType === "custom") && !!node.children;
@@ -215,7 +223,7 @@ exports.formItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COM
         // --- validation props
         required: extractValue.asOptionalBoolean(required), requiredInvalidMessage: extractValue.asOptionalString(requiredInvalidMessage), minLength: extractValue.asOptionalNumber(minLength), maxLength: extractValue.asOptionalNumber(maxLength), lengthInvalidMessage: extractValue.asOptionalString(lengthInvalidMessage), lengthInvalidSeverity: (0, Validations_1.parseSeverity)(extractValue.asOptionalString(lengthInvalidSeverity)), minValue: extractValue.asOptionalNumber(minValue), maxValue: extractValue.asOptionalNumber(maxValue), rangeInvalidMessage: extractValue.asOptionalString(rangeInvalidMessage), rangeInvalidSeverity: (0, Validations_1.parseSeverity)(extractValue.asOptionalString(rangeInvalidSeverity)), pattern: extractValue.asOptionalString(pattern), patternInvalidMessage: extractValue.asOptionalString(patternInvalidMessage), patternInvalidSeverity: (0, Validations_1.parseSeverity)(extractValue.asOptionalString(patternInvalidSeverity)), regex: extractValue.asOptionalString(regex), regexInvalidMessage: extractValue.asOptionalString(regexInvalidMessage), regexInvalidSeverity: (0, Validations_1.parseSeverity)(extractValue.asOptionalString(regexInvalidSeverity)), 
         //  ----
-        className: className, layoutContext: layoutContext, labelBreak: extractValue.asOptionalBoolean(labelBreak), labelWidth: extractValue.asOptionalString(labelWidth), bindTo: extractValue.asString(bindTo), autoFocus: extractValue.asOptionalBoolean(autoFocus), enabled: extractValue.asOptionalBoolean(enabled), label: extractValue.asOptionalString(label), labelPosition: extractValue.asOptionalString(labelPosition), type: isCustomFormItem ? "custom" : formItemType, onValidate: lookupEventHandler("validate"), customValidationsDebounce: extractValue.asOptionalNumber(customValidationsDebounce), validationMode: extractValue.asOptionalString(validationMode), registerComponentApi: registerComponentApi, maxTextLength: extractValue(maxTextLength), itemIndex: extractValue("{$itemIndex}"), initialValue: extractValue(node.props.initialValue), inputRenderer: inputTemplate
+        className: className, layoutContext: layoutContext, labelBreak: extractValue.asOptionalBoolean(labelBreak), labelWidth: extractValue.asOptionalString(labelWidth), bindTo: extractValue.asString(bindTo), autoFocus: extractValue.asOptionalBoolean(autoFocus), enabled: extractValue.asOptionalBoolean(enabled), label: extractValue.asOptionalString(label), labelPosition: extractValue.asOptionalString(labelPosition), type: isCustomFormItem ? "custom" : formItemType, onValidate: lookupEventHandler("validate"), customValidationsDebounce: extractValue.asOptionalNumber(customValidationsDebounce), validationMode: extractValue.asOptionalString(validationMode), registerComponentApi: registerComponentApi, maxTextLength: extractValue(maxTextLength), itemIndex: extractValue("{$itemIndex}"), initialValue: extractValue(node.props.initialValue), noSubmit: extractValue.asOptionalBoolean(noSubmit), inputRenderer: inputTemplate
             ? (contextVars) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { contextVars: contextVars, node: inputTemplate, renderChild: renderChild, layoutContext: layoutContext }))
             : undefined, gap: extractValue.asOptionalString(gap) }, resolvedRestProps, { children: isCustomFormItem ? ((0, jsx_runtime_1.jsx)(FormItemNative_1.CustomFormItem, { renderChild: renderChild, node: node, bindTo: extractValue.asString(bindTo) })) : (renderChild(node.children, {
             type: formItemType,

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

@@ -860,4 +860,163 @@ fixtures_1.test.describe("Other Edge Cases", () => {
         yield (0, fixtures_1.expect)(field).not.toBeVisible();
         yield (0, fixtures_1.expect)(page.locator("[data-error-boundary]")).toBeVisible();
     }));
+    // =============================================================================
+    // NOSUBMIT PROPERTY TESTS
+    // =============================================================================
+    fixtures_1.test.describe("noSubmit property", () => {
+        (0, fixtures_1.test)("excludes field from submission when noSubmit is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Form onSubmit="data => testState = data">
+          <FormItem testId="field1" label="Included Field" bindTo="included" initialValue="visible" />
+          <FormItem testId="field2" label="Excluded Field" bindTo="excluded" initialValue="hidden" noSubmit="true" />
+        </Form>
+      `);
+            const driver1 = yield createFormItemDriver("field1");
+            const input1 = yield createTextBoxDriver(driver1.input);
+            yield input1.field.fill("submitted value");
+            const driver2 = yield createFormItemDriver("field2");
+            const input2 = yield createTextBoxDriver(driver2.input);
+            yield input2.field.fill("not submitted");
+            yield page.getByRole("button", { name: "Save" }).click();
+            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({
+                included: "submitted value",
+            });
+        }));
+        (0, fixtures_1.test)("includes field in submission when noSubmit is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Form onSubmit="data => testState = data">
+          <FormItem testId="field1" label="Field 1" bindTo="field1" initialValue="value1" noSubmit="false" />
+          <FormItem testId="field2" label="Field 2" bindTo="field2" initialValue="value2" />
+        </Form>
+      `);
+            yield page.getByRole("button", { name: "Save" }).click();
+            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({
+                field1: "value1",
+                field2: "value2",
+            });
+        }));
+        (0, fixtures_1.test)("includes field by default when noSubmit is not specified", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Form onSubmit="data => testState = data">
+          <FormItem testId="field1" label="Field 1" bindTo="field1" initialValue="value1" />
+          <FormItem testId="field2" label="Field 2" bindTo="field2" initialValue="value2" />
+        </Form>
+      `);
+            yield page.getByRole("button", { name: "Save" }).click();
+            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({
+                field1: "value1",
+                field2: "value2",
+            });
+        }));
+        (0, fixtures_1.test)("excludes field when multiple FormItems with same bindTo all have noSubmit true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Form onSubmit="data => testState = data">
+          <FormItem testId="field1" label="FormItem 1" bindTo="shared" initialValue="first" noSubmit="true" />
+          <FormItem testId="field2" label="FormItem 2" bindTo="shared" initialValue="second" noSubmit="true" />
+          <FormItem testId="field3" label="Other Field" bindTo="other" initialValue="included" />
+        </Form>
+      `);
+            yield page.getByRole("button", { name: "Save" }).click();
+            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({
+                other: "included",
+            });
+        }));
+        (0, fixtures_1.test)("excludes field when any FormItem with same bindTo has noSubmit true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Form onSubmit="data => testState = data">
+          <FormItem testId="field1" label="FormItem 1" bindTo="shared" initialValue="first" noSubmit="true" />
+          <FormItem testId="field2" label="FormItem 2" bindTo="shared" initialValue="second" noSubmit="false" />
+          <FormItem testId="field3" label="Other Field" bindTo="other" initialValue="included" />
+        </Form>
+      `);
+            yield page.getByRole("button", { name: "Save" }).click();
+            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({
+                other: "included",
+            });
+        }));
+        (0, fixtures_1.test)("excludes field when any FormItem with same bindTo has noSubmit true (mixed order)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Form onSubmit="data => testState = data">
+          <FormItem testId="field1" label="FormItem 1" bindTo="shared" initialValue="first" noSubmit="false" />
+          <FormItem testId="field2" label="FormItem 2" bindTo="shared" initialValue="second" noSubmit="true" />
+          <FormItem testId="field3" label="Other Field" bindTo="other" initialValue="included" />
+        </Form>
+      `);
+            yield page.getByRole("button", { name: "Save" }).click();
+            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({
+                other: "included",
+            });
+        }));
+        (0, fixtures_1.test)("field still participates in validation when noSubmit is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Form onSubmit="data => testState = data">
+          <FormItem 
+            testId="field1" 
+            label="Required No Submit" 
+            bindTo="excluded" 
+            required="true"
+            noSubmit="true" 
+          />
+        </Form>
+      `);
+            // Try to submit with empty required field
+            yield page.getByRole("button", { name: "Save" }).click();
+            // Form should not submit due to validation error
+            yield fixtures_1.expect.poll(testStateDriver.testState).toBeNull();
+            // Fill the required field
+            const driver = yield createFormItemDriver("field1");
+            const input = yield createTextBoxDriver(driver.input);
+            yield input.field.fill("value");
+            // Now submit should succeed but field should not be in data
+            yield page.getByRole("button", { name: "Save" }).click();
+            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({});
+        }));
+        (0, fixtures_1.test)("noSubmit works with different input types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Form onSubmit="data => testState = data">
+          <FormItem testId="text" label="Text" type="text" bindTo="text" initialValue="text" noSubmit="true" />
+          <FormItem testId="number" label="Number" type="number" bindTo="number" initialValue="42" noSubmit="true" />
+          <FormItem testId="checkbox" label="Checkbox" type="checkbox" bindTo="checkbox" initialValue="true" noSubmit="true" />
+          <FormItem testId="included" label="Included" bindTo="included" initialValue="visible" />
+        </Form>
+      `);
+            yield page.getByRole("button", { name: "Save" }).click();
+            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({
+                included: "visible",
+            });
+        }));
+        (0, fixtures_1.test)("noSubmit works with select type", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Form onSubmit="data => testState = data">
+          <FormItem testId="select" label="Select" type="select" bindTo="select" initialValue="opt1" noSubmit="true">
+            <Option value="opt1" label="Option 1" />
+            <Option value="opt2" label="Option 2" />
+          </FormItem>
+          <FormItem testId="included" label="Included" bindTo="included" initialValue="visible" />
+        </Form>
+      `);
+            yield page.getByRole("button", { name: "Save" }).click();
+            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({
+                included: "visible",
+            });
+        }));
+        (0, fixtures_1.test)("noSubmit field value changes do not affect submission data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createFormItemDriver, createTextBoxDriver, }) {
+            const { testStateDriver } = yield initTestBed(`
+        <Form onSubmit="data => testState = data">
+          <FormItem testId="excluded" label="Excluded" bindTo="excluded" initialValue="initial" noSubmit="true" />
+          <FormItem testId="included" label="Included" bindTo="included" initialValue="value" />
+        </Form>
+      `);
+            const excludedDriver = yield createFormItemDriver("excluded");
+            const excludedInput = yield createTextBoxDriver(excludedDriver.input);
+            yield excludedInput.field.fill("changed value");
+            const includedDriver = yield createFormItemDriver("included");
+            const includedInput = yield createTextBoxDriver(includedDriver.input);
+            yield includedInput.field.fill("modified");
+            yield page.getByRole("button", { name: "Save" }).click();
+            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({
+                included: "modified",
+            });
+        }));
+    });
 });

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

@@ -51,6 +51,7 @@ exports.defaultProps = {
     enabled: true,
     customValidationsDebounce: 0,
     gap: "0",
+    noSubmit: false,
 };
 const FormItemContext = (0, react_1.createContext)({ parentFormItemId: null });
 function ArrayLikeFormItem({ children, formItemId, registerComponentApi, value = constants_1.EMPTY_ARRAY, updateState, }) {
@@ -78,7 +79,7 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
     // --- validation props
     required, requiredInvalidMessage, minLength, maxLength, lengthInvalidMessage, lengthInvalidSeverity, minValue, maxValue, rangeInvalidMessage, rangeInvalidSeverity, pattern, patternInvalidMessage, patternInvalidSeverity, regex, regexInvalidMessage, regexInvalidSeverity, 
     // ---
-    style, className, bindTo, type = exports.defaultProps.type, label, enabled = exports.defaultProps.enabled, labelPosition, labelWidth, labelBreak = exports.defaultProps.labelBreak, children, onValidate, customValidationsDebounce = exports.defaultProps.customValidationsDebounce, validationMode, registerComponentApi, maxTextLength, inputRenderer, itemIndex, initialValue: initialValueFromProps, gap } = _a, rest = __rest(_a, ["required", "requiredInvalidMessage", "minLength", "maxLength", "lengthInvalidMessage", "lengthInvalidSeverity", "minValue", "maxValue", "rangeInvalidMessage", "rangeInvalidSeverity", "pattern", "patternInvalidMessage", "patternInvalidSeverity", "regex", "regexInvalidMessage", "regexInvalidSeverity", "style", "className", "bindTo", "type", "label", "enabled", "labelPosition", "labelWidth", "labelBreak", "children", "onValidate", "customValidationsDebounce", "validationMode", "registerComponentApi", "maxTextLength", "inputRenderer", "itemIndex", "initialValue", "gap"]);
+    style, className, bindTo, type = exports.defaultProps.type, label, enabled = exports.defaultProps.enabled, labelPosition, labelWidth, labelBreak = exports.defaultProps.labelBreak, children, onValidate, customValidationsDebounce = exports.defaultProps.customValidationsDebounce, validationMode, registerComponentApi, maxTextLength, inputRenderer, itemIndex, initialValue: initialValueFromProps, gap, noSubmit = exports.defaultProps.noSubmit } = _a, rest = __rest(_a, ["required", "requiredInvalidMessage", "minLength", "maxLength", "lengthInvalidMessage", "lengthInvalidSeverity", "minValue", "maxValue", "rangeInvalidMessage", "rangeInvalidSeverity", "pattern", "patternInvalidMessage", "patternInvalidSeverity", "regex", "regexInvalidMessage", "regexInvalidSeverity", "style", "className", "bindTo", "type", "label", "enabled", "labelPosition", "labelWidth", "labelBreak", "children", "onValidate", "customValidationsDebounce", "validationMode", "registerComponentApi", "maxTextLength", "inputRenderer", "itemIndex", "initialValue", "gap", "noSubmit"]);
     const validations = (0, hooks_1.useShallowCompareMemoize)({
         required,
         requiredInvalidMessage,
@@ -127,10 +128,10 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
     const formEnabled = (0, FormContext_1.useFormContextPart)((value) => value === null || value === void 0 ? void 0 : value.enabled);
     const isEnabled = enabled && formEnabled;
     (0, react_1.useEffect)(() => {
-        if (initialValue !== undefined) {
-            dispatch((0, formActions_1.fieldInitialized)(formItemId, initialValue));
-        }
-    }, [dispatch, formItemId, initialValue]);
+        // Always dispatch fieldInitialized to ensure noSubmit tracking
+        // Pass undefined as value when initialValue is undefined to avoid overwriting existing values
+        dispatch((0, formActions_1.fieldInitialized)(formItemId, initialValue, false, noSubmit));
+    }, [dispatch, formItemId, initialValue, noSubmit]);
     (0, Validations_1.useValidation)(validations, onValidate, value, dispatch, formItemId, customValidationsDebounce);
     const onStateChange = (0, react_1.useCallback)(({ value }, options) => {
         //we already handled the initial value in the useEffect with fieldInitialized(...);

package/dist/scripts/src/components/Heading/Heading.spec.js

@@ -301,31 +301,29 @@ abstractions_1.headingLevels.forEach((level) => {
 // BASIC FUNCTIONALITY TESTS
 // =============================================================================
 fixtures_1.test.describe("Basic Functionality", () => {
-    (0, fixtures_1.test)("component renders with basic props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+    (0, fixtures_1.test)("component renders with basic props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createHeadingDriver }) {
         yield initTestBed(`<Heading>Test Heading</Heading>`);
         const driver = yield createHeadingDriver();
         yield (0, fixtures_1.expect)(driver.component).toBeVisible();
         yield (0, fixtures_1.expect)(driver.component).toHaveText("Test Heading");
     }));
-    (0, fixtures_1.test)("component renders with all heading levels", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, }) {
-        const levels = ["h1", "h2", "h3", "h4", "h5", "h6"];
-        for (const level of levels) {
-            yield initTestBed(`<Heading level="${level}">Level ${level}</Heading>`);
+    ["h1", "h2", "h3", "h4", "h5", "h6"].forEach((lvl) => {
+        (0, fixtures_1.test)(`component renders with ${lvl} level`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+            yield initTestBed(`<Heading level="${lvl}">Level ${lvl}</Heading>`);
             const driver = yield createHeadingDriver();
             yield (0, fixtures_1.expect)(driver.component).toBeVisible();
             const tagName = yield driver.getComponentTagName();
-            (0, fixtures_1.expect)(tagName.toLowerCase()).toBe(level);
-        }
-    }));
-    (0, fixtures_1.test)("specialized heading components render correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, }) {
-        const components = ["H1", "H2", "H3", "H4", "H5", "H6"];
-        for (const component of components) {
-            yield initTestBed(`<${component}>Specialized ${component}</${component}>`);
+            (0, fixtures_1.expect)(tagName.toLowerCase()).toBe(lvl);
+        }));
+    });
+    ["H1", "H2", "H3", "H4", "H5", "H6"].forEach((c) => {
+        (0, fixtures_1.test)(`specialized ${c} components renders content`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, }) {
+            yield initTestBed(`<${c}>Specialized ${c}</${c}>`);
             const driver = yield createHeadingDriver();
             yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-            yield (0, fixtures_1.expect)(driver.component).toHaveText(`Specialized ${component}`);
-        }
-    }));
+            yield (0, fixtures_1.expect)(driver.component).toHaveText(`Specialized ${c}`);
+        }));
+    });
     (0, fixtures_1.test)("component handles value prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
         yield initTestBed(`<Heading value="Value prop text" />`);
         const driver = yield createHeadingDriver();
@@ -430,33 +428,22 @@ fixtures_1.test.describe("Accessibility", () => {
         const tagName = yield driver.getComponentTagName();
         (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h2");
     }));
-    (0, fixtures_1.test)("all heading levels have correct semantic roles", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, }) {
-        const levels = ["h1", "h2", "h3", "h4", "h5", "h6"];
-        for (const level of levels) {
-            yield initTestBed(`<Heading level="${level}">Level ${level}</Heading>`);
-            const driver = yield createHeadingDriver();
-            yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
-            const tagName = yield driver.getComponentTagName();
-            (0, fixtures_1.expect)(tagName.toLowerCase()).toBe(level);
-        }
-    }));
-    (0, fixtures_1.test)("specialized components maintain semantic heading structure", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, }) {
-        const components = [
-            { component: "H1", expectedTag: "h1" },
-            { component: "H2", expectedTag: "h2" },
-            { component: "H3", expectedTag: "h3" },
-            { component: "H4", expectedTag: "h4" },
-            { component: "H5", expectedTag: "h5" },
-            { component: "H6", expectedTag: "h6" },
-        ];
-        for (const { component, expectedTag } of components) {
+    [
+        { component: "H1", expectedTag: "h1" },
+        { component: "H2", expectedTag: "h2" },
+        { component: "H3", expectedTag: "h3" },
+        { component: "H4", expectedTag: "h4" },
+        { component: "H5", expectedTag: "h5" },
+        { component: "H6", expectedTag: "h6" },
+    ].forEach(({ component, expectedTag }) => {
+        (0, fixtures_1.test)(`${component} renders as ${expectedTag} element`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, }) {
             yield initTestBed(`<${component}>Heading Level ${expectedTag}</${component}>`);
             const driver = yield createHeadingDriver();
             yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
             const tagName = yield driver.getComponentTagName();
             (0, fixtures_1.expect)(tagName.toLowerCase()).toBe(expectedTag);
-        }
-    }));
+        }));
+    });
     (0, fixtures_1.test)("component supports accessible text content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver, }) {
         yield initTestBed(`<Heading>Accessible heading with proper content</Heading>`);
         const driver = yield createHeadingDriver();
@@ -834,8 +821,8 @@ fixtures_1.test.describe("API", () => {
         const { testStateDriver } = yield initTestBed(`
       <Fragment>
         <Stack width="200px">
-          <H1 id="overflowHeading" maxLines="{1}" 
-            value="This is a very long heading text that should definitely overflow when constrained to a small width" 
+          <H1 id="overflowHeading" maxLines="{1}"
+            value="This is a very long heading text that should definitely overflow when constrained to a small width"
           />
           <Button onClick="testState = overflowHeading.hasOverflow()" />
         </Stack>
@@ -900,13 +887,13 @@ fixtures_1.test.describe("API", () => {
           <H4 id="h4Text" maxLines="{1}" value="This is a very long heading that should overflow" />
           <H5 id="h5Text" maxLines="{1}" value="This is a very long heading that should overflow" />
           <H6 id="h6Text" maxLines="{1}" value="This is a very long heading that should overflow" />
-          <Button onClick="testState = { 
-            h1: h1Text.hasOverflow(), 
-            h2: h2Text.hasOverflow(), 
-            h3: h3Text.hasOverflow(), 
-            h4: h4Text.hasOverflow(), 
-            h5: h5Text.hasOverflow(), 
-            h6: h6Text.hasOverflow() 
+          <Button onClick="testState = {
+            h1: h1Text.hasOverflow(),
+            h2: h2Text.hasOverflow(),
+            h3: h3Text.hasOverflow(),
+            h4: h4Text.hasOverflow(),
+            h5: h5Text.hasOverflow(),
+            h6: h6Text.hasOverflow()
           }" />
         </Stack>
       </Fragment>
@@ -962,7 +949,7 @@ fixtures_1.test.describe("API", () => {
         yield page.getByRole("button").click();
         yield fixtures_1.expect.poll(testStateDriver.testState).toBe(true);
     }));
-    (0, fixtures_1.test)("hasOverflow works with nested content instead of value prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("hasOverflow works with nested content instead of value prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
         const { testStateDriver } = yield initTestBed(`
       <Fragment>
         <Stack width="100px">

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.queueComponentRenderer = exports.QueueMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const renderers_1 = require("../../components-core/renderers");
-const container_helpers_1 = require("../container-helpers");
 const metadata_helpers_1 = require("../metadata-helpers");
 const QueueNative_1 = require("./QueueNative");
 const COMP = "Queue";
@@ -82,19 +81,5 @@ exports.QueueMd = (0, metadata_helpers_1.createMetadata)({
     },
 });
 exports.queueComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.QueueMd, ({ node, registerComponentApi, lookupEventHandler, renderChild, extractValue }) => {
-    return ((0, jsx_runtime_1.jsx)(QueueNative_1.Queue, { registerComponentApi: registerComponentApi, renderResultFeedback: node.props.resultFeedback
-            ? (completedItems, queuedItems) => {
-                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.resultFeedback, contextVars: {
-                        $completedItems: completedItems,
-                        $queuedItems: queuedItems,
-                    }, renderChild: renderChild }));
-            }
-            : undefined, renderProgressFeedback: node.props.progressFeedback
-            ? (completedItems, queuedItems) => {
-                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.progressFeedback, contextVars: {
-                        $completedItems: completedItems,
-                        $queuedItems: queuedItems,
-                    }, renderChild: renderChild }));
-            }
-            : undefined, willProcessItem: lookupEventHandler("willProcess"), processItem: lookupEventHandler("process", { signError: false }), didProcessItem: lookupEventHandler("didProcess"), processItemError: lookupEventHandler("processError"), onComplete: lookupEventHandler("complete"), clearAfterFinish: extractValue.asOptionalBoolean(node.props.clearAfterFinish) }));
+    return ((0, jsx_runtime_1.jsx)(QueueNative_1.QueueWithContextVar, { node: node, renderChild: renderChild, extractValue: extractValue, lookupEventHandler: lookupEventHandler, registerComponentApi: registerComponentApi }));
 });

package/dist/scripts/src/components/Queue/QueueNative.js

@@ -14,6 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.defaultProps = void 0;
 exports.Queue = Queue;
+exports.QueueWithContextVar = QueueWithContextVar;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
@@ -22,6 +23,7 @@ const lodash_es_1 = require("lodash-es");
 const hooks_1 = require("../../components-core/utils/hooks");
 const misc_1 = require("../../components-core/utils/misc");
 const AppContext_1 = require("../../components-core/AppContext");
+const container_helpers_1 = require("../container-helpers");
 const queueActions_1 = require("../Queue/queueActions");
 // =====================================================================================================================
 // React Queue component implementation
@@ -106,9 +108,12 @@ const INITIAL_STATE = {
 };
 function Queue({ registerComponentApi, willProcessItem, processItem, didProcessItem, processItemError, onComplete, 
 //progressFeedback,
-renderProgressFeedback, renderResultFeedback, clearAfterFinish = exports.defaultProps.clearAfterFinish, }) {
+renderProgressFeedback, renderResultFeedback, clearAfterFinish = exports.defaultProps.clearAfterFinish, queueState: externalQueueState, dispatch: externalDispatch, }) {
     const runningActionItemRef = (0, react_1.useRef)(new Set());
-    const [queueState, dispatch] = (0, react_1.useReducer)(queueReducer, INITIAL_STATE);
+    const [internalQueueState, internalDispatch] = (0, react_1.useReducer)(queueReducer, INITIAL_STATE);
+    // Use external state if provided, otherwise use internal state
+    const queueState = externalQueueState !== null && externalQueueState !== void 0 ? externalQueueState : internalQueueState;
+    const dispatch = externalDispatch !== null && externalDispatch !== void 0 ? externalDispatch : internalDispatch;
     let appContext = (0, AppContext_1.useAppContext)();
     // --- This Queue API adds a single item to the queue
     const enqueueItem = (0, misc_1.useEvent)((item) => {
@@ -282,3 +287,56 @@ renderProgressFeedback, renderResultFeedback, clearAfterFinish = exports.default
     }, [doComplete, doSingle, prevQueue, queue]);
     return null;
 }
+function QueueWithContextVar({ node, renderChild, extractValue, lookupEventHandler, registerComponentApi, }) {
+    const [queueState, dispatch] = (0, react_1.useReducer)(queueReducer, INITIAL_STATE);
+    // Compute context variables from queue state
+    const completedItems = (0, react_1.useMemo)(() => {
+        return Object.values(queueState.queueState).filter((item) => item.status === "completed");
+    }, [queueState.queueState]);
+    const queuedItems = (0, react_1.useMemo)(() => {
+        return Object.values(queueState.queueState);
+    }, [queueState.queueState]);
+    const $completedItems = completedItems;
+    const $queuedItems = queuedItems;
+    return ((0, jsx_runtime_1.jsx)(Queue, { queueState: queueState, dispatch: dispatch, registerComponentApi: registerComponentApi, renderResultFeedback: node.props.resultFeedback
+            ? (completedItems, queuedItems) => {
+                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.resultFeedback, contextVars: {
+                        $completedItems: completedItems,
+                        $queuedItems: queuedItems,
+                    }, renderChild: renderChild }));
+            }
+            : undefined, renderProgressFeedback: node.props.progressFeedback
+            ? (completedItems, queuedItems) => {
+                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.progressFeedback, contextVars: {
+                        $completedItems: completedItems,
+                        $queuedItems: queuedItems,
+                    }, renderChild: renderChild }));
+            }
+            : undefined, willProcessItem: lookupEventHandler("willProcess", {
+            context: {
+                $completedItems,
+                $queuedItems,
+            },
+        }), processItem: lookupEventHandler("process", {
+            signError: false,
+            context: {
+                $completedItems,
+                $queuedItems,
+            },
+        }), didProcessItem: lookupEventHandler("didProcess", {
+            context: {
+                $completedItems,
+                $queuedItems,
+            },
+        }), processItemError: lookupEventHandler("processError", {
+            context: {
+                $completedItems,
+                $queuedItems,
+            },
+        }), onComplete: lookupEventHandler("complete", {
+            context: {
+                $completedItems,
+                $queuedItems,
+            },
+        }), clearAfterFinish: extractValue.asOptionalBoolean(node.props.clearAfterFinish) }));
+}

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

@@ -53,12 +53,14 @@ exports.TableOfContentsMd = (0, metadata_helpers_1.createMetadata)({
         [`paddingLeft-${COMP_CHILD}-level-5`]: "$space-6",
         [`paddingLeft-${COMP_CHILD}-level-6`]: "$space-6",
         [`fontWeight-${COMP_CHILD}`]: "$fontWeight-bold",
-        [`fontWeight-${COMP_CHILD}-level-3`]: "normal",
-        [`fontWeight-${COMP_CHILD}-level-4`]: "normal",
-        [`fontWeight-${COMP_CHILD}-level-5`]: "normal",
-        [`fontWeight-${COMP_CHILD}-level-6`]: "normal",
+        [`fontWeight-${COMP_CHILD}-level-2`]: "$fontWeight-medium",
+        [`fontWeight-${COMP_CHILD}-level-3`]: "$fontWeight-normal",
+        [`fontWeight-${COMP_CHILD}-level-4`]: "$fontWeight-normal",
+        [`fontWeight-${COMP_CHILD}-level-5`]: "$fontWeight-normal",
+        [`fontWeight-${COMP_CHILD}-level-6`]: "$fontWeight-normal",
         [`fontStyle-${COMP_CHILD}-level-6`]: "italic",
-        [`color-${COMP_CHILD}--active`]: "$color-primary-500",
+        [`textColor-${COMP_CHILD}--active`]: "$color-primary-400",
+        [`fontWeight-${COMP_CHILD}--active`]: "$fontWeight-bold",
     },
 });
 function IndexAwareTableOfContents(props) {

package/dist/scripts/src/components-core/appContext/misc-utils.js

@@ -9,5 +9,6 @@ exports.miscellaneousUtils = {
     defaultTo: lodash_es_1.defaultTo,
     toHashObject: misc_1.toHashObject,
     findByField: misc_1.findByField,
-    distinct: misc_1.distinct
+    distinct: misc_1.distinct,
+    debounce: misc_1.debounce
 };

package/dist/scripts/src/components-core/devtools/InspectorDialog.js

@@ -43,8 +43,8 @@ const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 const classnames_1 = __importDefault(require("classnames"));
 const Dialog = __importStar(require("@radix-ui/react-dialog"));
 const InspectorDialog_module_scss_1 = __importDefault(require("./InspectorDialog.module.scss"));
-const xmlui_1 = require("xmlui");
 const framer_motion_1 = require("framer-motion");
+const ThemeContext_1 = require("../theming/ThemeContext");
 // =====================================================================================================================
 // React component definition
 const MotionContent = framer_motion_1.motion.create(Dialog.Content);
@@ -88,7 +88,7 @@ function durationToSeconds(durationString) {
     }
 }
 exports.InspectorDialog = react_1.default.forwardRef(({ children, style, isOpen, setIsOpen, clickPosition }, ref) => {
-    const { root, getThemeVar } = (0, xmlui_1.useTheme)();
+    const { root, getThemeVar } = (0, ThemeContext_1.useTheme)();
     const modalRef = (0, react_1.useRef)(null);
     const composedRef = ref ? (0, react_compose_refs_1.composeRefs)(ref, modalRef) : modalRef;
     const [rendered, setRendered] = (0, react_1.useState)(true);

package/dist/scripts/src/components-core/script-runner/eval-tree-async.js

@@ -244,10 +244,12 @@ function evalBinaryAsync(evaluator, thisStack, expr, evalContext, thread) {
         const l = yield completeExprValue(expr.left, thread);
         if (expr.op === "&&" && !l) {
             (0, eval_tree_common_1.setExprValue)(expr, { value: l }, thread);
+            thisStack.push(l);
             return l;
         }
         if (expr.op === "||" && l) {
             (0, eval_tree_common_1.setExprValue)(expr, { value: l }, thread);
+            thisStack.push(l);
             return l;
         }
         yield evaluator(thisStack, expr.right, evalContext, thread);

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.uint8ArrayToBase64 = uint8ArrayToBase64;
 exports.encodeToBase64 = encodeToBase64;
+exports.base64ToUint8Array = base64ToUint8Array;
 exports.decodeFromBase64 = decodeFromBase64;
 /**
  * Convert Uint8Array to base64 string without using btoa.
@@ -60,6 +61,7 @@ function encodeToBase64(value) {
 }
 /**
  * Convert base64 string to Uint8Array without using atob.
+ * Use this for binary data (e.g., compressed data).
  */
 function base64ToUint8Array(base64) {
     const base64abc = [

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

@@ -37,6 +37,7 @@ exports.toHashObject = toHashObject;
 exports.findByField = findByField;
 exports.distinct = distinct;
 exports.asyncThrottle = asyncThrottle;
+exports.debounce = debounce;
 const react_1 = require("react");
 const lodash_es_1 = require("lodash-es");
 const date_fns_1 = require("date-fns");
@@ -493,3 +494,46 @@ function asyncThrottle(func, wait, options) {
         throttled(resolve, reject, args);
     });
 }
+/**
+ * Registry to store debounced function timers and their captured arguments by key
+ */
+const debounceRegistry = new Map();
+/**
+ * Creates a debounced function that delays invoking the provided function until after
+ * the specified delay in milliseconds has elapsed since the last time it was invoked.
+ *
+ * When called from XMLUI markup, it automatically generates a stable key based on the
+ * call site to ensure proper debouncing across multiple invocations.
+ *
+ * @param delayMs The number of milliseconds to delay execution
+ * @param func The function to debounce
+ * @param args Optional arguments to pass to the function when it executes
+ * @returns void (executes the function after the delay)
+ *
+ * @example
+ * // In XMLUI markup with value capture:
+ * <TextBox onDidChange="e => debounce(500, () => console.log('value:', e), e)" />
+ *
+ * @example
+ * // In XMLUI markup with inline function:
+ * <TextBox onDidChange="e => debounce(500, (val) => console.log('value:', val), e)" />
+ */
+function debounce(delayMs, func, ...args) {
+    // Generate a unique key for this debounce call based on the function source
+    // This ensures that the same event handler in markup reuses the same timer
+    const key = func.toString();
+    // Clear existing timeout for this key
+    const existing = debounceRegistry.get(key);
+    if (existing !== undefined) {
+        clearTimeout(existing.timeoutId);
+    }
+    // Set new timeout with captured arguments
+    const timeoutId = setTimeout(() => {
+        const entry = debounceRegistry.get(key);
+        if (entry) {
+            func(...entry.args);
+            debounceRegistry.delete(key);
+        }
+    }, delayMs);
+    debounceRegistry.set(key, { timeoutId, args });
+}