@kaskad/core 0.0.5 → 0.0.7

package/fesm2022/kaskad-core.mjs

@@ -1,13 +1,13 @@
 export * from '@kaskad/types';
 import { DefinitionStore } from '@kaskad/definition';
 export * from '@kaskad/definition';
-import { isObject, loadTemplates, templateRegistry, unfoldNodeSchema, unfoldComponentDefinitions } from '@kaskad/schema';
+import { unfoldComponentDefinitions, isObject, loadTemplates, templateRegistry, unfoldNodeSchema } from '@kaskad/schema';
 export { loadTemplates, templateRegistry, unfoldComponentDefinitions, unfoldNodeSchema } from '@kaskad/schema';
-import { evaluateNode, FunctionExecutionStateBuilder, FunctionRegistry, wrapImperativeAsReactive } from '@kaskad/eval-tree';
+import { FunctionExecutionStateBuilder, FunctionRegistry, evaluateNode, wrapImperativeAsReactive } from '@kaskad/eval-tree';
 export { FunctionRegistry } from '@kaskad/eval-tree';
 import { ComponentTreeApi, ComponentStore, getComponent, componentTreeConfig } from '@kaskad/component-tree';
 export { ComponentStore, ComponentTreeApi, createRootNode } from '@kaskad/component-tree';
-import { reaction, comparer, runInAction, when, computed, isComputed } from 'mobx';
+import { computed, reaction, comparer, runInAction, when, isComputed } from 'mobx';
 import { log, Delimiters } from '@kaskad/config';
 import { parseFormula } from '@kaskad/formula-parser';
 import { Observable, firstValueFrom } from 'rxjs';
@@ -46,1663 +46,2059 @@ class TemplateLoadingTracker {
 // Export a singleton instance for tracking template loading operations
 const templateLoadingTracker = new TemplateLoadingTracker();
 
-const lowerValue = (astNode) => ({
-    type: 'value',
-    value: astNode.value,
-});
-const lowerReference = (astNode) => ({
-    type: 'function',
-    name: 'get',
-    args: [
-        {
-            type: 'value',
-            value: astNode.name,
-        },
-    ],
-});
-const lowerIdentifier = (astNode) => ({
-    type: 'value',
-    value: astNode.name,
-});
-const lowerArray = (astNode) => ({
-    type: 'array',
-    items: astNode.items.map(lowerFormulaAstNode),
-});
-const lowerObject = (astNode) => ({
-    type: 'object',
-    properties: astNode.properties.map(({ key, value }) => ({
-        key: lowerFormulaAstNode(key),
-        value: lowerFormulaAstNode(value),
-    })),
-});
-const lowerFunction = (astNode) => ({
-    type: 'function',
-    name: astNode.name,
-    args: astNode.args.map(lowerFormulaAstNode),
+function execute$V(_ctx, ms) {
+    return new Promise((resolve) => setTimeout(() => resolve(), ms));
+}
+
+var delay$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    execute: execute$V
 });
-const lowerNot = (astNode) => {
-    if (!astNode.operand) {
-        throw new Error('Invert node must have an item');
-    }
-    return {
-        type: 'function',
-        name: 'not',
-        args: [lowerFormulaAstNode(astNode.operand)],
-    };
-};
-const lowerGroup = (astNode) => lowerFormulaAstNode(astNode.item);
-const lowerTernary = (astNode) => {
-    if (!astNode.thenBranch || !astNode.elseBranch) {
-        throw new Error('Ternary expression must have both then and else branches');
-    }
-    return {
-        type: 'function',
-        name: 'if',
-        args: [
-            lowerFormulaAstNode(astNode.condition),
-            lowerFormulaAstNode(astNode.thenBranch),
-            lowerFormulaAstNode(astNode.elseBranch),
-        ],
-    };
+
+const commands$1 = {
+    delay: delay$1,
 };
-const lowerBinaryOperation = (astNode) => {
-    if (!astNode.right) {
-        throw new Error(`Binary operation "${astNode.type}" must have a right operand`);
-    }
-    return {
-        type: 'function',
-        name: astNode.type,
-        args: [lowerFormulaAstNode(astNode.left), lowerFormulaAstNode(astNode.right)],
-    };
+
+/**
+ * Variadic AND function with short-circuit evaluation.
+ * Stops at the first falsy value.
+ */
+const and = {
+    kind: 'reactive',
+    execute: (args) => {
+        if (args.length === 0) {
+            throw new Error('and requires at least 1 argument');
+        }
+        return computed(() => {
+            const state = new FunctionExecutionStateBuilder();
+            for (const argComputed of args) {
+                const argState = argComputed.get();
+                const earlyReturn = state.checkReady(argState);
+                if (earlyReturn)
+                    return earlyReturn;
+                if (!argState.value) {
+                    return state.success(false);
+                }
+            }
+            return state.success(true);
+        });
+    },
+    signature: '(...unknown) => boolean',
 };
-const astNodeLowerers = {
-    value: (astNode) => lowerValue(astNode),
-    reference: (astNode) => lowerReference(astNode),
-    identifier: (astNode) => lowerIdentifier(astNode),
-    array: (astNode) => lowerArray(astNode),
-    object: (astNode) => lowerObject(astNode),
-    function: (astNode) => lowerFunction(astNode),
-    not: (astNode) => lowerNot(astNode),
-    multiply: (astNode) => lowerBinaryOperation(astNode),
-    divide: (astNode) => lowerBinaryOperation(astNode),
-    plus: (astNode) => lowerBinaryOperation(astNode),
-    minus: (astNode) => lowerBinaryOperation(astNode),
-    eq: (astNode) => lowerBinaryOperation(astNode),
-    neq: (astNode) => lowerBinaryOperation(astNode),
-    gt: (astNode) => lowerBinaryOperation(astNode),
-    lt: (astNode) => lowerBinaryOperation(astNode),
-    gte: (astNode) => lowerBinaryOperation(astNode),
-    lte: (astNode) => lowerBinaryOperation(astNode),
-    group: (astNode) => lowerGroup(astNode),
-    ternary: (astNode) => lowerTernary(astNode),
+
+function execute$U(source, path) {
+    const takeDeep = (source, path) => path.reduce((current, step) => {
+        return current?.[step];
+    }, source);
+    return source.map((element) => takeDeep(element, path));
+}
+const arrayPluck = {
+    kind: 'imperative',
+    execute: execute$U,
+    signature: '(unknown{}[], string[]) => unknown',
 };
-function lowerFormulaAstNode(astNode) {
-    const lowerer = astNodeLowerers[astNode.type];
-    if (lowerer) {
-        return lowerer(astNode);
-    }
-    throw new Error(`Unsupported Formula AST node type: ${astNode.type}`);
+
+function execute$T(value, index) {
+    return value[index];
 }
+const at = {
+    kind: 'imperative',
+    execute: execute$T,
+    signature: '(unknown[], number) => unknown',
+};
 
-function lowerFormula(formula) {
-    let formulaAst;
-    try {
-        formulaAst = parseFormula(formula);
-    }
-    catch (e) {
-        log.trace(e);
-        return { type: 'value', value: null };
-    }
-    return lowerFormulaAstNode(formulaAst);
+function execute$S(value) {
+    return Boolean(value);
 }
+const bool = {
+    kind: 'imperative',
+    execute: execute$S,
+    signature: '(unknown) => boolean',
+};
 
-function bindArray(node, component, cfg) {
-    const { componentSelector, valueProp } = cfg;
-    const evalNode = lowerFormula(`propArray('${componentSelector}', '${valueProp}')`);
-    if (!node.position.componentId) {
-        throw new Error('Node does not have a component context');
-    }
-    const { computed, disposers } = evaluateNode(evalNode, {
-        componentId: node.position.componentId,
-    });
-    node.disposers.push(...disposers);
-    const disposer = reaction(() => [
-        node.extractedValue,
-        ComponentTreeApi.findComponentsIds(component.id, componentSelector),
-        computed.get(),
-    ], ([value, componentsIds, evalState], prev) => {
-        let newValue;
-        if (!prev) {
-            // first run
-            if (value && value.length > 0) {
-                newValue = [...value];
-            }
-            else {
-                newValue = evalState.value;
-            }
-        }
-        else {
-            if (!comparer.structural(value, prev[0])) {
-                // console.log('100', JSON.stringify(value), JSON.stringify(prev[0]));
-                newValue = value ? [...value] : [];
-            }
-            else {
-                // console.log('200');
-                newValue = [...evalState.value];
-                if (value && evalState.value.length > prev[2].value.length) {
-                    newValue = [...value];
-                }
-            }
-        }
-        // console.log(JSON.stringify(newValue));
-        const components = componentsIds.map((id) => ComponentStore.getInstance().getComponentOrThrow(id));
-        runInAction(() => {
-            const store = ComponentStore.getInstance();
-            store.setNodeRawSchema(node, newValue);
-            for (let i = 0; i < components.length; i++) {
-                const c = components[i];
-                const value = newValue[i];
-                const valueNode = c.getNode(valueProp);
-                store.setNodeRawSchema(valueNode, value);
-            }
-        });
-    }, { fireImmediately: true, equals: comparer.structural });
-    node.disposers.push(disposer);
+function execute$R(value) {
+    return Math.ceil(value);
 }
+const ceil = {
+    kind: 'imperative',
+    execute: execute$R,
+    signature: '(number) => number',
+};
 
-function bindMirror(component, node, cfg) {
-    const store = ComponentStore.getInstance();
-    let targetNode;
-    try {
-        // For Facade components, start lookup from parent. This handles inline bindings
-        // on template contract variables, where the Facade has a variable with the same
-        // name - we need to find the parent's variable, not self.
-        const lookupFromId = component.componentType === 'sys.Facade' ? component.position.componentId : component.id;
-        if (!lookupFromId) {
-            log.error(`Cannot activate mirror binding: no parent component for selector "${cfg.selector}"`);
-            return;
-        }
-        targetNode = store.getNode(lookupFromId, cfg.selector);
-    }
-    catch (error) {
-        log.error(`Cannot activate mirror binding: ${error}`);
-        return;
-    }
-    const disposer = reaction(() => [targetNode.extractedValue, node.extractedValue], (curr, prev) => {
-        const [targetValue, sourceValue = null] = curr;
-        const [prevTargetValue, prevSourceValue] = prev || [null, null];
-        if (comparer.structural(targetValue, sourceValue)) {
-            return;
-        }
-        if (!prev && targetValue !== null) {
-            store.setNodeRawSchema(node, targetValue);
-            return;
-        }
-        if (targetValue !== prevTargetValue) {
-            store.setNodeRawSchema(node, targetValue);
-            return;
-        }
-        if (sourceValue !== prevSourceValue) {
-            store.setNodeRawSchema(targetNode, sourceValue);
-        }
-    }, { fireImmediately: true });
-    node.disposers.push(disposer);
+function execute$Q(strings, separator = '') {
+    return strings.join(separator);
 }
+const concat = {
+    kind: 'imperative',
+    execute: execute$Q,
+    signature: '(unknown[], string) => string',
+};
 
-function bindObject(node, component, cfg) {
-    const { componentSelector, keyProp, valueProp } = cfg;
-    const evalNode = lowerFormula(`propObject('${componentSelector}', '${keyProp}', '${valueProp}')`);
-    if (!node.position.componentId) {
-        throw new Error('Node does not have a component context');
-    }
-    const { computed, disposers } = evaluateNode(evalNode, {
-        componentId: node.position.componentId,
-    });
-    node.disposers.push(...disposers);
-    let preservedNodeValue = {};
-    const disposer = reaction(() => [
-        node.extractedValue,
-        ComponentTreeApi.findComponentsIds(component.id, componentSelector),
-        computed.get(),
-    ], ([nodeValue, componentsIds, evalState], prev) => {
-        const currentValue = nodeValue || {};
-        if (comparer.structural(evalState.value, currentValue)) {
-            return;
-        }
-        const firstRun = !prev;
-        const nodeChanged = !firstRun && !comparer.structural(nodeValue, prev[0]);
-        if (firstRun || nodeChanged) {
-            preservedNodeValue = currentValue;
-        }
-        else {
-            preservedNodeValue = shallowMerge(preservedNodeValue, evalState.value);
-        }
-        let componentValues;
-        if (firstRun) {
-            const hasInitialValue = Object.keys(currentValue).length > 0;
-            componentValues = hasInitialValue
-                ? syncNodeValueAndComponents$1(currentValue, evalState)
-                : { ...evalState.value };
-        }
-        else if (nodeChanged) {
-            componentValues = syncNodeValueAndComponents$1(currentValue, evalState);
-        }
-        else {
-            componentValues = handleComponentsChanged(evalState, preservedNodeValue);
-        }
-        runInAction(() => {
-            const store = ComponentStore.getInstance();
-            store.setNodeRawSchema(node, componentValues);
-            updateComponentsValues$1(componentsIds, componentValues, keyProp, valueProp);
-        });
-    }, { fireImmediately: true, equals: comparer.structural });
-    node.disposers.push(disposer);
+const execute$P = (value) => {
+    return new Promise((resolve) => setTimeout(() => resolve(value), 500));
+};
+const delay = {
+    kind: 'imperative',
+    execute: execute$P,
+    signature: '(unknown) => unknown',
+};
+
+function execute$O(num1, num2) {
+    return num1 / num2;
 }
-function handleComponentsChanged(evalState, preservedNodeValue) {
-    const componentValues = {};
-    for (const [inputKey, currentValue] of Object.entries(evalState.value)) {
-        const preservedValue = preservedNodeValue[inputKey];
-        if (isObject(currentValue) && isObject(preservedValue)) {
-            componentValues[inputKey] = mergePreservedWithChildGroup(currentValue, preservedValue);
-            continue;
-        }
-        componentValues[inputKey] = currentValue ?? preservedValue;
-    }
-    return componentValues;
+const divide = {
+    kind: 'imperative',
+    execute: execute$O,
+    signature: '(number, number) => number',
+};
+
+function execute$N(items) {
+    return items.length === 0;
 }
-function mergePreservedWithChildGroup(currentValue, preservedValue) {
-    const merged = { ...currentValue };
-    for (const [key, value] of Object.entries(currentValue)) {
-        if (value !== null) {
-            continue;
-        }
-        if (preservedValue[key] === undefined || preservedValue[key] === null) {
-            continue;
-        }
-        merged[key] = preservedValue[key];
-    }
-    return merged;
+const empty = {
+    kind: 'imperative',
+    execute: execute$N,
+    signature: '(unknown[]) => boolean',
+};
+
+function execute$M(object) {
+    return Object.keys(object).length === 0;
 }
-function syncNodeValueAndComponents$1(nodeValue, evalState) {
-    const componentValues = {};
-    for (const fieldKey of Object.keys(evalState.value)) {
-        if (!(fieldKey in nodeValue)) {
-            componentValues[fieldKey] = null;
-            continue;
-        }
-        componentValues[fieldKey] = nodeValue[fieldKey];
-    }
-    return componentValues;
+const emptyObject = {
+    kind: 'imperative',
+    execute: execute$M,
+    signature: '(unknown{}) => boolean',
+};
+
+const execute$L = (a, b) => a === b;
+const eq = {
+    kind: 'imperative',
+    execute: execute$L,
+    signature: '(unknown, unknown) => boolean',
+};
+
+function execute$K(value1, value2) {
+    return value1 === value2;
 }
-function updateComponentsValues$1(componentsIds, componentValues, keyProp, valueProp) {
-    const store = ComponentStore.getInstance();
-    const components = componentsIds.map((id) => store.getComponentOrThrow(id));
-    for (const cmp of components) {
-        const key = cmp.getNodeValue(keyProp);
-        if (!key)
-            continue;
-        const value = componentValues[key];
-        const valueNode = cmp.getNode(valueProp);
-        store.setNodeRawSchema(valueNode, value);
+const equal = {
+    kind: 'imperative',
+    execute: execute$K,
+    signature: '(unknown, unknown) => boolean',
+};
+
+function execute$J(items) {
+    return items.every((item) => !!item);
+}
+const every = {
+    kind: 'imperative',
+    execute: execute$J,
+    signature: '(unknown[]) => boolean',
+};
+
+function execute$I(array, allowedValues) {
+    if (!allowedValues) {
+        return [];
     }
+    if (allowedValues instanceof Set) {
+        return array.filter((item) => allowedValues.has(item));
+    }
+    return array.filter((item) => allowedValues.includes(item));
 }
-function shallowMerge(target, source) {
-    const merged = { ...target };
-    for (const [key, value] of Object.entries(source)) {
-        if (value === null || value === undefined) {
-            continue;
-        }
-        if (isObject(value) && isObject(merged[key])) {
-            merged[key] = { ...merged[key], ...value };
-            continue;
+const filterIn = {
+    kind: 'imperative',
+    execute: execute$I,
+    signature: '(unknown[], unknown[]) => unknown[]',
+};
+
+function execute$H(collection, key, values) {
+    return values
+        .map((value) => collection.find((element) => element[key] === value))
+        .filter((item) => item !== undefined);
+}
+const findAllBy = {
+    kind: 'imperative',
+    execute: execute$H,
+    signature: '(unknown{}[], string, unknown[]) => unknown{}[]',
+};
+
+function execute$G(collection, key, value) {
+    const found = collection.find((element) => element[key] === value);
+    return found || null;
+}
+const findBy = {
+    kind: 'imperative',
+    execute: execute$G,
+    signature: '(unknown{}[], string, unknown) => unknown',
+};
+
+function execute$F(array) {
+    return array.flat();
+}
+const flatten = {
+    kind: 'imperative',
+    execute: execute$F,
+    signature: '(unknown[][]) => unknown[]',
+};
+
+function execute$E(value) {
+    return Math.floor(value);
+}
+const floor = {
+    kind: 'imperative',
+    execute: execute$E,
+    signature: '(number) => number',
+};
+
+const execute$D = (a, b) => a > b;
+const gt = {
+    kind: 'imperative',
+    execute: execute$D,
+    signature: '(number, number) => boolean',
+};
+
+const execute$C = (a, b) => a >= b;
+const gte = {
+    kind: 'imperative',
+    execute: execute$C,
+    signature: '(number, number) => boolean',
+};
+
+/**
+ * Conditional branching with lazy evaluation.
+ * Only evaluates the selected branch.
+ */
+const ifFn = {
+    kind: 'reactive',
+    execute: (args) => {
+        if (args.length !== 3) {
+            throw new Error('if requires exactly 3 arguments: condition, trueValue, falseValue');
         }
-        merged[key] = value;
+        const [conditionComputed, trueComputed, falseComputed] = args;
+        return computed(() => {
+            const state = new FunctionExecutionStateBuilder();
+            const conditionState = conditionComputed.get();
+            const earlyReturn = state.checkReady(conditionState);
+            if (earlyReturn)
+                return earlyReturn;
+            const branchState = conditionState.value ? trueComputed.get() : falseComputed.get();
+            const branchEarlyReturn = state.checkReady(branchState);
+            if (branchEarlyReturn)
+                return branchEarlyReturn;
+            return state.success(branchState.value);
+        });
+    },
+    signature: '(unknown, unknown, unknown) => unknown',
+};
+
+function execute$B(collection, value) {
+    if (collection instanceof Set) {
+        return collection.has(value);
     }
-    return merged;
+    return collection.includes(value);
 }
+const inFn = {
+    kind: 'imperative',
+    execute: execute$B,
+    signature: '(unknown[], unknown) => boolean',
+};
 
-function bindSelection(node, component, cfg) {
-    const { componentSelector, keyProp, valueProp } = cfg;
-    const evalNode = lowerFormula(`propObject('${componentSelector}', '${keyProp}', '${valueProp}')`);
-    if (!node.position.componentId) {
-        throw new Error('Node does not have a component context');
+function replacer(_key, value) {
+    if (value instanceof Set) {
+        return Array.from(value);
     }
-    const { computed, disposers } = evaluateNode(evalNode, {
-        componentId: node.position.componentId,
-    });
-    node.disposers.push(...disposers);
-    let preservedNodeValue = null;
-    const disposer = reaction(() => [
-        node.extractedValue,
-        ComponentTreeApi.findComponentsIds(component.id, componentSelector),
-        computed.get(),
-    ], ([nodeValue, componentsIds, evalState], prev) => {
-        const currentValue = toObject(nodeValue);
-        const firstRun = !prev;
-        const nodeChanged = !firstRun && !comparer.structural(nodeValue, prev[0]);
-        if (firstRun || nodeChanged) {
-            preservedNodeValue = currentValue;
-        }
-        if (comparer.structural(evalState.value, currentValue)) {
-            return;
-        }
-        let componentValues;
-        if (firstRun) {
-            const initialNodeValue = Object.keys(currentValue).length > 0;
-            componentValues = initialNodeValue
-                ? syncNodeValueAndComponents(currentValue, evalState, preservedNodeValue)
-                : { ...evalState.value };
+    return value;
+}
+function execute$A(arg) {
+    return JSON.stringify(arg, replacer);
+}
+const json = {
+    kind: 'imperative',
+    execute: execute$A,
+    signature: '(unknown) => string',
+};
+
+function execute$z(object) {
+    return Object.keys(object);
+}
+const keys = {
+    kind: 'imperative',
+    execute: execute$z,
+    signature: '(unknown{}) => string[]',
+};
+
+function execute$y(value) {
+    return value.length;
+}
+const length = {
+    kind: 'imperative',
+    execute: execute$y,
+    signature: '(unknown[]) => number',
+};
+
+const execute$x = (a, b) => a < b;
+const lt = {
+    kind: 'imperative',
+    execute: execute$x,
+    signature: '(number, number) => boolean',
+};
+
+const execute$w = (a, b) => a <= b;
+const lte = {
+    kind: 'imperative',
+    execute: execute$w,
+    signature: '(number, number) => boolean',
+};
+
+function execute$v(num, delta) {
+    return num - delta;
+}
+const minus = {
+    kind: 'imperative',
+    execute: execute$v,
+    signature: '(number, number) => number',
+};
+
+function execute$u(a, b) {
+    return a % b;
+}
+const modulo = {
+    kind: 'imperative',
+    execute: execute$u,
+    signature: '(number, number) => number',
+};
+
+function execute$t(num1, num2) {
+    return num1 * num2;
+}
+const multiply = {
+    kind: 'imperative',
+    execute: execute$t,
+    signature: '(number, number) => number',
+};
+
+function execute$s(num) {
+    return -num;
+}
+const negate = {
+    kind: 'imperative',
+    execute: execute$s,
+    signature: '(number) => number',
+};
+
+const execute$r = (a, b) => a !== b;
+const neq = {
+    kind: 'imperative',
+    execute: execute$r,
+    signature: '(unknown, unknown) => boolean',
+};
+
+function execute$q(value) {
+    return !value;
+}
+const not = {
+    kind: 'imperative',
+    execute: execute$q,
+    signature: '(unknown) => boolean',
+};
+
+/**
+ * Null coalescing with lazy evaluation.
+ * Returns left if non-null, otherwise evaluates and returns right.
+ */
+const nullCoalesce = {
+    kind: 'reactive',
+    execute: (args) => {
+        if (args.length !== 2) {
+            throw new Error('nullCoalesce requires exactly 2 arguments');
         }
-        else if (nodeChanged) {
-            componentValues = syncNodeValueAndComponents(currentValue, evalState, preservedNodeValue);
+        const [leftComputed, rightComputed] = args;
+        return computed(() => {
+            const state = new FunctionExecutionStateBuilder();
+            const leftState = leftComputed.get();
+            const earlyReturn = state.checkReady(leftState);
+            if (earlyReturn)
+                return earlyReturn;
+            if (leftState.value != null) {
+                return state.success(leftState.value);
+            }
+            const rightState = rightComputed.get();
+            const rightEarlyReturn = state.checkReady(rightState);
+            if (rightEarlyReturn)
+                return rightEarlyReturn;
+            return state.success(rightState.value);
+        });
+    },
+    signature: '(unknown, unknown) => unknown',
+};
+
+function execute$p(value) {
+    const number = Number(value);
+    if (Number.isNaN(number)) {
+        throw new Error(`Cannot convert value ${value} to number`);
+    }
+    return number;
+}
+const number = {
+    kind: 'imperative',
+    execute: execute$p,
+    signature: '(unknown) => number',
+};
+
+function execute$o(parts) {
+    const result = {};
+    for (let i = 0; i < parts.length; i += 2) {
+        const key = parts[i];
+        if (typeof key !== 'string') {
+            throw new Error(`Invalid key type: ${typeof key}. Expected string`);
         }
-        else {
-            componentValues = syncComponentsAndPreserved(evalState, preservedNodeValue, currentValue);
+        result[key] = parts[i + 1];
+    }
+    return result;
+}
+const objectFn = {
+    kind: 'imperative',
+    execute: execute$o,
+    signature: '(unknown[]) => unknown{}',
+};
+
+/**
+ * Variadic OR function with short-circuit evaluation.
+ * Stops at the first truthy value.
+ */
+const or = {
+    kind: 'reactive',
+    execute: (args) => {
+        if (args.length === 0) {
+            throw new Error('or requires at least 1 argument');
         }
-        const selectionValue = toSelectionSet(componentValues);
-        runInAction(() => {
-            const store = ComponentStore.getInstance();
-            store.setNodeRawSchema(node, selectionValue);
-            updateComponentsValues(componentsIds, componentValues, keyProp, valueProp);
+        return computed(() => {
+            const state = new FunctionExecutionStateBuilder();
+            for (const argComputed of args) {
+                const argState = argComputed.get();
+                const earlyReturn = state.checkReady(argState);
+                if (earlyReturn)
+                    return earlyReturn;
+                if (argState.value) {
+                    return state.success(true);
+                }
+            }
+            return state.success(false);
         });
-    }, { fireImmediately: true, equals: comparer.structural });
-    node.disposers.push(disposer);
+    },
+    signature: '(...unknown) => boolean',
+};
+
+function execute$n(source, path) {
+    return path.reduce((current, step) => {
+        return current?.[step];
+    }, source);
 }
-function syncNodeValueAndComponents(nodeValue, evalState, preservedNodeValue) {
-    const componentValues = { ...nodeValue };
-    // Keep keys in preservedNodeValue to handle async component loading
-    for (const key of Object.keys(componentValues)) {
-        if (!(key in evalState.value) && (!preservedNodeValue || !(key in preservedNodeValue))) {
-            delete componentValues[key];
+const pluck = {
+    kind: 'imperative',
+    execute: execute$n,
+    signature: '(unknown{}, string[]) => unknown',
+};
+
+function execute$m(a, b) {
+    return a + b;
+}
+const plus = {
+    kind: 'imperative',
+    execute: execute$m,
+    signature: '(unknown, unknown) => unknown',
+};
+
+function execute$l(value, precision = 0) {
+    const multiplier = Math.pow(10, precision);
+    return Math.round(value * multiplier) / multiplier;
+}
+const round = {
+    kind: 'imperative',
+    execute: execute$l,
+    signature: '(number, number) => number',
+};
+
+function execute$k(value, start, end) {
+    return value.slice(start, end);
+}
+const slice = {
+    kind: 'imperative',
+    execute: execute$k,
+    signature: '(unknown[], number, number) => unknown[]',
+};
+
+function execute$j(items) {
+    return items.some((item) => !!item);
+}
+const some = {
+    kind: 'imperative',
+    execute: execute$j,
+    signature: '(unknown[]) => boolean',
+};
+
+function execute$i(value) {
+    return String(value);
+}
+const string = {
+    kind: 'imperative',
+    execute: execute$i,
+    signature: '(unknown) => string',
+};
+
+/**
+ * Switch statement with lazy case evaluation.
+ * Supports array mode (legacy) and variadic mode.
+ */
+const switchFn = {
+    kind: 'reactive',
+    execute: (args) => {
+        if (args.length < 2) {
+            throw new Error('switch requires at least 2 arguments: value and default');
         }
+        const valueComputed = args[0];
+        return computed(() => {
+            const state = new FunctionExecutionStateBuilder();
+            const valueState = valueComputed.get();
+            const earlyReturn = state.checkReady(valueState);
+            if (earlyReturn)
+                return earlyReturn;
+            const value = valueState.value;
+            if (args.length === 3) {
+                const casesState = args[1].get();
+                const defaultState = args[2].get();
+                const casesEarlyReturn = state.checkReady(casesState);
+                if (casesEarlyReturn)
+                    return casesEarlyReturn;
+                const defaultEarlyReturn = state.checkReady(defaultState);
+                if (defaultEarlyReturn)
+                    return defaultEarlyReturn;
+                const cases = casesState.value;
+                if (Array.isArray(cases)) {
+                    if (cases.length % 2 !== 0) {
+                        throw new Error('Cases array should have even number of elements');
+                    }
+                    const matchIndex = cases.findIndex((caseValue, index) => index % 2 === 0 && caseValue === value);
+                    const returnValue = matchIndex >= 0 ? cases[matchIndex + 1] : defaultState.value;
+                    return state.success(returnValue);
+                }
+            }
+            const defaultComputed = args[args.length - 1];
+            const caseArgs = args.slice(1, -1);
+            if (caseArgs.length % 2 !== 0) {
+                throw new Error('switch requires an even number of case arguments (key-value pairs)');
+            }
+            for (let i = 0; i < caseArgs.length; i += 2) {
+                const caseKeyComputed = caseArgs[i];
+                const caseValueComputed = caseArgs[i + 1];
+                const caseKeyState = caseKeyComputed.get();
+                const keyEarlyReturn = state.checkReady(caseKeyState);
+                if (keyEarlyReturn)
+                    return keyEarlyReturn;
+                const caseKey = caseKeyState.value;
+                if (caseKey === value) {
+                    const caseValueState = caseValueComputed.get();
+                    const valueEarlyReturn = state.checkReady(caseValueState);
+                    if (valueEarlyReturn)
+                        return valueEarlyReturn;
+                    return state.success(caseValueState.value);
+                }
+            }
+            const defaultState = defaultComputed.get();
+            const defaultEarlyReturn = state.checkReady(defaultState);
+            if (defaultEarlyReturn)
+                return defaultEarlyReturn;
+            return state.success(defaultState.value);
+        });
+    },
+    signature: '(...unknown) => unknown',
+};
+
+function execute$h(value) {
+    return value.toLowerCase();
+}
+const toLowerCase = {
+    kind: 'imperative',
+    execute: execute$h,
+    signature: '(string) => string',
+};
+
+function execute$g(value) {
+    return value.toUpperCase();
+}
+const toUpperCase = {
+    kind: 'imperative',
+    execute: execute$g,
+    signature: '(string) => string',
+};
+
+/**
+ * Shared utility formula functions.
+ *
+ * Control flow functions use reactive implementations with lazy evaluation:
+ * - `if`: Conditional evaluation (3 args: condition, trueValue, falseValue)
+ * - `and`, `or`: Variadic logical operators with short-circuit evaluation
+ * - `switch`: Variadic pattern matching with lazy case evaluation
+ * - `some`, `every`: Array element checkers (imperative, not lazy)
+ */
+const formulaFunctions$2 = {
+    // Collection functions
+    findBy,
+    findAllBy,
+    at,
+    not,
+    equal,
+    // Array element checkers (imperative)
+    some,
+    every,
+    // Control flow (reactive with lazy evaluation)
+    if: ifFn,
+    and,
+    or,
+    nullCoalesce,
+    switch: switchFn,
+    // Utilities
+    in: inFn,
+    object: objectFn,
+    bool,
+    length,
+    empty,
+    concat,
+    pluck,
+    flatten,
+    json,
+    minus,
+    modulo,
+    negate,
+    plus,
+    divide,
+    multiply,
+    emptyObject,
+    arrayPluck,
+    string,
+    number,
+    delay,
+    keys,
+    toUpperCase,
+    toLowerCase,
+    ceil,
+    floor,
+    round,
+    slice,
+    filterIn,
+    eq,
+    neq,
+    gt,
+    lt,
+    gte,
+    lte,
+};
+
+const common = {
+    commands: commands$1,
+    functions: formulaFunctions$2,
+};
+
+function registerPlugin(plugin) {
+    const defStore = DefinitionStore.getInstance();
+    // setup() may register shapes/variant shapes needed by definitions
+    if (plugin.setup) {
+        plugin.setup();
     }
-    for (const key of Object.keys(evalState.value)) {
-        if (!(key in componentValues)) {
-            componentValues[key] = false;
+    // Shapes must be registered before definitions (definitions reference shape types)
+    if (plugin.shapes) {
+        for (const [shapeType, properties] of Object.entries(plugin.shapes)) {
+            defStore.setShape(shapeType, properties);
         }
     }
-    return componentValues;
-}
-function syncComponentsAndPreserved(evalState, preservedNodeValue, currentValue) {
-    const componentValues = { ...evalState.value };
-    if (preservedNodeValue) {
-        for (const key of Object.keys(evalState.value)) {
-            if (evalState.value[key] === null) {
-                componentValues[key] = preservedNodeValue[key] ?? false;
-            }
-        }
-        // Preserve selection for components being recreated
-        for (const key of Object.keys(preservedNodeValue)) {
-            if (!(key in componentValues)) {
-                componentValues[key] = preservedNodeValue[key];
-            }
-        }
+    if (plugin.definitions) {
+        defStore.setComponents(unfoldComponentDefinitions(plugin.definitions));
     }
-    // Include user changes not yet in preservedNodeValue
-    for (const key of Object.keys(currentValue)) {
-        if (!(key in componentValues)) {
-            componentValues[key] = currentValue[key];
-        }
+    if (plugin.commands) {
+        defStore.setCommands(plugin.commands);
     }
-    return componentValues;
-}
-function updateComponentsValues(componentsIds, componentValues, keyProp, valueProp) {
-    const store = ComponentStore.getInstance();
-    const components = componentsIds.map((id) => store.getComponentOrThrow(id));
-    for (const cmp of components) {
-        const key = cmp.getNodeValue(keyProp);
-        if (!key)
-            continue;
-        const value = componentValues[key];
-        const valueNode = cmp.getNode(valueProp);
-        store.setNodeRawSchema(valueNode, value);
+    if (plugin.functions) {
+        FunctionRegistry.getInstance().setFunctions(plugin.functions);
     }
 }
-function toSelectionSet(componentValues) {
-    return new Set(Object.entries(componentValues)
-        .filter(([, fieldValue]) => !!fieldValue)
-        .map(([key]) => key));
-}
-function toObject(selectionSet) {
-    return Object.fromEntries(Array.from(selectionSet || []).map((key) => [key, true]));
-}
-
-async function addBinding(node, extra = false) {
-    await when(() => !node.evaluating);
-    const store = ComponentStore.getInstance();
-    if (!node.position.componentId) {
-        throw new Error('Cannot add binding without component context');
-    }
-    const component = store.getComponent(node.position.componentId);
-    if (!component) {
-        return;
-    }
-    const bindingSchema = extra ? node.extraBinding : node.bindingSchema;
-    if (!bindingSchema) {
-        return;
-    }
-    const valueType = node.valueType;
-    switch (bindingSchema.bindingType) {
-        case 'object':
-            bindObject(node, component, {
-                componentSelector: bindingSchema.componentSelector,
-                keyProp: bindingSchema.mapping.key,
-                valueProp: bindingSchema.mapping.value,
-                valueType,
-            });
-            break;
-        case 'selection':
-            bindSelection(node, component, {
-                componentSelector: bindingSchema.componentSelector,
-                keyProp: bindingSchema.mapping.key,
-                valueProp: bindingSchema.mapping.selected,
-                valueType,
-            });
-            break;
-        case 'array':
-            bindArray(node, component, {
-                componentSelector: bindingSchema.componentSelector,
-                valueProp: bindingSchema.mapping.value,
-                valueType,
-            });
-            break;
-        case 'mirror':
-            bindMirror(component, node, bindingSchema);
-            break;
+function registerPlugins(...plugins) {
+    for (const plugin of plugins) {
+        registerPlugin(plugin);
     }
 }
 
-const debugName = (position, thing) => {
-    return [position.componentId, position.path.join(Delimiters.NodePath), thing].join('|');
-};
-const componentInstanceMap = new Map();
-
-const lowerSimpleValue = (schema) => ({
+const lowerValue = (astNode) => ({
     type: 'value',
-    value: schema.value,
+    value: astNode.value,
 });
-const lowerObjectOrMap = (schema) => {
-    if (!schema.value) {
-        return { type: 'value', value: null };
-    }
-    const entries = Object.entries(schema.value);
-    return {
-        type: 'object',
-        properties: entries.map(([key, value]) => ({
-            key: { type: 'value', value: key },
-            value: lowerSchema(value),
-        })),
-    };
-};
-const lowerArrayOrSet = (schema) => {
-    if (!schema.value) {
-        throw new Error(`${schema.valueType.type} schema without value`);
-    }
-    return {
-        type: 'array',
-        items: schema.value.map((item) => lowerSchema(item)),
-    };
-};
-const lowerShape = () => {
-    throw new Error('Shape lowering not implemented');
-};
-const lowerVariantShape = (schema) => {
-    if (!schema.value) {
-        return { type: 'value', value: null };
+const lowerReference = (astNode) => ({
+    type: 'function',
+    name: 'get',
+    args: [
+        {
+            type: 'value',
+            value: astNode.name,
+        },
+    ],
+});
+const lowerIdentifier = (astNode) => ({
+    type: 'value',
+    value: astNode.name,
+});
+const lowerArray = (astNode) => ({
+    type: 'array',
+    items: astNode.items.map(lowerFormulaAstNode),
+});
+const lowerObject = (astNode) => ({
+    type: 'object',
+    properties: astNode.properties.map(({ key, value }) => ({
+        key: lowerFormulaAstNode(key),
+        value: lowerFormulaAstNode(value),
+    })),
+});
+const lowerFunction = (astNode) => ({
+    type: 'function',
+    name: astNode.name,
+    args: astNode.args.map(lowerFormulaAstNode),
+});
+const lowerNot = (astNode) => {
+    if (!astNode.operand) {
+        throw new Error('Invert node must have an item');
     }
-    const variantShapeValue = schema.value;
-    const variantField = `${schema.valueType.shapeType}Type`;
-    const entries = Object.entries(variantShapeValue);
-    const properties = entries
-        .filter(([key]) => key !== 'kind')
-        .map(([key, value]) => ({
-        key: { type: 'value', value: key },
-        value: typeof value === 'string' ? { type: 'value', value } : lowerSchema(value),
-    }));
-    properties.push({
-        key: { type: 'value', value: variantField },
-        value: { type: 'value', value: variantShapeValue['kind'] },
-    });
     return {
-        type: 'object',
-        properties,
+        type: 'function',
+        name: 'not',
+        args: [lowerFormulaAstNode(astNode.operand)],
     };
 };
-const schemaLowerers = {
-    string: lowerSimpleValue,
-    number: lowerSimpleValue,
-    boolean: lowerSimpleValue,
-    unknown: lowerSimpleValue,
-    component: lowerSimpleValue,
-    command: lowerSimpleValue,
-    componentSchema: lowerSimpleValue,
-    object: lowerObjectOrMap,
-    map: lowerObjectOrMap,
-    array: lowerArrayOrSet,
-    set: lowerArrayOrSet,
-    shape: lowerShape,
-    variantShape: lowerVariantShape,
-};
-function lowerSchema(schema) {
-    // If schema has a computation, lower it
-    if (schema.computation) {
-        return lowerComputationSchema(schema.computation);
-    }
-    // Otherwise lower the value based on valueType
-    const lowerer = schemaLowerers[schema.valueType.type];
-    if (lowerer) {
-        return lowerer(schema);
+const lowerNegate = (astNode) => {
+    if (!astNode.operand) {
+        throw new Error('Negate node must have an operand');
     }
-    throw new Error(`Unsupported value type: ${schema.valueType.type}`);
-}
-
-function lowerForLoop(forComputation) {
-    const dimensionsNode = {
-        type: 'array',
-        items: forComputation.dimensions.map((dimension) => {
-            // Extract trackBy expression to be evaluated in RefSpace context where $item is available
-            let trackByExpression = null;
-            if (dimension.trackBy.computation && dimension.trackBy.computation.computationType === 'formula') {
-                trackByExpression = `=${dimension.trackBy.computation.formula}`;
-            }
-            else if (dimension.trackBy.value !== null) {
-                trackByExpression = dimension.trackBy.value;
-            }
-            return {
-                type: 'object',
-                properties: [
-                    { key: { type: 'value', value: 'items' }, value: lowerSchema(dimension.items) },
-                    { key: { type: 'value', value: 'itemsType' }, value: { type: 'value', value: dimension.itemsType } },
-                    { key: { type: 'value', value: 'item' }, value: lowerSchema(dimension.item) },
-                    { key: { type: 'value', value: 'index' }, value: lowerSchema(dimension.index) },
-                    { key: { type: 'value', value: 'first' }, value: lowerSchema(dimension.first) },
-                    { key: { type: 'value', value: 'last' }, value: lowerSchema(dimension.last) },
-                    { key: { type: 'value', value: 'trackBy' }, value: { type: 'value', value: trackByExpression } },
-                ],
-            };
-        }),
-    };
-    const yieldNode = lowerSchema(forComputation.yield);
     return {
         type: 'function',
-        name: 'repeat',
-        args: [dimensionsNode, yieldNode],
-    };
-}
-function lowerTemplate(templateComputation) {
-    return {
-        type: 'value',
-        value: templateComputation,
+        name: 'negate',
+        args: [lowerFormulaAstNode(astNode.operand)],
     };
-}
-function lowerIfStatement(ifNode) {
+};
+const lowerGroup = (astNode) => lowerFormulaAstNode(astNode.item);
+const lowerTernary = (astNode) => {
+    if (!astNode.thenBranch || !astNode.elseBranch) {
+        throw new Error('Ternary expression must have both then and else branches');
+    }
     return {
         type: 'function',
         name: 'if',
-        args: [lowerSchema(ifNode.if), lowerSchema(ifNode.then), lowerSchema(ifNode.else)],
+        args: [
+            lowerFormulaAstNode(astNode.condition),
+            lowerFormulaAstNode(astNode.thenBranch),
+            lowerFormulaAstNode(astNode.elseBranch),
+        ],
     };
-}
-function lowerSwitch(switchComputation) {
-    // Lower the source
-    const sourceEvalNode = lowerSchema(switchComputation.source);
-    // Build cases array as flat array: [value1, result1, value2, result2, ...]
-    // Extract .value from ComponentSchemaNodeSchema to get the actual component schema
-    const casesArrayItems = [];
-    for (const caseItem of switchComputation.cases) {
-        casesArrayItems.push({ type: 'value', value: caseItem.equals });
-        // caseItem.then is a ComponentSchemaNodeSchema, extract its .value property
-        casesArrayItems.push({ type: 'value', value: caseItem.then.value });
+};
+const lowerBinaryOperation = (astNode) => {
+    if (!astNode.right) {
+        throw new Error(`Binary operation "${astNode.type}" must have a right operand`);
     }
-    const casesArrayNode = {
-        type: 'array',
-        items: casesArrayItems,
-    };
-    // Lower the default value - extract .value from ComponentSchemaNodeSchema
-    const defaultNode = { type: 'value', value: switchComputation.default.value };
     return {
         type: 'function',
-        name: 'switch',
-        args: [sourceEvalNode, casesArrayNode, defaultNode],
+        name: astNode.type,
+        args: [lowerFormulaAstNode(astNode.left), lowerFormulaAstNode(astNode.right)],
     };
-}
-const computationLowerers = {
-    formula: (schema) => lowerFormula(schema.formula),
-    for: (schema) => lowerForLoop(schema),
-    template: (schema) => lowerTemplate(schema),
-    if: (schema) => lowerIfStatement(schema),
-    switch: (schema) => lowerSwitch(schema),
 };
-function lowerComputationSchema(computationSchema) {
-    const lowerer = computationLowerers[computationSchema.computationType];
+const astNodeLowerers = {
+    value: (astNode) => lowerValue(astNode),
+    reference: (astNode) => lowerReference(astNode),
+    identifier: (astNode) => lowerIdentifier(astNode),
+    array: (astNode) => lowerArray(astNode),
+    object: (astNode) => lowerObject(astNode),
+    function: (astNode) => lowerFunction(astNode),
+    not: (astNode) => lowerNot(astNode),
+    negate: (astNode) => lowerNegate(astNode),
+    multiply: (astNode) => lowerBinaryOperation(astNode),
+    divide: (astNode) => lowerBinaryOperation(astNode),
+    modulo: (astNode) => lowerBinaryOperation(astNode),
+    plus: (astNode) => lowerBinaryOperation(astNode),
+    minus: (astNode) => lowerBinaryOperation(astNode),
+    eq: (astNode) => lowerBinaryOperation(astNode),
+    neq: (astNode) => lowerBinaryOperation(astNode),
+    gt: (astNode) => lowerBinaryOperation(astNode),
+    lt: (astNode) => lowerBinaryOperation(astNode),
+    gte: (astNode) => lowerBinaryOperation(astNode),
+    lte: (astNode) => lowerBinaryOperation(astNode),
+    and: (astNode) => lowerBinaryOperation(astNode),
+    or: (astNode) => lowerBinaryOperation(astNode),
+    nullCoalesce: (astNode) => lowerBinaryOperation(astNode),
+    group: (astNode) => lowerGroup(astNode),
+    ternary: (astNode) => lowerTernary(astNode),
+};
+function lowerFormulaAstNode(astNode) {
+    const lowerer = astNodeLowerers[astNode.type];
     if (lowerer) {
-        return lowerer(computationSchema);
+        return lowerer(astNode);
     }
-    throw new Error(`Unsupported computation type: ${computationSchema.computationType}`);
+    throw new Error(`Unsupported Formula AST node type: ${astNode.type}`);
 }
 
-function activateForComputation(node) {
-    const store = ComponentStore.getInstance();
-    const currentFrame = node.computationStack.top;
-    if (!currentFrame) {
-        throw new Error('Cannot activate for computation: no current frame');
+function lowerFormula(formula) {
+    let formulaAst;
+    try {
+        formulaAst = parseFormula(formula);
     }
-    const evalNode = lowerComputationSchema(currentFrame.schema);
+    catch (e) {
+        log.trace(e);
+        return { type: 'value', value: null };
+    }
+    return lowerFormulaAstNode(formulaAst);
+}
+
+function bindArray(node, component, cfg) {
+    const { componentSelector, valueProp } = cfg;
+    const evalNode = lowerFormula(`propArray('${componentSelector}', '${valueProp}')`);
     if (!node.position.componentId) {
         throw new Error('Node does not have a component context');
     }
     const { computed, disposers } = evaluateNode(evalNode, {
         componentId: node.position.componentId,
     });
-    currentFrame.disposers.push(...disposers);
-    const computationDisposer = reaction(() => computed.get(), ({ value: newItems }) => {
-        const toAdd = store.reconcileForLoopChildren(node, newItems);
-        // Activate only newly added children
-        const structure = node.structure || [];
-        for (const index of toAdd) {
-            const child = structure[index];
-            if (child) {
-                activateNode(child);
+    node.disposers.push(...disposers);
+    const disposer = reaction(() => [
+        node.extractedValue,
+        ComponentTreeApi.findComponentsIds(component.id, componentSelector),
+        computed.get(),
+    ], ([value, componentsIds, evalState], prev) => {
+        let newValue;
+        if (!prev) {
+            // first run
+            if (value && value.length > 0) {
+                newValue = [...value];
+            }
+            else {
+                newValue = evalState.value;
             }
         }
-    }, { fireImmediately: true, name: debugName(node.position, 'repeatable-reaction') });
-    currentFrame.disposers.push(computationDisposer);
-    currentFrame.markActivated();
-}
-
-function activateArrayStructure(node) {
-    const structure = node.structure;
-    if (structure === null) {
-        return;
-    }
-    structure.forEach((item) => {
-        activateNode(item);
-    });
-}
-
-/**
- * Activates node change handlers for a component by setting up MobX reactions.
- * Each handler watches a node selector and executes its command when the node value changes.
- */
-function activateNodeChangeHandlers(component) {
-    for (const handler of component.onNodeChange) {
-        const disposer = reaction(
-        // Track the node value using the selector
-        () => component.getNodeValue(handler.selector), 
-        // Execute the command when node value changes
-        async (nodeValue) => {
-            const src = component.sourceUrl ? `[${component.sourceUrl}] ` : '';
-            log.trace(`${src}onNodeChange "${handler.selector}" triggered on ${component.id}`);
-            try {
-                await handler.command.viewModel.execute(nodeValue);
+        else {
+            if (!comparer.structural(value, prev[0])) {
+                // console.log('100', JSON.stringify(value), JSON.stringify(prev[0]));
+                newValue = value ? [...value] : [];
             }
-            catch (error) {
-                const src = component.sourceUrl ? `[${component.sourceUrl}] ` : '';
-                log.error(`${src}onNodeChange handler failed for component ${component.id}, selector "${handler.selector}":`, error);
-                // Re-throw to maintain existing error behavior
-                throw error;
+            else {
+                // console.log('200');
+                newValue = [...evalState.value];
+                if (value && evalState.value.length > prev[2].value.length) {
+                    newValue = [...value];
+                }
+            }
+        }
+        // console.log(JSON.stringify(newValue));
+        const components = componentsIds.map((id) => ComponentStore.getInstance().getComponentOrThrow(id));
+        runInAction(() => {
+            const store = ComponentStore.getInstance();
+            store.setNodeRawSchema(node, newValue);
+            for (let i = 0; i < components.length; i++) {
+                const c = components[i];
+                const value = newValue[i];
+                const valueNode = c.getNode(valueProp);
+                store.setNodeRawSchema(valueNode, value);
             }
-        }, {
-            // Fire immediately on setup to handle initial state
-            fireImmediately: true,
         });
-        component.handlerDisposers.push(disposer);
-    }
+    }, { fireImmediately: true, equals: comparer.structural });
+    node.disposers.push(disposer);
 }
 
-function activateComponentStructure(node) {
-    const structure = node.structure;
-    if (structure === null) {
+function bindMirror(component, node, cfg) {
+    const store = ComponentStore.getInstance();
+    let targetNode;
+    try {
+        // For Facade components, start lookup from parent. This handles inline bindings
+        // on template contract variables, where the Facade has a variable with the same
+        // name - we need to find the parent's variable, not self.
+        const lookupFromId = component.componentType === 'sys.Facade' ? component.position.componentId : component.id;
+        if (!lookupFromId) {
+            log.error(`Cannot activate mirror binding: no parent component for selector "${cfg.selector}"`);
+            return;
+        }
+        targetNode = store.getNode(lookupFromId, cfg.selector);
+    }
+    catch (error) {
+        log.error(`Cannot activate mirror binding: ${error}`);
         return;
     }
-    const component = ComponentStore.getInstance().getComponentOrThrow(structure);
-    activateComponent(component);
+    const disposer = reaction(() => [targetNode.extractedValue, node.extractedValue], (curr, prev) => {
+        const [targetValue, sourceValue = null] = curr;
+        const [prevTargetValue, prevSourceValue] = prev || [null, null];
+        if (comparer.structural(targetValue, sourceValue)) {
+            return;
+        }
+        if (!prev && targetValue !== null) {
+            store.setNodeRawSchema(node, targetValue);
+            return;
+        }
+        if (targetValue !== prevTargetValue) {
+            store.setNodeRawSchema(node, targetValue);
+            return;
+        }
+        if (sourceValue !== prevSourceValue) {
+            store.setNodeRawSchema(targetNode, sourceValue);
+        }
+    }, { fireImmediately: true });
+    node.disposers.push(disposer);
 }
-function activateComponent(component) {
-    ComponentStore.getInstance().componentsToPreload.add(component.componentType);
-    for (const node of component.props.values()) {
-        activateNode(node);
-    }
-    for (const node of component.variables.values()) {
-        activateNode(node);
-    }
-    for (const handler of component.onNodeChange) {
-        activateNode(handler.command);
+
+function bindObject(node, component, cfg) {
+    const { componentSelector, keyProp, valueProp } = cfg;
+    const evalNode = lowerFormula(`propObject('${componentSelector}', '${keyProp}', '${valueProp}')`);
+    if (!node.position.componentId) {
+        throw new Error('Node does not have a component context');
     }
-    activateNodeChangeHandlers(component);
+    const { computed, disposers } = evaluateNode(evalNode, {
+        componentId: node.position.componentId,
+    });
+    node.disposers.push(...disposers);
+    let preservedNodeValue = {};
+    const disposer = reaction(() => [
+        node.extractedValue,
+        ComponentTreeApi.findComponentsIds(component.id, componentSelector),
+        computed.get(),
+    ], ([nodeValue, componentsIds, evalState], prev) => {
+        const currentValue = nodeValue || {};
+        if (comparer.structural(evalState.value, currentValue)) {
+            return;
+        }
+        const firstRun = !prev;
+        const nodeChanged = !firstRun && !comparer.structural(nodeValue, prev[0]);
+        if (firstRun || nodeChanged) {
+            preservedNodeValue = currentValue;
+        }
+        else {
+            preservedNodeValue = shallowMerge(preservedNodeValue, evalState.value);
+        }
+        let componentValues;
+        if (firstRun) {
+            const hasInitialValue = Object.keys(currentValue).length > 0;
+            componentValues = hasInitialValue
+                ? syncNodeValueAndComponents$1(currentValue, evalState)
+                : { ...evalState.value };
+        }
+        else if (nodeChanged) {
+            componentValues = syncNodeValueAndComponents$1(currentValue, evalState);
+        }
+        else {
+            componentValues = handleComponentsChanged(evalState, preservedNodeValue);
+        }
+        runInAction(() => {
+            const store = ComponentStore.getInstance();
+            store.setNodeRawSchema(node, componentValues);
+            updateComponentsValues$1(componentsIds, componentValues, keyProp, valueProp);
+        });
+    }, { fireImmediately: true, equals: comparer.structural });
+    node.disposers.push(disposer);
 }
-
-function activateMapStructure(node) {
-    const structure = node.structure;
-    if (structure === null) {
-        return;
-    }
-    for (const item of Object.values(structure)) {
-        activateNode(item);
+function handleComponentsChanged(evalState, preservedNodeValue) {
+    const componentValues = {};
+    for (const [inputKey, currentValue] of Object.entries(evalState.value)) {
+        const preservedValue = preservedNodeValue[inputKey];
+        if (isObject(currentValue) && isObject(preservedValue)) {
+            componentValues[inputKey] = mergePreservedWithChildGroup(currentValue, preservedValue);
+            continue;
+        }
+        componentValues[inputKey] = currentValue ?? preservedValue;
     }
+    return componentValues;
 }
-
-function activateObjectStructure(node) {
-    const structure = node.structure;
-    if (structure === null) {
-        return;
-    }
-    for (const node of Object.values(structure)) {
-        activateNode(node);
+function mergePreservedWithChildGroup(currentValue, preservedValue) {
+    const merged = { ...currentValue };
+    for (const [key, value] of Object.entries(currentValue)) {
+        if (value !== null) {
+            continue;
+        }
+        if (preservedValue[key] === undefined || preservedValue[key] === null) {
+            continue;
+        }
+        merged[key] = preservedValue[key];
     }
+    return merged;
 }
-
-function activateShapeStructure(node) {
-    const { valueType, structure } = node;
-    if (structure === null) {
-        return;
-    }
-    const objectValueType = DefinitionStore.getInstance().getShape(valueType.shapeType);
-    for (const key of Object.keys(objectValueType.fields)) {
-        activateNode(structure[key]);
+function syncNodeValueAndComponents$1(nodeValue, evalState) {
+    const componentValues = {};
+    for (const fieldKey of Object.keys(evalState.value)) {
+        if (!(fieldKey in nodeValue)) {
+            componentValues[fieldKey] = null;
+            continue;
+        }
+        componentValues[fieldKey] = nodeValue[fieldKey];
     }
+    return componentValues;
 }
-
-function activateVariantShapeStructure(node) {
-    const { valueType, structure } = node;
-    if (structure === null) {
-        return;
-    }
-    const objectValueType = DefinitionStore.getInstance().getVariantShape(valueType.shapeType, structure.kind);
-    for (const key of Object.keys(objectValueType.fields)) {
-        activateNode(structure.fields[key]);
+function updateComponentsValues$1(componentsIds, componentValues, keyProp, valueProp) {
+    const store = ComponentStore.getInstance();
+    const components = componentsIds.map((id) => store.getComponentOrThrow(id));
+    for (const cmp of components) {
+        const key = cmp.getNodeValue(keyProp);
+        if (!key)
+            continue;
+        const value = componentValues[key];
+        const valueNode = cmp.getNode(valueProp);
+        store.setNodeRawSchema(valueNode, value);
     }
 }
-
-const structureActivators = {
-    shape: (node) => activateShapeStructure(node),
-    variantShape: (node) => activateVariantShapeStructure(node),
-    array: (node) => activateArrayStructure(node),
-    object: (node) => activateObjectStructure(node),
-    map: (node) => activateMapStructure(node),
-    component: (node) => activateComponentStructure(node),
-};
-function activateStructure(node) {
-    const value = node.structure;
-    if (value === null) {
-        return;
-    }
-    const activator = structureActivators[node.nodeType];
-    if (activator) {
-        activator(node);
+function shallowMerge(target, source) {
+    const merged = { ...target };
+    for (const [key, value] of Object.entries(source)) {
+        if (value === null || value === undefined) {
+            continue;
+        }
+        if (isObject(value) && isObject(merged[key])) {
+            merged[key] = { ...merged[key], ...value };
+            continue;
+        }
+        merged[key] = value;
     }
+    return merged;
 }
 
-function activateFormulaComputation(node) {
-    const store = ComponentStore.getInstance();
-    const currentFrame = node.computationStack.top;
-    if (!currentFrame) {
-        throw new Error('Cannot activate formula computation: no current frame');
-    }
-    const thisFrameDepth = node.computationStack.depth;
-    const evalNode = lowerComputationSchema(currentFrame.schema);
+function bindSelection(node, component, cfg) {
+    const { componentSelector, keyProp, valueProp } = cfg;
+    const evalNode = lowerFormula(`propObject('${componentSelector}', '${keyProp}', '${valueProp}')`);
     if (!node.position.componentId) {
         throw new Error('Node does not have a component context');
     }
-    const component = getComponent(node);
     const { computed, disposers } = evaluateNode(evalNode, {
         componentId: node.position.componentId,
-        sourceUrl: component.sourceUrl ?? undefined,
     });
-    currentFrame.disposers.push(...disposers);
-    const computationDisposer = reaction(() => computed.get(), (computationState) => {
-        const { evaluating, value: rawSchema, failed } = computationState;
-        node.evaluating = evaluating;
-        if (evaluating) {
+    node.disposers.push(...disposers);
+    let preservedNodeValue = null;
+    const disposer = reaction(() => [
+        node.extractedValue,
+        ComponentTreeApi.findComponentsIds(component.id, componentSelector),
+        computed.get(),
+    ], ([nodeValue, componentsIds, evalState], prev) => {
+        const currentValue = toObject(nodeValue);
+        const firstRun = !prev;
+        const nodeChanged = !firstRun && !comparer.structural(nodeValue, prev[0]);
+        if (firstRun || nodeChanged) {
+            preservedNodeValue = currentValue;
+        }
+        if (comparer.structural(evalState.value, currentValue)) {
             return;
         }
-        node.failed = failed;
-        // Clear result frames from this depth onward (not all results!)
-        // Example: if this is depth 2, clear frames 2, 3, 4... but keep 0, 1
-        node.computationStack.popFrom(thisFrameDepth);
-        store.setNodeRawSchema(node, rawSchema);
-        if (node.computationStack.depth > thisFrameDepth) {
-            // If a nested computation was pushed onto the stack, activate it
-            activateComputation(node);
+        let componentValues;
+        if (firstRun) {
+            const initialNodeValue = Object.keys(currentValue).length > 0;
+            componentValues = initialNodeValue
+                ? syncNodeValueAndComponents(currentValue, evalState, preservedNodeValue)
+                : { ...evalState.value };
+        }
+        else if (nodeChanged) {
+            componentValues = syncNodeValueAndComponents(currentValue, evalState, preservedNodeValue);
         }
         else {
-            activateStructure(node);
+            componentValues = syncComponentsAndPreserved(evalState, preservedNodeValue, currentValue);
         }
-    }, {
-        fireImmediately: true,
-        name: debugName(node.position, 'formula-reaction'),
-    });
-    currentFrame.disposers.push(computationDisposer);
-    currentFrame.markActivated();
-}
-
-function activateTemplateComputation(node) {
-    const store = ComponentStore.getInstance();
-    const nodePath = node.position.path;
-    const component = getComponent(node);
-    const currentFrame = node.computationStack.top;
-    if (!currentFrame) {
-        throw new Error('Cannot activate template computation: no current frame');
-    }
-    const { defer, path, contractVariables, ref } = currentFrame.schema;
-    const taskKey = `template-${component.id}-${nodePath}`;
-    if (defer) {
-        templateLoadingTracker.startLoading(taskKey);
-        store.setNodeSchema(node, defer.placeholder);
-        // Fire-and-forget: load template asynchronously
-        loadTemplates({ templateUrl: path })
-            .then(() => {
-            const cacheEntry = templateRegistry.get(path);
-            if (!cacheEntry) {
-                // Loading failed - show error schema
-                store.setNodeSchema(node, defer.error);
-                templateLoadingTracker.finishLoading(taskKey);
-                return;
-            }
-            // Loading succeeded - create and set the template schema
-            setTemplateOnNode(node, cacheEntry, path, contractVariables, ref);
-            templateLoadingTracker.finishLoading(taskKey);
-        })
-            .catch((error) => {
-            // Handle any unhandled errors during template creation
-            log.error(`Failed to activate template "${path}":`, error);
-            store.setNodeSchema(node, defer.error);
-            templateLoadingTracker.finishLoading(taskKey);
+        const selectionValue = toSelectionSet(componentValues);
+        runInAction(() => {
+            const store = ComponentStore.getInstance();
+            store.setNodeRawSchema(node, selectionValue);
+            updateComponentsValues(componentsIds, componentValues, keyProp, valueProp);
         });
-        // Mark as activated immediately (don't wait for loading)
-        currentFrame.markActivated();
-        return;
-    }
-    const cacheEntry = templateRegistry.get(path);
-    if (!cacheEntry) {
-        const src = component.sourceUrl ? `[${component.sourceUrl}] ` : '';
-        throw new Error(`${src}Template not found in cache: ${path}`);
-    }
-    // Non-defer path: template is already loaded, create schema synchronously
-    setTemplateOnNode(node, cacheEntry, path, contractVariables, ref);
-    currentFrame.markActivated();
-}
-function setTemplateOnNode(node, cacheEntry, path, contractVariables, ref) {
-    const store = ComponentStore.getInstance();
-    const rawFacadeSchema = createRawFacadeSchema(cacheEntry, path, contractVariables, ref);
-    store.setNodeRawSchema(node, rawFacadeSchema);
-    // Activate the facade component after it's created (only for regular component nodes)
-    if (node.nodeType !== 'componentSchema') {
-        const facadeId = node.structure;
-        const facade = store.getComponentOrThrow(facadeId);
-        facade.sourceUrl = path;
-        activateComponent(facade);
-    }
+    }, { fireImmediately: true, equals: comparer.structural });
+    node.disposers.push(disposer);
 }
-function createRawFacadeSchema(cacheEntry, path, contractVariables, ref) {
-    if (!cacheEntry) {
-        throw new Error(`Template cache entry is undefined for path: ${path}`);
-    }
-    const { recipe } = cacheEntry;
-    const { types: _types, importTypes: _importTypes, contract = {}, defaultSlot, ...componentRecipe } = recipe;
-    const rootSchema = unfoldNodeSchema(componentRecipe, { type: 'component' });
-    const rootValue = rootSchema.value;
-    if (!rootValue) {
-        const recipeKeys = Object.keys(componentRecipe).join(', ');
-        throw new Error(`Template "${path}": Root schema has no value. ` +
-            `The recipe root must define a component (implicit or explicit componentType). ` +
-            `Found keys: [${recipeKeys}]`);
+function syncNodeValueAndComponents(nodeValue, evalState, preservedNodeValue) {
+    const componentValues = { ...nodeValue };
+    // Keep keys in preservedNodeValue to handle async component loading
+    for (const key of Object.keys(componentValues)) {
+        if (!(key in evalState.value) && (!preservedNodeValue || !(key in preservedNodeValue))) {
+            delete componentValues[key];
+        }
     }
-    // Collect value types from the root schema for each mapped variable
-    const valueTypes = {};
-    for (const [facadeKey, rootKey] of Object.entries(contract)) {
-        const sourceNodeSchema = getSourceNodeOrThrow(rootValue, rootKey, path);
-        valueTypes[facadeKey] = sourceNodeSchema.valueType;
+    for (const key of Object.keys(evalState.value)) {
+        if (!(key in componentValues)) {
+            componentValues[key] = false;
+        }
     }
-    const prefixedVariables = createFacadeVariables(path, contractVariables, contract, valueTypes, defaultSlot);
-    const contentWithBindings = addSynchronizeBindings(contract, rootSchema);
-    // Return the raw facade schema object
-    return {
-        componentType: 'sys.Facade',
-        ref,
-        content: contentWithBindings,
-        ...prefixedVariables,
-    };
+    return componentValues;
 }
-function createFacadeVariables(templatePath, contractVariables, contract, valueTypes, flatWrapperSlot) {
-    const contractKeys = Object.keys(contractVariables);
-    const contractPropKeys = Object.keys(contract);
-    const unmappedVariables = contractKeys.filter((key) => key !== 'slot' && !contractPropKeys.includes(key));
-    if (unmappedVariables.length > 0) {
-        // Detect if unmapped keys look like variable declarations (have $ prefix or @ type annotation)
-        const variableDeclarations = unmappedVariables.filter((key) => key.startsWith('$') || key.includes('@'));
-        const regularProps = unmappedVariables.filter((key) => !key.startsWith('$') && !key.includes('@'));
-        if (variableDeclarations.length > 0) {
-            throw new Error(`Template "${templatePath}": Variable declarations cannot be siblings of templateUrl. ` +
-                `Found: ${variableDeclarations.join(', ')}. ` +
-                `Pass values directly or wrap templateUrl in a component.`);
+function syncComponentsAndPreserved(evalState, preservedNodeValue, currentValue) {
+    const componentValues = { ...evalState.value };
+    if (preservedNodeValue) {
+        for (const key of Object.keys(evalState.value)) {
+            if (evalState.value[key] === null) {
+                componentValues[key] = preservedNodeValue[key] ?? false;
+            }
         }
-        else if (regularProps.length > 0) {
-            log.warn(`Template "${templatePath}": Unknown properties: ${regularProps.join(', ')}. ` +
-                `Expected: ${contractPropKeys.join(', ')}`);
+        // Preserve selection for components being recreated
+        for (const key of Object.keys(preservedNodeValue)) {
+            if (!(key in componentValues)) {
+                componentValues[key] = preservedNodeValue[key];
+            }
         }
     }
-    const prefixedVariables = {};
-    for (const facadeKey of contractPropKeys) {
-        const prefixedKey = `${Delimiters.Variable}${facadeKey}`;
-        prefixedVariables[prefixedKey] = unfoldNodeSchema(contractVariables[facadeKey], valueTypes[facadeKey]);
-    }
-    if ('slot' in contractVariables) {
-        const slotComponent = contractVariables['slot'];
-        let targetSlot = flatWrapperSlot;
-        // Find default component slot if not explicitly specified
-        if (!targetSlot) {
-            const componentSlots = Object.keys(valueTypes).filter((key) => valueTypes[key].type === 'component');
-            if (componentSlots.length !== 1) {
-                throw new Error(`Cannot find default slot for template computation. Found ${componentSlots.length} slots: ${componentSlots.join(', ')}`);
-            }
-            targetSlot = componentSlots[0];
+    // Include user changes not yet in preservedNodeValue
+    for (const key of Object.keys(currentValue)) {
+        if (!(key in componentValues)) {
+            componentValues[key] = currentValue[key];
         }
-        const prefixedKey = `${Delimiters.Variable}${targetSlot}`;
-        prefixedVariables[prefixedKey] = unfoldNodeSchema(slotComponent, valueTypes[targetSlot]);
     }
-    return prefixedVariables;
+    return componentValues;
 }
-function addSynchronizeBindings(contract, rootSchema) {
-    const rootValue = rootSchema.value;
-    for (const [facadeKey, templateKey] of Object.entries(contract)) {
-        // This will always succeed because mapping was already validated in createRawFacadeSchema
-        const sourceNodeSchema = getSourceNodeOrThrow(rootValue, templateKey, '');
-        sourceNodeSchema.extraBinding = {
-            bindingType: 'mirror',
-            selector: `^sys.Facade->$${facadeKey}`,
-        };
+function updateComponentsValues(componentsIds, componentValues, keyProp, valueProp) {
+    const store = ComponentStore.getInstance();
+    const components = componentsIds.map((id) => store.getComponentOrThrow(id));
+    for (const cmp of components) {
+        const key = cmp.getNodeValue(keyProp);
+        if (!key)
+            continue;
+        const value = componentValues[key];
+        const valueNode = cmp.getNode(valueProp);
+        store.setNodeRawSchema(valueNode, value);
     }
-    return rootSchema;
 }
-function getSourceNodeOrThrow(rootValue, key, templatePath) {
-    const isVariable = key.startsWith('$');
-    const source = isVariable ? rootValue.variables : rootValue.props;
-    if (!source) {
-        const kind = isVariable ? 'variables' : 'props';
-        throw new Error(`Template "${templatePath}": Cannot resolve contract key "${key}" — ` +
-            `root component "${rootValue.componentType}" has no ${kind}. ` +
-            `Ensure the template recipe declares "${key}" as a ${isVariable ? 'variable' : 'property'}.`);
-    }
-    const node = source.get(isVariable ? key.slice(1) : key);
-    if (!node) {
-        const kind = isVariable ? 'variable' : 'property';
-        const lookupKey = isVariable ? key.slice(1) : key;
-        const available = [...source.keys()].map((k) => (isVariable ? `$${k}` : k));
-        throw new Error(`Template "${templatePath}": Contract key "${key}" not found as ${kind} "${lookupKey}" ` +
-            `in root component "${rootValue.componentType}". ` +
-            `Available ${kind}s: [${available.join(', ')}]`);
-    }
-    return node;
+function toSelectionSet(componentValues) {
+    return new Set(Object.entries(componentValues)
+        .filter(([, fieldValue]) => !!fieldValue)
+        .map(([key]) => key));
+}
+function toObject(selectionSet) {
+    return Object.fromEntries(Array.from(selectionSet || []).map((key) => [key, true]));
 }
 
-const computationActivators = {
-    if: (node) => activateFormulaComputation(node),
-    formula: (node) => activateFormulaComputation(node),
-    switch: (node) => activateFormulaComputation(node),
-    for: (node) => activateForComputation(node),
-    template: (node) => activateTemplateComputation(node),
-};
-function activateComputation(node) {
-    const frame = node.computationStack.top;
-    if (!frame) {
+async function addBinding(node, extra = false) {
+    await when(() => !node.evaluating);
+    const store = ComponentStore.getInstance();
+    if (!node.position.componentId) {
+        throw new Error('Cannot add binding without component context');
+    }
+    const component = store.getComponent(node.position.componentId);
+    if (!component) {
         return;
     }
-    // Idempotency: don't re-activate an already activated frame
-    if (frame.activated) {
+    const bindingSchema = extra ? node.extraBinding : node.bindingSchema;
+    if (!bindingSchema) {
         return;
     }
-    const activator = computationActivators[frame.schema.computationType];
-    if (activator) {
-        activator(node);
+    const valueType = node.valueType;
+    switch (bindingSchema.bindingType) {
+        case 'object':
+            bindObject(node, component, {
+                componentSelector: bindingSchema.componentSelector,
+                keyProp: bindingSchema.mapping.key,
+                valueProp: bindingSchema.mapping.value,
+                valueType,
+            });
+            break;
+        case 'selection':
+            bindSelection(node, component, {
+                componentSelector: bindingSchema.componentSelector,
+                keyProp: bindingSchema.mapping.key,
+                valueProp: bindingSchema.mapping.selected,
+                valueType,
+            });
+            break;
+        case 'array':
+            bindArray(node, component, {
+                componentSelector: bindingSchema.componentSelector,
+                valueProp: bindingSchema.mapping.value,
+                valueType,
+            });
+            break;
+        case 'mirror':
+            bindMirror(component, node, bindingSchema);
+            break;
     }
 }
 
-function activateNode(node) {
-    if (node.fullyActivated) {
-        return;
-    }
-    activateStructure(node);
-    if (!node.computationStack.isEmpty) {
-        activateComputation(node);
+const debugName = (position, thing) => {
+    return [position.componentId, position.path.join(Delimiters.NodePath), thing].join('|');
+};
+const componentInstanceMap = new Map();
+
+const lowerSimpleValue = (schema) => ({
+    type: 'value',
+    value: schema.value,
+});
+const lowerObjectOrMap = (schema) => {
+    if (!schema.value) {
+        return { type: 'value', value: null };
     }
-    if (node.bindingSchema) {
-        void addBinding(node);
+    const entries = Object.entries(schema.value);
+    return {
+        type: 'object',
+        properties: entries.map(([key, value]) => ({
+            key: { type: 'value', value: key },
+            value: lowerSchema(value),
+        })),
+    };
+};
+const lowerArrayOrSet = (schema) => {
+    if (!schema.value) {
+        throw new Error(`${schema.valueType.type} schema without value`);
     }
-    if (node.extraBinding) {
-        void addBinding(node, true);
+    return {
+        type: 'array',
+        items: schema.value.map((item) => lowerSchema(item)),
+    };
+};
+const lowerShape = () => {
+    throw new Error('Shape lowering not implemented');
+};
+const lowerVariantShape = (schema) => {
+    if (!schema.value) {
+        return { type: 'value', value: null };
     }
-    node.markActivated();
-}
-
-function execute$T(ctx, selector, item) {
-    ComponentTreeApi.appendArrayItem(ctx.componentId, selector, item);
-    const arrayNode = ComponentTreeApi.findNode(ctx.componentId, selector);
-    if (arrayNode) {
-        // Activate the last item in the array (the one we just appended)
-        const lastIndex = (arrayNode.structure?.length ?? 1) - 1;
-        const newItem = arrayNode.structure?.[lastIndex];
-        if (newItem) {
-            activateNode(newItem);
-        }
+    const variantShapeValue = schema.value;
+    const variantField = `${schema.valueType.shapeType}Type`;
+    const entries = Object.entries(variantShapeValue);
+    const properties = entries
+        .filter(([key]) => key !== 'kind')
+        .map(([key, value]) => ({
+        key: { type: 'value', value: key },
+        value: typeof value === 'string' ? { type: 'value', value } : lowerSchema(value),
+    }));
+    properties.push({
+        key: { type: 'value', value: variantField },
+        value: { type: 'value', value: variantShapeValue['kind'] },
+    });
+    return {
+        type: 'object',
+        properties,
+    };
+};
+const schemaLowerers = {
+    string: lowerSimpleValue,
+    number: lowerSimpleValue,
+    boolean: lowerSimpleValue,
+    unknown: lowerSimpleValue,
+    component: lowerSimpleValue,
+    command: lowerSimpleValue,
+    componentSchema: lowerSimpleValue,
+    object: lowerObjectOrMap,
+    map: lowerObjectOrMap,
+    array: lowerArrayOrSet,
+    set: lowerArrayOrSet,
+    shape: lowerShape,
+    variantShape: lowerVariantShape,
+};
+function lowerSchema(schema) {
+    // If schema has a computation, lower it
+    if (schema.computation) {
+        return lowerComputationSchema(schema.computation);
     }
+    // Otherwise lower the value based on valueType
+    const lowerer = schemaLowerers[schema.valueType.type];
+    if (lowerer) {
+        return lowerer(schema);
+    }
+    throw new Error(`Unsupported value type: ${schema.valueType.type}`);
 }
 
-var appendArrayItem = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    execute: execute$T
-});
-
-function execute$S(ctx, selector, path) {
-    return ComponentTreeApi.collectValuesArray(ctx.componentId, selector, path);
-}
-
-var collectValuesArray$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    execute: execute$S
-});
-
-function execute$R(ctx, selector, objectKey, objectValue) {
-    return ComponentTreeApi.collectValuesMap(ctx.componentId, selector, objectKey, objectValue);
+function lowerForLoop(forComputation) {
+    const dimensionsNode = {
+        type: 'array',
+        items: forComputation.dimensions.map((dimension) => {
+            // Extract trackBy expression to be evaluated in RefSpace context where $item is available
+            let trackByExpression = null;
+            if (dimension.trackBy.computation && dimension.trackBy.computation.computationType === 'formula') {
+                trackByExpression = `=${dimension.trackBy.computation.formula}`;
+            }
+            else if (dimension.trackBy.value !== null) {
+                trackByExpression = dimension.trackBy.value;
+            }
+            return {
+                type: 'object',
+                properties: [
+                    { key: { type: 'value', value: 'items' }, value: lowerSchema(dimension.items) },
+                    { key: { type: 'value', value: 'itemsType' }, value: { type: 'value', value: dimension.itemsType } },
+                    { key: { type: 'value', value: 'item' }, value: lowerSchema(dimension.item) },
+                    { key: { type: 'value', value: 'index' }, value: lowerSchema(dimension.index) },
+                    { key: { type: 'value', value: 'first' }, value: lowerSchema(dimension.first) },
+                    { key: { type: 'value', value: 'last' }, value: lowerSchema(dimension.last) },
+                    { key: { type: 'value', value: 'trackBy' }, value: { type: 'value', value: trackByExpression } },
+                ],
+            };
+        }),
+    };
+    const yieldNode = lowerSchema(forComputation.yield);
+    return {
+        type: 'function',
+        name: 'repeat',
+        args: [dimensionsNode, yieldNode],
+    };
 }
-
-var collectValuesMap$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    execute: execute$R
-});
-
-function execute$Q(_ctx, ms) {
-    return new Promise((resolve) => setTimeout(() => resolve(), ms));
+function lowerTemplate(templateComputation) {
+    return {
+        type: 'value',
+        value: templateComputation,
+    };
 }
-
-var delay$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    execute: execute$Q
-});
-
-function execute$P(ctx, selector) {
-    return ComponentTreeApi.findNode(ctx.componentId, selector)?.extractedValue ?? null;
+function lowerIfStatement(ifNode) {
+    return {
+        type: 'function',
+        name: 'if',
+        args: [lowerSchema(ifNode.if), lowerSchema(ifNode.then), lowerSchema(ifNode.else)],
+    };
 }
-
-var get = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    execute: execute$P
-});
-
-function execute$O(ctx, selector, index) {
-    ComponentTreeApi.removeArrayItem(ctx.componentId, selector, index);
+function lowerSwitch(switchComputation) {
+    // Lower the source
+    const sourceEvalNode = lowerSchema(switchComputation.source);
+    // Build cases array as flat array: [value1, result1, value2, result2, ...]
+    // Extract .value from ComponentSchemaNodeSchema to get the actual component schema
+    const casesArrayItems = [];
+    for (const caseItem of switchComputation.cases) {
+        casesArrayItems.push({ type: 'value', value: caseItem.equals });
+        // caseItem.then is a ComponentSchemaNodeSchema, extract its .value property
+        casesArrayItems.push({ type: 'value', value: caseItem.then.value });
+    }
+    const casesArrayNode = {
+        type: 'array',
+        items: casesArrayItems,
+    };
+    // Lower the default value - extract .value from ComponentSchemaNodeSchema
+    const defaultNode = { type: 'value', value: switchComputation.default.value };
+    return {
+        type: 'function',
+        name: 'switch',
+        args: [sourceEvalNode, casesArrayNode, defaultNode],
+    };
 }
-
-var removeArrayItem = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    execute: execute$O
-});
-
-function execute$N(ctx, selector, ...args) {
-    return ComponentTreeApi.runCommandNode(ctx.componentId, selector, ...args);
+const computationLowerers = {
+    formula: (schema) => lowerFormula(schema.formula),
+    for: (schema) => lowerForLoop(schema),
+    template: (schema) => lowerTemplate(schema),
+    if: (schema) => lowerIfStatement(schema),
+    switch: (schema) => lowerSwitch(schema),
+};
+function lowerComputationSchema(computationSchema) {
+    const lowerer = computationLowerers[computationSchema.computationType];
+    if (lowerer) {
+        return lowerer(computationSchema);
+    }
+    throw new Error(`Unsupported computation type: ${computationSchema.computationType}`);
 }
 
-var run = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    execute: execute$N
-});
-
-function execute$M(ctx, componentSelector, methodName, ...args) {
-    const component = ComponentTreeApi.getComponent(ctx.componentId, componentSelector);
-    const instance = componentInstanceMap.get(component.id);
-    if (!instance) {
-        throw new Error(`Cannot find component instance for component with id "${component.id}"`);
+function activateForComputation(node) {
+    const store = ComponentStore.getInstance();
+    const currentFrame = node.computationStack.top;
+    if (!currentFrame) {
+        throw new Error('Cannot activate for computation: no current frame');
     }
-    const method = instance[methodName];
-    if (!method || typeof method !== 'function') {
-        throw new Error(`Cannot find method "${methodName}" in component of type "${component.componentType}"`);
+    const evalNode = lowerComputationSchema(currentFrame.schema);
+    if (!node.position.componentId) {
+        throw new Error('Node does not have a component context');
     }
-    return method.call(instance, ...args);
+    const { computed, disposers } = evaluateNode(evalNode, {
+        componentId: node.position.componentId,
+    });
+    currentFrame.disposers.push(...disposers);
+    const computationDisposer = reaction(() => computed.get(), ({ value: newItems }) => {
+        const toAdd = store.reconcileForLoopChildren(node, newItems);
+        // Activate only newly added children
+        const structure = node.structure || [];
+        for (const index of toAdd) {
+            const child = structure[index];
+            if (child) {
+                activateNode(child);
+            }
+        }
+    }, { fireImmediately: true, name: debugName(node.position, 'repeatable-reaction') });
+    currentFrame.disposers.push(computationDisposer);
+    currentFrame.markActivated();
 }
 
-var runComponentMethod = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    execute: execute$M
-});
-
-function execute$L(ctx, selector, value) {
-    ComponentTreeApi.setNodeRawSchema(ctx.componentId, selector, value);
-    const node = ComponentTreeApi.findNode(ctx.componentId, selector);
-    if (node) {
-        activateStructure(node);
+function activateArrayStructure(node) {
+    const structure = node.structure;
+    if (structure === null) {
+        return;
     }
+    structure.forEach((item) => {
+        activateNode(item);
+    });
 }
 
-var set = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    execute: execute$L
-});
-
-const commands = {
-    delay: delay$1,
-    // New names
-    collectValuesMap: collectValuesMap$1,
-    collectValuesArray: collectValuesArray$1,
-    // Legacy aliases for backwards compatibility
-    propObject: collectValuesMap$1,
-    propArray: collectValuesArray$1,
-    appendArrayItem,
-    removeArrayItem,
-    runComponentMethod,
-    get,
-    set,
-    run,
-};
-
 /**
- * Variadic AND function with short-circuit evaluation.
- * Stops at the first falsy value.
+ * Activates node change handlers for a component by setting up MobX reactions.
+ * Each handler watches a node selector and executes its command when the node value changes.
  */
-const and = {
-    kind: 'reactive',
-    execute: (args) => {
-        if (args.length === 0) {
-            throw new Error('and requires at least 1 argument');
-        }
-        return computed(() => {
-            const state = new FunctionExecutionStateBuilder();
-            for (const argComputed of args) {
-                const argState = argComputed.get();
-                const earlyReturn = state.checkReady(argState);
-                if (earlyReturn)
-                    return earlyReturn;
-                if (!argState.value) {
-                    return state.success(false);
-                }
-            }
-            return state.success(true);
+function activateNodeChangeHandlers(component) {
+    for (const handler of component.onNodeChange) {
+        const disposer = reaction(() => component.getNodeValue(handler.selector), (nodeValue) => {
+            const src = component.sourceUrl ? `[${component.sourceUrl}] ` : '';
+            log.trace(`${src}onNodeChange "${handler.selector}" triggered on ${component.id}`);
+            handler.command.viewModel.execute(nodeValue);
+        }, {
+            fireImmediately: true,
         });
-    },
-    signature: '(...unknown) => boolean',
-};
-
-function execute$K(source, path) {
-    const takeDeep = (source, path) => path.reduce((current, step) => {
-        return current?.[step];
-    }, source);
-    return source.map((element) => takeDeep(element, path));
-}
-const arrayPluck = {
-    kind: 'imperative',
-    execute: execute$K,
-    signature: '(unknown{}[], string[]) => unknown',
-};
-
-function execute$J(value, index) {
-    return value[index];
+        component.handlerDisposers.push(disposer);
+    }
 }
-const at = {
-    kind: 'imperative',
-    execute: execute$J,
-    signature: '(unknown[], number) => unknown',
-};
 
-function execute$I(value) {
-    return Boolean(value);
+function activateComponentStructure(node) {
+    const structure = node.structure;
+    if (structure === null) {
+        return;
+    }
+    const component = ComponentStore.getInstance().getComponentOrThrow(structure);
+    activateComponent(component);
+}
+function activateComponent(component) {
+    ComponentStore.getInstance().componentsToPreload.add(component.componentType);
+    for (const node of component.props.values()) {
+        activateNode(node);
+    }
+    for (const node of component.variables.values()) {
+        activateNode(node);
+    }
+    for (const handler of component.onNodeChange) {
+        activateNode(handler.command);
+    }
+    activateNodeChangeHandlers(component);
 }
-const bool = {
-    kind: 'imperative',
-    execute: execute$I,
-    signature: '(unknown) => boolean',
-};
 
-function execute$H(value) {
-    return Math.ceil(value);
+function activateMapStructure(node) {
+    const structure = node.structure;
+    if (structure === null) {
+        return;
+    }
+    for (const item of Object.values(structure)) {
+        activateNode(item);
+    }
 }
-const ceil = {
-    kind: 'imperative',
-    execute: execute$H,
-    signature: '(number) => number',
-};
 
-function execute$G(ctx, selector, path) {
-    return ComponentTreeApi.collectValuesArray(ctx.componentId, selector, path);
+function activateObjectStructure(node) {
+    const structure = node.structure;
+    if (structure === null) {
+        return;
+    }
+    for (const node of Object.values(structure)) {
+        activateNode(node);
+    }
 }
-const collectValuesArray = {
-    kind: 'imperative',
-    contextual: true,
-    execute: execute$G,
-    signature: '(string, string) => unknown[]',
-};
 
-function execute$F(ctx, selector, objectKey, objectValue) {
-    return ComponentTreeApi.collectValuesMap(ctx.componentId, selector, objectKey, objectValue);
+function activateShapeStructure(node) {
+    const { valueType, structure } = node;
+    if (structure === null) {
+        return;
+    }
+    const objectValueType = DefinitionStore.getInstance().getShape(valueType.shapeType);
+    for (const key of Object.keys(objectValueType.fields)) {
+        activateNode(structure[key]);
+    }
 }
-const collectValuesMap = {
-    kind: 'imperative',
-    contextual: true,
-    execute: execute$F,
-    signature: '(string, string, string) => unknown{}',
-};
 
-function execute$E(strings, separator = '') {
-    return strings.join(separator);
+function activateVariantShapeStructure(node) {
+    const { valueType, structure } = node;
+    if (structure === null) {
+        return;
+    }
+    const objectValueType = DefinitionStore.getInstance().getVariantShape(valueType.shapeType, structure.kind);
+    for (const key of Object.keys(objectValueType.fields)) {
+        activateNode(structure.fields[key]);
+    }
 }
-const concat = {
-    kind: 'imperative',
-    execute: execute$E,
-    signature: '(unknown[], string) => string',
-};
 
-const execute$D = (value) => {
-    return new Promise((resolve) => setTimeout(() => resolve(value), 500));
-};
-const delay = {
-    kind: 'imperative',
-    execute: execute$D,
-    signature: '(unknown) => unknown',
+const structureActivators = {
+    shape: (node) => activateShapeStructure(node),
+    variantShape: (node) => activateVariantShapeStructure(node),
+    array: (node) => activateArrayStructure(node),
+    object: (node) => activateObjectStructure(node),
+    map: (node) => activateMapStructure(node),
+    component: (node) => activateComponentStructure(node),
 };
+function activateStructure(node) {
+    const value = node.structure;
+    if (value === null) {
+        return;
+    }
+    const activator = structureActivators[node.nodeType];
+    if (activator) {
+        activator(node);
+    }
+}
 
-function execute$C(num1, num2) {
-    return num1 / num2;
+function activateFormulaComputation(node) {
+    const store = ComponentStore.getInstance();
+    const currentFrame = node.computationStack.top;
+    if (!currentFrame) {
+        throw new Error('Cannot activate formula computation: no current frame');
+    }
+    const thisFrameDepth = node.computationStack.depth;
+    const evalNode = lowerComputationSchema(currentFrame.schema);
+    if (!node.position.componentId) {
+        throw new Error('Node does not have a component context');
+    }
+    const component = getComponent(node);
+    const { computed, disposers } = evaluateNode(evalNode, {
+        componentId: node.position.componentId,
+        sourceUrl: component.sourceUrl ?? undefined,
+    });
+    currentFrame.disposers.push(...disposers);
+    const computationDisposer = reaction(() => computed.get(), (computationState) => {
+        const { evaluating, value: rawSchema, failed } = computationState;
+        node.evaluating = evaluating;
+        if (evaluating) {
+            return;
+        }
+        node.failed = failed;
+        // Clear result frames from this depth onward (not all results!)
+        // Example: if this is depth 2, clear frames 2, 3, 4... but keep 0, 1
+        node.computationStack.popFrom(thisFrameDepth);
+        store.setNodeRawSchema(node, rawSchema);
+        if (node.computationStack.depth > thisFrameDepth) {
+            // If a nested computation was pushed onto the stack, activate it
+            activateComputation(node);
+        }
+        else {
+            activateStructure(node);
+        }
+    }, {
+        fireImmediately: true,
+        name: debugName(node.position, 'formula-reaction'),
+    });
+    currentFrame.disposers.push(computationDisposer);
+    currentFrame.markActivated();
 }
-const divide = {
-    kind: 'imperative',
-    execute: execute$C,
-    signature: '(number, number) => number',
-};
 
-function execute$B(items) {
-    return items.length === 0;
+function activateTemplateComputation(node) {
+    const store = ComponentStore.getInstance();
+    const nodePath = node.position.path;
+    const component = getComponent(node);
+    const currentFrame = node.computationStack.top;
+    if (!currentFrame) {
+        throw new Error('Cannot activate template computation: no current frame');
+    }
+    const { defer, path, contractVariables, ref } = currentFrame.schema;
+    const taskKey = `template-${component.id}-${nodePath}`;
+    if (defer) {
+        templateLoadingTracker.startLoading(taskKey);
+        store.setNodeSchema(node, defer.placeholder);
+        // Fire-and-forget: load template asynchronously
+        loadTemplates({ templateUrl: path })
+            .then(() => {
+            const cacheEntry = templateRegistry.get(path);
+            if (!cacheEntry) {
+                // Loading failed - show error schema
+                store.setNodeSchema(node, defer.error);
+                templateLoadingTracker.finishLoading(taskKey);
+                return;
+            }
+            // Loading succeeded - create and set the template schema
+            setTemplateOnNode(node, cacheEntry, path, contractVariables, ref);
+            templateLoadingTracker.finishLoading(taskKey);
+        })
+            .catch((error) => {
+            // Handle any unhandled errors during template creation
+            log.error(`Failed to activate template "${path}":`, error);
+            store.setNodeSchema(node, defer.error);
+            templateLoadingTracker.finishLoading(taskKey);
+        });
+        // Mark as activated immediately (don't wait for loading)
+        currentFrame.markActivated();
+        return;
+    }
+    const cacheEntry = templateRegistry.get(path);
+    if (!cacheEntry) {
+        const src = component.sourceUrl ? `[${component.sourceUrl}] ` : '';
+        throw new Error(`${src}Template not found in cache: ${path}`);
+    }
+    // Non-defer path: template is already loaded, create schema synchronously
+    setTemplateOnNode(node, cacheEntry, path, contractVariables, ref);
+    currentFrame.markActivated();
+}
+function setTemplateOnNode(node, cacheEntry, path, contractVariables, ref) {
+    const store = ComponentStore.getInstance();
+    const rawFacadeSchema = createRawFacadeSchema(cacheEntry, path, contractVariables, ref);
+    store.setNodeRawSchema(node, rawFacadeSchema);
+    // Activate the facade component after it's created (only for regular component nodes)
+    if (node.nodeType !== 'componentSchema') {
+        const facadeId = node.structure;
+        const facade = store.getComponentOrThrow(facadeId);
+        facade.sourceUrl = path;
+        activateComponent(facade);
+    }
+}
+function createRawFacadeSchema(cacheEntry, path, contractVariables, ref) {
+    if (!cacheEntry) {
+        throw new Error(`Template cache entry is undefined for path: ${path}`);
+    }
+    const { recipe } = cacheEntry;
+    const { types: _types, importTypes: _importTypes, contract = {}, defaultSlot, ...componentRecipe } = recipe;
+    const rootSchema = unfoldNodeSchema(componentRecipe, { type: 'component' });
+    const rootValue = rootSchema.value;
+    if (!rootValue) {
+        const recipeKeys = Object.keys(componentRecipe).join(', ');
+        throw new Error(`Template "${path}": Root schema has no value. ` +
+            `The recipe root must define a component (implicit or explicit componentType). ` +
+            `Found keys: [${recipeKeys}]`);
+    }
+    // Collect value types from the root schema for each mapped variable
+    const valueTypes = {};
+    for (const [facadeKey, rootKey] of Object.entries(contract)) {
+        const sourceNodeSchema = getSourceNodeOrThrow(rootValue, rootKey, path);
+        valueTypes[facadeKey] = sourceNodeSchema.valueType;
+    }
+    const prefixedVariables = createFacadeVariables(path, contractVariables, contract, valueTypes, defaultSlot);
+    const contentWithBindings = addSynchronizeBindings(contract, rootSchema);
+    // Return the raw facade schema object
+    return {
+        componentType: 'sys.Facade',
+        ref,
+        content: contentWithBindings,
+        ...prefixedVariables,
+    };
+}
+function createFacadeVariables(templatePath, contractVariables, contract, valueTypes, flatWrapperSlot) {
+    const contractKeys = Object.keys(contractVariables);
+    const contractPropKeys = Object.keys(contract);
+    const unmappedVariables = contractKeys.filter((key) => key !== 'slot' && !contractPropKeys.includes(key));
+    if (unmappedVariables.length > 0) {
+        // Detect if unmapped keys look like variable declarations (have $ prefix or @ type annotation)
+        const variableDeclarations = unmappedVariables.filter((key) => key.startsWith('$') || key.includes('@'));
+        const regularProps = unmappedVariables.filter((key) => !key.startsWith('$') && !key.includes('@'));
+        if (variableDeclarations.length > 0) {
+            throw new Error(`Template "${templatePath}": Variable declarations cannot be siblings of templateUrl. ` +
+                `Found: ${variableDeclarations.join(', ')}. ` +
+                `Pass values directly or wrap templateUrl in a component.`);
+        }
+        else if (regularProps.length > 0) {
+            log.warn(`Template "${templatePath}": Unknown properties: ${regularProps.join(', ')}. ` +
+                `Expected: ${contractPropKeys.join(', ')}`);
+        }
+    }
+    const prefixedVariables = {};
+    for (const facadeKey of contractPropKeys) {
+        const prefixedKey = `${Delimiters.Variable}${facadeKey}`;
+        prefixedVariables[prefixedKey] = unfoldNodeSchema(contractVariables[facadeKey], valueTypes[facadeKey]);
+    }
+    if ('slot' in contractVariables) {
+        const slotComponent = contractVariables['slot'];
+        let targetSlot = flatWrapperSlot;
+        // Find default component slot if not explicitly specified
+        if (!targetSlot) {
+            const componentSlots = Object.keys(valueTypes).filter((key) => valueTypes[key].type === 'component');
+            if (componentSlots.length !== 1) {
+                throw new Error(`Cannot find default slot for template computation. Found ${componentSlots.length} slots: ${componentSlots.join(', ')}`);
+            }
+            targetSlot = componentSlots[0];
+        }
+        const prefixedKey = `${Delimiters.Variable}${targetSlot}`;
+        prefixedVariables[prefixedKey] = unfoldNodeSchema(slotComponent, valueTypes[targetSlot]);
+    }
+    return prefixedVariables;
 }
-const empty = {
-    kind: 'imperative',
-    execute: execute$B,
-    signature: '(unknown[]) => boolean',
-};
-
-function execute$A(object) {
-    return Object.keys(object).length === 0;
+function addSynchronizeBindings(contract, rootSchema) {
+    const rootValue = rootSchema.value;
+    for (const [facadeKey, templateKey] of Object.entries(contract)) {
+        // This will always succeed because mapping was already validated in createRawFacadeSchema
+        const sourceNodeSchema = getSourceNodeOrThrow(rootValue, templateKey, '');
+        sourceNodeSchema.extraBinding = {
+            bindingType: 'mirror',
+            selector: `^sys.Facade->$${facadeKey}`,
+        };
+    }
+    return rootSchema;
 }
-const emptyObject = {
-    kind: 'imperative',
-    execute: execute$A,
-    signature: '(unknown{}) => boolean',
-};
-
-const execute$z = (a, b) => a === b;
-const eq = {
-    kind: 'imperative',
-    execute: execute$z,
-    signature: '(unknown, unknown) => boolean',
-};
-
-function execute$y(value1, value2) {
-    return value1 === value2;
+function getSourceNodeOrThrow(rootValue, key, templatePath) {
+    const isVariable = key.startsWith('$');
+    const source = isVariable ? rootValue.variables : rootValue.props;
+    if (!source) {
+        const kind = isVariable ? 'variables' : 'props';
+        throw new Error(`Template "${templatePath}": Cannot resolve contract key "${key}" — ` +
+            `root component "${rootValue.componentType}" has no ${kind}. ` +
+            `Ensure the template recipe declares "${key}" as a ${isVariable ? 'variable' : 'property'}.`);
+    }
+    const node = source.get(isVariable ? key.slice(1) : key);
+    if (!node) {
+        const kind = isVariable ? 'variable' : 'property';
+        const lookupKey = isVariable ? key.slice(1) : key;
+        const available = [...source.keys()].map((k) => (isVariable ? `$${k}` : k));
+        throw new Error(`Template "${templatePath}": Contract key "${key}" not found as ${kind} "${lookupKey}" ` +
+            `in root component "${rootValue.componentType}". ` +
+            `Available ${kind}s: [${available.join(', ')}]`);
+    }
+    return node;
 }
-const equal = {
-    kind: 'imperative',
-    execute: execute$y,
-    signature: '(unknown, unknown) => boolean',
-};
 
-function execute$x(ctx, selector) {
-    return ComponentTreeApi.getNode(ctx.componentId, selector).evaluating;
-}
-const evaluating = {
-    kind: 'imperative',
-    contextual: true,
-    execute: execute$x,
-    signature: '(string) => boolean',
+const computationActivators = {
+    if: (node) => activateFormulaComputation(node),
+    formula: (node) => activateFormulaComputation(node),
+    switch: (node) => activateFormulaComputation(node),
+    for: (node) => activateForComputation(node),
+    template: (node) => activateTemplateComputation(node),
 };
-
-function execute$w(items) {
-    return items.every((item) => !!item);
+function activateComputation(node) {
+    const frame = node.computationStack.top;
+    if (!frame) {
+        return;
+    }
+    // Idempotency: don't re-activate an already activated frame
+    if (frame.activated) {
+        return;
+    }
+    const activator = computationActivators[frame.schema.computationType];
+    if (activator) {
+        activator(node);
+    }
 }
-const every = {
-    kind: 'imperative',
-    execute: execute$w,
-    signature: '(unknown[]) => boolean',
-};
 
-function execute$v(ctx, selector) {
-    return ComponentTreeApi.getNode(ctx.componentId, selector).failed;
+function activateNode(node) {
+    if (node.fullyActivated) {
+        return;
+    }
+    activateStructure(node);
+    if (!node.computationStack.isEmpty) {
+        activateComputation(node);
+    }
+    if (node.bindingSchema) {
+        void addBinding(node);
+    }
+    if (node.extraBinding) {
+        void addBinding(node, true);
+    }
+    node.markActivated();
 }
-const failed = {
-    kind: 'imperative',
-    contextual: true,
-    execute: execute$v,
-    signature: '(string) => boolean',
-};
 
-function execute$u(array, allowedValues) {
-    if (!allowedValues) {
-        return [];
+const compiledCache = new WeakMap();
+function getOrCompile(structure, key) {
+    let cached = compiledCache.get(structure);
+    if (!cached) {
+        cached = {};
+        compiledCache.set(structure, cached);
     }
-    if (allowedValues instanceof Set) {
-        return array.filter((item) => allowedValues.has(item));
+    if (!cached[key]) {
+        cached[key] = createJsFunction(structure[key]);
     }
-    return array.filter((item) => allowedValues.includes(item));
+    return cached[key];
 }
-const filterIn = {
-    kind: 'imperative',
-    execute: execute$u,
-    signature: '(unknown[], unknown[]) => unknown[]',
-};
-
-function execute$t(collection, key, values) {
-    return values
-        .map((value) => collection.find((element) => element[key] === value))
-        .filter((item) => item !== undefined);
+async function runCommand(node, ...args) {
+    const structure = node.structure;
+    if (!structure) {
+        const comp = node.position.componentId
+            ? ComponentStore.getInstance().getComponent(node.position.componentId)
+            : null;
+        const src = comp?.sourceUrl ? `[${comp.sourceUrl}] ` : '';
+        log.trace(`${src}Command is empty — no handler was bound to it.`);
+        return null;
+    }
+    const component = ComponentStore.getInstance().getComponentOrThrow(structure.owner);
+    const src = component.sourceUrl ? `[${component.sourceUrl}] ` : '';
+    const functionsProxy = proxifySubCommands(component);
+    try {
+        if (structure.init) {
+            log.trace(`${src}Running init hook`);
+            const initFunc = getOrCompile(structure, 'init');
+            await initFunc(functionsProxy, args);
+        }
+        if (structure.runnerType === 'inline') {
+            log.trace(`${src}Executing inline callback (${args.length} args)`);
+            return await structure.target(...args);
+        }
+        const preview = structure.target.slice(0, 80);
+        log.trace(`${src}Executing command: ${preview}`);
+        const targetFunc = getOrCompile(structure, 'target');
+        return await targetFunc(functionsProxy, args);
+    }
+    catch (e) {
+        throw new Error(`${src}Error executing ${structure.runnerType === 'inline' ? 'inline callback' : 'command'}`, {
+            cause: e,
+        });
+    }
+    finally {
+        if (structure.finalize) {
+            try {
+                log.trace(`${src}Running finalize hook`);
+                const finalizeFunc = getOrCompile(structure, 'finalize');
+                await finalizeFunc(functionsProxy, args);
+            }
+            catch (finalizeError) {
+                log.error(`${src}Error in finalize hook`, finalizeError);
+            }
+        }
+    }
 }
-const findAllBy = {
-    kind: 'imperative',
-    execute: execute$t,
-    signature: '(unknown{}[], string, unknown[]) => unknown{}[]',
-};
-
-function execute$s(collection, key, value) {
-    const found = collection.find((element) => element[key] === value);
-    return found || null;
+function proxifySubCommands(component) {
+    return new Proxy({}, {
+        get(target, functionName) {
+            return (...functionArgs) => {
+                let execute;
+                if (functionName in target) {
+                    execute = target[functionName];
+                }
+                else {
+                    const def = DefinitionStore.getInstance().getCommand(functionName);
+                    execute = target[functionName] = def.execute;
+                }
+                const commandCtx = {
+                    componentId: component.id,
+                };
+                const result = execute(commandCtx, ...functionArgs);
+                if (result instanceof Observable) {
+                    return firstValueFrom(result);
+                }
+                if (result instanceof Promise) {
+                    return result;
+                }
+                if (isComputed(result)) {
+                    return result.get();
+                }
+                return result;
+            };
+        },
+    });
 }
-const findBy = {
-    kind: 'imperative',
-    execute: execute$s,
-    signature: '(unknown{}[], string, unknown) => unknown',
-};
-
-function execute$r(array) {
-    return array.flat();
+/**
+ * Creates a JavaScript function from a string of code.
+ *
+ * SECURITY WARNING: This function uses `new Function()` to execute dynamic code.
+ * Only use with schemas from trusted sources. Malicious schemas could execute
+ * arbitrary code in the browser context, leading to XSS or data theft.
+ *
+ * The code has access to:
+ * - All registered commands via destructured parameters
+ * - Function arguments via the `args` parameter
+ */
+function createJsFunction(func) {
+    const commandNames = DefinitionStore.getInstance().getCommandNames();
+    const commandsStr = commandNames.length ? `{ ${commandNames.join(', ')} }` : 'commands';
+    return new Function(commandsStr, 'args', `return (async () => { ${func} })();`);
 }
-const flatten = {
-    kind: 'imperative',
-    execute: execute$r,
-    signature: '(unknown[][]) => unknown[]',
-};
 
-function execute$q(value) {
-    return Math.floor(value);
+function execute$f(ctx, selector, item) {
+    ComponentTreeApi.appendArrayItem(ctx.componentId, selector, item);
+    const arrayNode = ComponentTreeApi.findNode(ctx.componentId, selector);
+    if (arrayNode) {
+        // Activate the last item in the array (the one we just appended)
+        const lastIndex = (arrayNode.structure?.length ?? 1) - 1;
+        const newItem = arrayNode.structure?.[lastIndex];
+        if (newItem) {
+            activateNode(newItem);
+        }
+    }
 }
-const floor = {
-    kind: 'imperative',
-    execute: execute$q,
-    signature: '(number) => number',
-};
 
-function createFailedAsyncValue(error) {
-    return {
-        kind: 'promise',
-        current: null,
-        error: error instanceof Error ? error : new Error('Node lookup failed'),
-        pending: false,
-    };
+var appendArrayItem = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    execute: execute$f
+});
+
+function execute$e(ctx, selector, path) {
+    return ComponentTreeApi.collectValuesArray(ctx.componentId, selector, path);
 }
-function warnNodeNotFound(selector) {
-    const baseName = selector.split('.')[0];
-    const isVariable = baseName.startsWith('$');
-    const name = isVariable ? baseName.slice(1) : baseName;
-    const type = isVariable ? 'Variable' : 'Property';
-    log.trace(`${type} "${name}" not found`);
+
+var collectValuesArray$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    execute: execute$e
+});
+
+function execute$d(ctx, selector, objectKey, objectValue) {
+    return ComponentTreeApi.collectValuesMap(ctx.componentId, selector, objectKey, objectValue);
 }
-const getFn = {
-    kind: 'reactive',
-    contextual: true,
-    execute: (ctx, args) => {
-        return computed(() => {
-            const state = new FunctionExecutionStateBuilder();
-            // Check if selector argument is ready
-            const selectorState = args[0].get();
-            const earlyReturn = state.checkReady(selectorState);
-            if (earlyReturn)
-                return earlyReturn;
-            const selector = selectorState.value;
-            const isOptional = selector.includes('?->') || selector.includes('?.');
-            // Try to find the target node
-            let targetNode;
-            try {
-                targetNode = ComponentTreeApi.findNode(ctx.componentId, selector);
-            }
-            catch (error) {
-                // Warn about non-existing variables/properties (only for required selectors)
-                if (!isOptional && error instanceof Error && error.message.includes('not found')) {
-                    warnNodeNotFound(selector);
-                }
-                // Optional selectors return null, required selectors fail with AsyncValue
-                return state.success(isOptional ? null : createFailedAsyncValue(error));
-            }
-            // Handle case where findNode returns null (e.g., optional component selector, or traversing missing path)
-            if (!targetNode) {
-                return state.success(isOptional ? null : createFailedAsyncValue(new Error(`Node not found: ${selector}`)));
-            }
-            // Wrap node value in AsyncValue if needed to propagate evaluating/failed state
-            if (targetNode.evaluating || targetNode.failed) {
-                const asyncValue = {
-                    kind: 'promise',
-                    current: targetNode.extractedValue,
-                    error: targetNode.failed ? new Error('Target node failed') : null,
-                    pending: targetNode.evaluating,
-                };
-                return state.success(asyncValue);
-            }
-            return state.success(targetNode.extractedValue);
-        });
-    },
-    signature: '(string) => unknown',
-};
 
-const execute$p = (a, b) => a > b;
-const gt = {
-    kind: 'imperative',
-    execute: execute$p,
-    signature: '(number, number) => boolean',
-};
+var collectValuesMap$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    execute: execute$d
+});
 
-const execute$o = (a, b) => a >= b;
-const gte = {
-    kind: 'imperative',
-    execute: execute$o,
-    signature: '(number, number) => boolean',
-};
+function execute$c(ctx, selector) {
+    return ComponentTreeApi.findNode(ctx.componentId, selector)?.extractedValue ?? null;
+}
 
-function execute$n(ctx, componentSelector) {
-    return ComponentTreeApi.findComponent(ctx.componentId, componentSelector)?.id ?? null;
+var get = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    execute: execute$c
+});
+
+function execute$b(ctx, selector, index) {
+    ComponentTreeApi.removeArrayItem(ctx.componentId, selector, index);
 }
-const idFn = {
-    kind: 'imperative',
-    contextual: true,
-    execute: execute$n,
-    signature: '(string) => string',
-};
 
-/**
- * Conditional branching with lazy evaluation.
- * Only evaluates the selected branch.
- */
-const ifFn = {
-    kind: 'reactive',
-    execute: (args) => {
-        if (args.length !== 3) {
-            throw new Error('if requires exactly 3 arguments: condition, trueValue, falseValue');
-        }
-        const [conditionComputed, trueComputed, falseComputed] = args;
-        return computed(() => {
-            const state = new FunctionExecutionStateBuilder();
-            const conditionState = conditionComputed.get();
-            const earlyReturn = state.checkReady(conditionState);
-            if (earlyReturn)
-                return earlyReturn;
-            const branchState = conditionState.value ? trueComputed.get() : falseComputed.get();
-            const branchEarlyReturn = state.checkReady(branchState);
-            if (branchEarlyReturn)
-                return branchEarlyReturn;
-            return state.success(branchState.value);
-        });
-    },
-    signature: '(unknown, unknown, unknown) => unknown',
-};
+var removeArrayItem = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    execute: execute$b
+});
 
-function execute$m(collection, value) {
-    if (collection instanceof Set) {
-        return collection.has(value);
-    }
-    return collection.includes(value);
+function execute$a(ctx, selector, ...args) {
+    return ComponentTreeApi.runCommandNode(ctx.componentId, selector, ...args);
 }
-const inFn = {
-    kind: 'imperative',
-    execute: execute$m,
-    signature: '(unknown[], unknown) => boolean',
-};
 
-function replacer(_key, value) {
-    if (value instanceof Set) {
-        return Array.from(value);
+var run = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    execute: execute$a
+});
+
+function execute$9(ctx, componentSelector, methodName, ...args) {
+    const component = ComponentTreeApi.getComponent(ctx.componentId, componentSelector);
+    const instance = componentInstanceMap.get(component.id);
+    if (!instance) {
+        throw new Error(`Cannot find component instance for component with id "${component.id}"`);
     }
-    return value;
-}
-function execute$l(arg) {
-    return JSON.stringify(arg, replacer);
+    const method = instance[methodName];
+    if (!method || typeof method !== 'function') {
+        throw new Error(`Cannot find method "${methodName}" in component of type "${component.componentType}"`);
+    }
+    return method.call(instance, ...args);
 }
-const json = {
-    kind: 'imperative',
-    execute: execute$l,
-    signature: '(unknown) => string',
-};
 
-function execute$k(object) {
-    return Object.keys(object);
-}
-const keys = {
-    kind: 'imperative',
-    execute: execute$k,
-    signature: '(unknown{}) => string[]',
-};
+var runComponentMethod = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    execute: execute$9
+});
 
-function execute$j(value) {
-    return value.length;
+function execute$8(ctx, selector, value) {
+    ComponentTreeApi.setNodeRawSchema(ctx.componentId, selector, value);
+    const node = ComponentTreeApi.findNode(ctx.componentId, selector);
+    if (node) {
+        activateStructure(node);
+    }
 }
-const length = {
-    kind: 'imperative',
-    execute: execute$j,
-    signature: '(unknown[]) => number',
-};
-
-const execute$i = (a, b) => a < b;
-const lt = {
-    kind: 'imperative',
-    execute: execute$i,
-    signature: '(number, number) => boolean',
-};
 
-const execute$h = (a, b) => a <= b;
-const lte = {
-    kind: 'imperative',
-    execute: execute$h,
-    signature: '(number, number) => boolean',
-};
+var set = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    execute: execute$8
+});
 
-function execute$g(num, delta) {
-    return num - delta;
-}
-const minus = {
-    kind: 'imperative',
-    execute: execute$g,
-    signature: '(number, number) => number',
+const commands = {
+    collectValuesMap: collectValuesMap$1,
+    collectValuesArray: collectValuesArray$1,
+    // Legacy aliases
+    propObject: collectValuesMap$1,
+    propArray: collectValuesArray$1,
+    appendArrayItem,
+    removeArrayItem,
+    runComponentMethod,
+    get,
+    set,
+    run,
 };
 
-function execute$f(num1, num2) {
-    return num1 * num2;
-}
-const multiply = {
-    kind: 'imperative',
-    execute: execute$f,
-    signature: '(number, number) => number',
+const componentsDefinitions$2 = {
+    'sys.Box': {
+        properties: {
+            'content@component': null,
+        },
+    },
+    'sys.Group': {
+        properties: {
+            'children@component[]': [],
+        },
+    },
+    'sys.RefSpace': {
+        traits: ['sys.Box'],
+        properties: {},
+    },
+    'sys.Facade': {
+        traits: ['sys.Box'],
+        properties: {},
+    },
 };
 
-const execute$e = (a, b) => a !== b;
-const neq = {
+function execute$7(ctx, selector, path) {
+    return ComponentTreeApi.collectValuesArray(ctx.componentId, selector, path);
+}
+const collectValuesArray = {
     kind: 'imperative',
-    execute: execute$e,
-    signature: '(unknown, unknown) => boolean',
+    contextual: true,
+    execute: execute$7,
+    signature: '(string, string) => unknown[]',
 };
 
-function execute$d(value) {
-    return !value;
+function execute$6(ctx, selector, objectKey, objectValue) {
+    return ComponentTreeApi.collectValuesMap(ctx.componentId, selector, objectKey, objectValue);
 }
-const not = {
+const collectValuesMap = {
     kind: 'imperative',
-    execute: execute$d,
-    signature: '(unknown) => boolean',
+    contextual: true,
+    execute: execute$6,
+    signature: '(string, string, string) => unknown{}',
 };
 
-function execute$c(value) {
-    const number = Number(value);
-    if (Number.isNaN(number)) {
-        throw new Error(`Cannot convert value ${value} to number`);
-    }
-    return number;
+function execute$5(ctx, selector) {
+    return ComponentTreeApi.getNode(ctx.componentId, selector).evaluating;
 }
-const number = {
+const evaluating = {
     kind: 'imperative',
-    execute: execute$c,
-    signature: '(unknown) => number',
+    contextual: true,
+    execute: execute$5,
+    signature: '(string) => boolean',
 };
 
-function execute$b(parts) {
-    const result = {};
-    for (let i = 0; i < parts.length; i += 2) {
-        const key = parts[i];
-        if (typeof key !== 'string') {
-            throw new Error(`Invalid key type: ${typeof key}. Expected string`);
-        }
-        result[key] = parts[i + 1];
-    }
-    return result;
+function execute$4(ctx, selector) {
+    return ComponentTreeApi.getNode(ctx.componentId, selector).failed;
 }
-const objectFn = {
+const failed = {
     kind: 'imperative',
-    execute: execute$b,
-    signature: '(unknown[]) => unknown{}',
+    contextual: true,
+    execute: execute$4,
+    signature: '(string) => boolean',
 };
 
-/**
- * Variadic OR function with short-circuit evaluation.
- * Stops at the first truthy value.
- */
-const or = {
+function createFailedAsyncValue(error) {
+    return {
+        kind: 'promise',
+        current: null,
+        error: error instanceof Error ? error : new Error('Node lookup failed'),
+        pending: false,
+    };
+}
+function warnNodeNotFound(selector) {
+    const baseName = selector.split('.')[0];
+    const isVariable = baseName.startsWith('$');
+    const name = isVariable ? baseName.slice(1) : baseName;
+    const type = isVariable ? 'Variable' : 'Property';
+    log.trace(`${type} "${name}" not found`);
+}
+const getFn = {
     kind: 'reactive',
-    execute: (args) => {
-        if (args.length === 0) {
-            throw new Error('or requires at least 1 argument');
-        }
+    contextual: true,
+    execute: (ctx, args) => {
         return computed(() => {
             const state = new FunctionExecutionStateBuilder();
-            for (const argComputed of args) {
-                const argState = argComputed.get();
-                const earlyReturn = state.checkReady(argState);
-                if (earlyReturn)
-                    return earlyReturn;
-                if (argState.value) {
-                    return state.success(true);
+            // Check if selector argument is ready
+            const selectorState = args[0].get();
+            const earlyReturn = state.checkReady(selectorState);
+            if (earlyReturn)
+                return earlyReturn;
+            const selector = selectorState.value;
+            const isOptional = selector.includes('?->') || selector.includes('?.');
+            // Try to find the target node
+            let targetNode;
+            try {
+                targetNode = ComponentTreeApi.findNode(ctx.componentId, selector);
+            }
+            catch (error) {
+                // Warn about non-existing variables/properties (only for required selectors)
+                if (!isOptional && error instanceof Error && error.message.includes('not found')) {
+                    warnNodeNotFound(selector);
                 }
+                // Optional selectors return null, required selectors fail with AsyncValue
+                return state.success(isOptional ? null : createFailedAsyncValue(error));
             }
-            return state.success(false);
+            // Handle case where findNode returns null (e.g., optional component selector, or traversing missing path)
+            if (!targetNode) {
+                return state.success(isOptional ? null : createFailedAsyncValue(new Error(`Node not found: ${selector}`)));
+            }
+            // Wrap node value in AsyncValue if needed to propagate evaluating/failed state
+            if (targetNode.evaluating || targetNode.failed) {
+                const asyncValue = {
+                    kind: 'promise',
+                    current: targetNode.extractedValue,
+                    error: targetNode.failed ? new Error('Target node failed') : null,
+                    pending: targetNode.evaluating,
+                };
+                return state.success(asyncValue);
+            }
+            return state.success(targetNode.extractedValue);
         });
     },
-    signature: '(...unknown) => boolean',
-};
-
-function execute$a(source, path) {
-    return path.reduce((current, step) => {
-        return current?.[step];
-    }, source);
-}
-const pluck = {
-    kind: 'imperative',
-    execute: execute$a,
-    signature: '(unknown{}, string[]) => unknown',
+    signature: '(string) => unknown',
 };
 
-function execute$9(a, b) {
-    return a + b;
+function execute$3(ctx, componentSelector) {
+    return ComponentTreeApi.findComponent(ctx.componentId, componentSelector)?.id ?? null;
 }
-const plus = {
+const idFn = {
     kind: 'imperative',
-    execute: execute$9,
-    signature: '(unknown, unknown) => unknown',
+    contextual: true,
+    execute: execute$3,
+    signature: '(string) => string',
 };
 
 /**
@@ -1723,7 +2119,7 @@ function getNestedProperty(obj, path) {
     }
     return current;
 }
-function execute$8(dimensions, content) {
+function execute$2(dimensions, content) {
     return generateCombinations(dimensions).map(({ variables }) => ({
         componentType: 'sys.RefSpace',
         content,
@@ -1789,365 +2185,55 @@ function generateCombinations(dimensions) {
                     keyPart = index;
                 }
                 const prevKey = result.key;
-                const key = dimensionIndex === 0 ? keyPart : `${prevKey}:${keyPart}`;
-                newVariables[`${Delimiters.Variable}trackBy`] = {
-                    _valueType: { type: 'string' },
-                    _value: String(key),
-                    _computation: null,
-                    _binding: null,
-                };
-                tempResults.push({ variables: newVariables, key });
-            });
-        });
-        results = tempResults;
-    });
-    return results;
-}
-const repeat = {
-    kind: 'imperative',
-    execute: execute$8,
-    signature: '({items: unknown[], itemsType: unknown, item: string, index: string, first: unknown, last: unknown, trackBy: unknown}[], componentSchema) => componentSchema[]',
-};
-
-function execute$7(value, precision = 0) {
-    const multiplier = Math.pow(10, precision);
-    return Math.round(value * multiplier) / multiplier;
-}
-const round = {
-    kind: 'imperative',
-    execute: execute$7,
-    signature: '(number, number) => number',
-};
-
-function execute$6(ctx, selector) {
-    return ComponentTreeApi.isCommandRunning(ctx.componentId, selector);
-}
-const running = {
-    kind: 'imperative',
-    contextual: true,
-    execute: execute$6,
-    signature: '(string) => boolean',
-};
-
-function execute$5(value, start, end) {
-    return value.slice(start, end);
-}
-const slice = {
-    kind: 'imperative',
-    execute: execute$5,
-    signature: '(unknown[], number, number) => unknown[]',
-};
-
-function execute$4(items) {
-    return items.some((item) => !!item);
-}
-const some = {
-    kind: 'imperative',
-    execute: execute$4,
-    signature: '(unknown[]) => boolean',
-};
-
-function execute$3(value) {
-    return String(value);
-}
-const string = {
-    kind: 'imperative',
-    execute: execute$3,
-    signature: '(unknown) => string',
-};
-
-/**
- * Switch statement with lazy case evaluation.
- * Supports array mode (legacy) and variadic mode.
- */
-const switchFn = {
-    kind: 'reactive',
-    execute: (args) => {
-        if (args.length < 2) {
-            throw new Error('switch requires at least 2 arguments: value and default');
-        }
-        const valueComputed = args[0];
-        return computed(() => {
-            const state = new FunctionExecutionStateBuilder();
-            const valueState = valueComputed.get();
-            const earlyReturn = state.checkReady(valueState);
-            if (earlyReturn)
-                return earlyReturn;
-            const value = valueState.value;
-            if (args.length === 3) {
-                const casesState = args[1].get();
-                const defaultState = args[2].get();
-                const casesEarlyReturn = state.checkReady(casesState);
-                if (casesEarlyReturn)
-                    return casesEarlyReturn;
-                const defaultEarlyReturn = state.checkReady(defaultState);
-                if (defaultEarlyReturn)
-                    return defaultEarlyReturn;
-                const cases = casesState.value;
-                if (Array.isArray(cases)) {
-                    if (cases.length % 2 !== 0) {
-                        throw new Error('Cases array should have even number of elements');
-                    }
-                    const matchIndex = cases.findIndex((caseValue, index) => index % 2 === 0 && caseValue === value);
-                    const returnValue = matchIndex >= 0 ? cases[matchIndex + 1] : defaultState.value;
-                    return state.success(returnValue);
-                }
-            }
-            const defaultComputed = args[args.length - 1];
-            const caseArgs = args.slice(1, -1);
-            if (caseArgs.length % 2 !== 0) {
-                throw new Error('switch requires an even number of case arguments (key-value pairs)');
-            }
-            for (let i = 0; i < caseArgs.length; i += 2) {
-                const caseKeyComputed = caseArgs[i];
-                const caseValueComputed = caseArgs[i + 1];
-                const caseKeyState = caseKeyComputed.get();
-                const keyEarlyReturn = state.checkReady(caseKeyState);
-                if (keyEarlyReturn)
-                    return keyEarlyReturn;
-                const caseKey = caseKeyState.value;
-                if (caseKey === value) {
-                    const caseValueState = caseValueComputed.get();
-                    const valueEarlyReturn = state.checkReady(caseValueState);
-                    if (valueEarlyReturn)
-                        return valueEarlyReturn;
-                    return state.success(caseValueState.value);
-                }
-            }
-            const defaultState = defaultComputed.get();
-            const defaultEarlyReturn = state.checkReady(defaultState);
-            if (defaultEarlyReturn)
-                return defaultEarlyReturn;
-            return state.success(defaultState.value);
+                const key = dimensionIndex === 0 ? keyPart : `${prevKey}:${keyPart}`;
+                newVariables[`${Delimiters.Variable}trackBy`] = {
+                    _valueType: { type: 'string' },
+                    _value: String(key),
+                    _computation: null,
+                    _binding: null,
+                };
+                tempResults.push({ variables: newVariables, key });
+            });
         });
-    },
-    signature: '(...unknown) => unknown',
-};
-
-function execute$2(value) {
-    return value.toLowerCase();
+        results = tempResults;
+    });
+    return results;
 }
-const toLowerCase = {
+const repeat = {
     kind: 'imperative',
     execute: execute$2,
-    signature: '(string) => string',
+    signature: '({items: unknown[], itemsType: unknown, item: string, index: string, first: unknown, last: unknown, trackBy: unknown}[], componentSchema) => componentSchema[]',
 };
 
-function execute$1(value) {
-    return value.toUpperCase();
+function execute$1(ctx, selector) {
+    return ComponentTreeApi.isCommandRunning(ctx.componentId, selector);
 }
-const toUpperCase = {
+const running = {
     kind: 'imperative',
+    contextual: true,
     execute: execute$1,
-    signature: '(string) => string',
+    signature: '(string) => boolean',
 };
 
-/**
- * All formula functions available in the system.
- *
- * Control flow functions use reactive implementations with lazy evaluation:
- * - `if`: Conditional evaluation (3 args: condition, trueValue, falseValue)
- * - `and`, `or`: Variadic logical operators with short-circuit evaluation
- * - `switch`: Variadic pattern matching with lazy case evaluation
- * - `some`, `every`: Array element checkers (imperative, not lazy)
- */
 const formulaFunctions$1 = {
-    // Collection functions
     collectValuesMap,
     collectValuesArray,
     propObject: collectValuesMap,
     propArray: collectValuesArray,
-    findBy,
-    findAllBy,
-    at,
-    not,
-    equal,
-    // Array element checkers (imperative)
-    some,
-    every,
-    // Control flow (reactive with lazy evaluation)
-    if: ifFn,
-    and,
-    or,
-    switch: switchFn,
-    // Utilities
-    in: inFn,
-    object: objectFn,
-    bool,
-    length,
-    empty,
-    concat,
-    pluck,
-    flatten,
-    json,
-    minus,
-    plus,
-    divide,
-    multiply,
-    running,
     get: getFn,
     id: idFn,
-    repeat,
-    emptyObject,
-    arrayPluck,
-    string,
-    number,
-    delay,
     evaluating,
     failed,
-    keys,
-    toUpperCase,
-    toLowerCase,
-    ceil,
-    floor,
-    round,
-    slice,
-    filterIn,
-    eq,
-    neq,
-    gt,
-    lt,
-    gte,
-    lte,
+    running,
+    repeat,
 };
 
-function registerCommonDefinitions() {
-    const defStore = DefinitionStore.getInstance();
-    defStore.setCommands(commands);
-    // Register all functions (FunctionRegistry wraps imperative functions automatically)
-    FunctionRegistry.getInstance().setFunctions(formulaFunctions$1);
-}
-
-const compiledCache = new WeakMap();
-function getOrCompile(structure, key) {
-    let cached = compiledCache.get(structure);
-    if (!cached) {
-        cached = {};
-        compiledCache.set(structure, cached);
-    }
-    if (!cached[key]) {
-        cached[key] = createJsFunction(structure[key]);
-    }
-    return cached[key];
-}
-async function runCommand(node, ...args) {
-    const structure = node.structure;
-    if (!structure) {
-        const comp = node.position.componentId
-            ? ComponentStore.getInstance().getComponent(node.position.componentId)
-            : null;
-        const src = comp?.sourceUrl ? `[${comp.sourceUrl}] ` : '';
-        log.trace(`${src}Command is empty — no handler was bound to it.`);
-        return null;
-    }
-    const component = ComponentStore.getInstance().getComponentOrThrow(structure.owner);
-    const src = component.sourceUrl ? `[${component.sourceUrl}] ` : '';
-    const functionsProxy = proxifySubCommands(component);
-    try {
-        if (structure.init) {
-            log.trace(`${src}Running init hook`);
-            const initFunc = getOrCompile(structure, 'init');
-            await initFunc(functionsProxy, args);
-        }
-        if (structure.runnerType === 'inline') {
-            log.trace(`${src}Executing inline callback (${args.length} args)`);
-            return await structure.target(...args);
-        }
-        const preview = structure.target.slice(0, 80);
-        log.trace(`${src}Executing command: ${preview}`);
-        const targetFunc = getOrCompile(structure, 'target');
-        return await targetFunc(functionsProxy, args);
-    }
-    catch (e) {
-        throw new Error(`${src}Error executing ${structure.runnerType === 'inline' ? 'inline callback' : 'command'}`, {
-            cause: e,
-        });
-    }
-    finally {
-        if (structure.finalize) {
-            try {
-                log.trace(`${src}Running finalize hook`);
-                const finalizeFunc = getOrCompile(structure, 'finalize');
-                await finalizeFunc(functionsProxy, args);
-            }
-            catch (finalizeError) {
-                log.error(`${src}Error in finalize hook`, finalizeError);
-            }
-        }
-    }
-}
-function proxifySubCommands(component) {
-    return new Proxy({}, {
-        get(target, functionName) {
-            return (...functionArgs) => {
-                let execute;
-                if (functionName in target) {
-                    execute = target[functionName];
-                }
-                else {
-                    const def = DefinitionStore.getInstance().getCommand(functionName);
-                    execute = target[functionName] = def.execute;
-                }
-                const commandCtx = {
-                    componentId: component.id,
-                };
-                const result = execute(commandCtx, ...functionArgs);
-                if (result instanceof Observable) {
-                    return firstValueFrom(result);
-                }
-                if (result instanceof Promise) {
-                    return result;
-                }
-                if (isComputed(result)) {
-                    return result.get();
-                }
-                return result;
-            };
-        },
-    });
-}
-/**
- * Creates a JavaScript function from a string of code.
- *
- * SECURITY WARNING: This function uses `new Function()` to execute dynamic code.
- * Only use with schemas from trusted sources. Malicious schemas could execute
- * arbitrary code in the browser context, leading to XSS or data theft.
- *
- * The code has access to:
- * - All registered commands via destructured parameters
- * - Function arguments via the `args` parameter
- */
-function createJsFunction(func) {
-    const commandNames = DefinitionStore.getInstance().getCommandNames();
-    const commandsStr = commandNames.length ? `{ ${commandNames.join(', ')} }` : 'commands';
-    return new Function(commandsStr, 'args', `return (async () => { ${func} })();`);
-}
-
-const componentsDefinitions$2 = {
-    'sys.Box': {
-        properties: {
-            'content@component': null,
-        },
-    },
-    'sys.Group': {
-        properties: {
-            'children@component[]': [],
-        },
-    },
-    'sys.RefSpace': {
-        traits: ['sys.Box'],
-        properties: {},
-    },
-    'sys.Facade': {
-        traits: ['sys.Box'],
-        properties: {},
-    },
+const sys = {
+    definitions: componentsDefinitions$2,
+    commands,
+    functions: formulaFunctions$1,
 };
 
-function autoRegisterCommonDefinitions() {
-    DefinitionStore.getInstance().setComponents(unfoldComponentDefinitions(componentsDefinitions$2));
-}
-
 const componentsDefinitions$1 = {
     'browser.Styled': {
         properties: {
@@ -2166,26 +2252,92 @@ const componentsDefinitions$1 = {
         properties: {
             'click@()': null,
             'stopPropagation@boolean': null,
+            'contextMenu@()': null,
         },
     },
     'browser.Focusable': {
         traits: ['sys.Box'],
         properties: {
             'tabIndex@number': null,
-            'blur@command': null,
+            'blur@()': null,
         },
     },
     'browser.Dialog': {
         traits: ['sys.Box', 'browser.Styled'],
         properties: {
-            'close@(unknown)': null,
+            'close@()': null,
+        },
+    },
+    'browser.Popover': {
+        traits: ['sys.Box', 'browser.Styled'],
+        properties: {
+            'close@()': null,
+            'mode@string': 'auto',
+            'anchor@string': null,
+            'positionArea@string': null,
+        },
+    },
+    'browser.Link': {
+        traits: ['sys.Group', 'browser.Styled'],
+        properties: {
+            'href@string': null,
+            'target@string': null,
+            'rel@string': null,
+        },
+    },
+    'browser.Image': {
+        traits: ['browser.Styled'],
+        properties: {
+            'src@string': null,
+            'alt@string': null,
+            'loading@string': null,
+        },
+    },
+    'browser.Hoverable': {
+        traits: ['sys.Box'],
+        properties: {
+            'mouseEnter@()': null,
+            'mouseLeave@()': null,
+        },
+    },
+    'browser.KeyListener': {
+        traits: ['sys.Box'],
+        properties: {
+            'keyDown@(string)': null,
+            'keyUp@(string)': null,
+        },
+    },
+    'browser.Scrollable': {
+        traits: ['sys.Box'],
+        properties: {
+            'scroll@()': null,
+        },
+    },
+    'browser.Animated': {
+        traits: ['sys.Box'],
+        properties: {
+            'animationEnd@()': null,
+            'transitionEnd@()': null,
+        },
+    },
+    'browser.Visible': {
+        traits: ['sys.Box'],
+        properties: {
+            'visible@()': null,
+            'invisible@()': null,
+        },
+    },
+    'browser.Resizable': {
+        traits: ['sys.Box'],
+        properties: {
+            'resize@()': null,
         },
     },
 };
 
-function autoRegisterBrowserDefinitions() {
-    DefinitionStore.getInstance().setComponents(unfoldComponentDefinitions(componentsDefinitions$1));
-}
+const browser = {
+    definitions: componentsDefinitions$1,
+};
 
 const componentsDefinitions = {
     'forms.Input': {
@@ -2483,12 +2635,14 @@ function registerShapes() {
         },
     });
 }
-function autoRegisterFormsDefinitions() {
-    registerShapes();
-    registerValidators(validators);
-    FunctionRegistry.getInstance().setFunctions(formulaFunctions);
-    DefinitionStore.getInstance().setComponents(unfoldComponentDefinitions(componentsDefinitions));
-}
+const forms = {
+    definitions: componentsDefinitions,
+    functions: formulaFunctions,
+    setup() {
+        registerShapes();
+        registerValidators(validators);
+    },
+};
 
 function initRuntime() {
     componentTreeConfig.runCommand = runCommand;
@@ -2498,5 +2652,5 @@ function initRuntime() {
  * Generated bundle index. Do not edit.
  */
 
-export { activateNode, activateStructure, autoRegisterBrowserDefinitions, autoRegisterCommonDefinitions, autoRegisterFormsDefinitions, componentInstanceMap, debugName, initRuntime, registerCommonDefinitions, registerValidator, registerValidators, runCommand, templateLoadingTracker };
+export { activateNode, activateStructure, browser, common, componentInstanceMap, debugName, forms, initRuntime, registerPlugin, registerPlugins, registerValidator, registerValidators, runCommand, sys, templateLoadingTracker };
 //# sourceMappingURL=kaskad-core.mjs.map