xmlui 0.10.25 → 0.11.1

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();
@@ -336,6 +334,88 @@ fixtures_1.test.describe("Basic Functionality", () => {
         const driver = yield createHeadingDriver();
         yield (0, fixtures_1.expect)(driver.component).toHaveText("Child content text");
     }));
+    fixtures_1.test.describe("level property accepts numeric values", () => {
+        [1, 2, 3, 4, 5, 6].forEach((level) => {
+            (0, fixtures_1.test)(`level="{${level}}" renders as h${level}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+                yield initTestBed(`<Heading level="{${level}}">Numeric Level ${level}</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(`h${level}`);
+                yield (0, fixtures_1.expect)(driver.component).toHaveText(`Numeric Level ${level}`);
+            }));
+        });
+    });
+    fixtures_1.test.describe("level property accepts string numeric values", () => {
+        ["1", "2", "3", "4", "5", "6"].forEach((level) => {
+            (0, fixtures_1.test)(`level="${level}" renders as h${level}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+                yield initTestBed(`<Heading level="${level}">String Level ${level}</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(`h${level}`);
+                yield (0, fixtures_1.expect)(driver.component).toHaveText(`String Level ${level}`);
+            }));
+        });
+    });
+    fixtures_1.test.describe("level property accepts uppercase H format", () => {
+        ["H1", "H2", "H3", "H4", "H5", "H6"].forEach((level) => {
+            (0, fixtures_1.test)(`level="${level}" renders as ${level.toLowerCase()}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+                yield initTestBed(`<Heading level="${level}">Uppercase Level ${level}</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.toLowerCase());
+                yield (0, fixtures_1.expect)(driver.component).toHaveText(`Uppercase Level ${level}`);
+            }));
+        });
+    });
+    fixtures_1.test.describe("level property handles invalid values", () => {
+        [
+            { value: '"invalid"', label: "invalid string" },
+            { value: '"{0}"', label: "zero" },
+            { value: '"{7}"', label: "out of range number (7)" },
+            { value: '"{-1}"', label: "negative number" },
+            { value: '"{999}"', label: "large number" },
+            { value: '"h7"', label: "invalid h-format (h7)" },
+            { value: '"h0"', label: "invalid h-format (h0)" },
+            { value: '"7"', label: "out of range string (7)" },
+            { value: '"{null}"', label: "null" },
+            { value: '"{undefined}"', label: "undefined" },
+            { value: '"{{}}"', label: "empty object" },
+            { value: '"{[]}"', label: "empty array" },
+        ].forEach(({ value, label }) => {
+            (0, fixtures_1.test)(`level=${value} (${label}) defaults to h1`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+                yield initTestBed(`<Heading level=${value}>Invalid Level Fallback</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("h1");
+                yield (0, fixtures_1.expect)(driver.component).toHaveText("Invalid Level Fallback");
+            }));
+        });
+    });
+    (0, fixtures_1.test)("level property with mixed case string formats", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        const testCases = [
+            { input: "H3", expected: "h3" },
+            { input: "h3", expected: "h3" },
+            { input: "h3", expected: "h3" },
+        ];
+        for (const { input, expected } of testCases) {
+            yield initTestBed(`<Heading level="${input}">Mixed Case ${input}</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(expected);
+        }
+    }));
+    (0, fixtures_1.test)("level property handles whitespace in string values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
+        yield initTestBed(`<Heading level=" h2 ">Whitespace Level</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("h2");
+    }));
 });
 // =============================================================================
 // ACCESSIBILITY TESTS (REQUIRED)
@@ -348,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();
@@ -752,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>
@@ -818,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>
@@ -880,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/rendering/valueExtractor.js

@@ -43,6 +43,14 @@ function collectParams(expression) {
 function asOptionalBoolean(value, defValue) {
     if (value === undefined || value === null)
         return defValue;
+    // Empty array returns false
+    if (Array.isArray(value) && value.length === 0) {
+        return false;
+    }
+    // Empty object returns false
+    if (typeof value === "object" && value !== null && !Array.isArray(value) && Object.keys(value).length === 0) {
+        return false;
+    }
     if (typeof value === "number") {
         return value !== 0;
     }
@@ -64,7 +72,7 @@ function asOptionalBoolean(value, defValue) {
     if (typeof value === "boolean") {
         return value;
     }
-    throw new Error(`A boolean value expected but ${typeof value} received.`);
+    return true;
 }
 // This function represents the extractor function we pass to extractValue
 function createValueExtractor(state, appContext, referenceTrackedApi, memoedVarsRef) {

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/extractParam.js

@@ -15,6 +15,7 @@ const ParameterParser_1 = require("../script-runner/ParameterParser");
 const eval_tree_sync_1 = require("../script-runner/eval-tree-sync");
 const LruCache_1 = require("../utils/LruCache");
 const descriptorHelper_1 = require("../descriptorHelper");
+const valueExtractor_1 = require("../rendering/valueExtractor");
 /**
  * Extract the value of the specified parameter from the given view container state
  * @param state The state of the view container
@@ -159,7 +160,7 @@ function shouldKeep(when, componentState, appContext) {
     if (when === undefined) {
         return true;
     }
-    return extractParam(componentState, when, appContext, true);
+    return (0, valueExtractor_1.asOptionalBoolean)(extractParam(componentState, when, appContext, true));
 }
 /**
  * Resolves props that can either be regular properties or URL resources.

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 });
+}

package/dist/scripts/src/language-server/server-common.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.start = start;
 const vscode_languageserver_1 = require("vscode-languageserver");
 const vscode_languageserver_textdocument_1 = require("vscode-languageserver-textdocument");
-const xmlui_metadata_generated_mjs_1 = __importDefault(require("./xmlui-metadata-generated.mjs"));
+const xmlui_metadata_generated_js_1 = __importDefault(require("./xmlui-metadata-generated.js"));
 const completion_1 = require("./services/completion");
 const hover_1 = require("./services/hover");
 const format_1 = require("./services/format");
 const parser_1 = require("../parsers/xmlui-parser/parser");
 const metadata_utils_1 = require("./services/common/metadata-utils");
 const diagnostic_1 = require("./services/diagnostic");
-const metaByComp = xmlui_metadata_generated_mjs_1.default;
+const metaByComp = xmlui_metadata_generated_js_1.default;
 const metadataProvider = new metadata_utils_1.MetadataProvider(metaByComp);
 function start(connection) {
     // Also include all preview / proposed LSP features.