@kaskad/core 0.0.1

package/fesm2022/kaskad-core.mjs

@@ -0,0 +1,2502 @@
+export * from '@kaskad/types';
+import { DefinitionStore } from '@kaskad/definition';
+export * from '@kaskad/definition';
+import { isObject, loadTemplates, templateRegistry, unfoldNodeSchema, unfoldComponentDefinitions } from '@kaskad/schema';
+export { loadTemplates, templateRegistry, unfoldComponentDefinitions, unfoldNodeSchema } from '@kaskad/schema';
+import { evaluateNode, FunctionExecutionStateBuilder, FunctionRegistry, 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 { log, Delimiters } from '@kaskad/config';
+import { parseFormula } from '@kaskad/formula-parser';
+import { Observable, firstValueFrom } from 'rxjs';
+
+class TemplateLoadingTracker {
+    pendingLoads = new Set();
+    completionPromise = null;
+    resolveCompletion = null;
+    get allLoadsComplete() {
+        if (!this.completionPromise) {
+            return Promise.resolve();
+        }
+        return this.completionPromise;
+    }
+    startLoading(templateKey) {
+        this.pendingLoads.add(templateKey);
+        if (!this.completionPromise) {
+            this.completionPromise = new Promise((resolve) => {
+                this.resolveCompletion = resolve;
+            });
+        }
+    }
+    finishLoading(templateKey) {
+        // Only process if this load was actually being tracked
+        if (!this.pendingLoads.has(templateKey)) {
+            return;
+        }
+        this.pendingLoads.delete(templateKey);
+        if (this.pendingLoads.size === 0) {
+            this.resolveCompletion?.();
+            this.completionPromise = null;
+            this.resolveCompletion = null;
+        }
+    }
+}
+// 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),
+});
+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 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)],
+    };
+};
+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 lowerFormulaAstNode(astNode) {
+    const lowerer = astNodeLowerers[astNode.type];
+    if (lowerer) {
+        return lowerer(astNode);
+    }
+    throw new Error(`Unsupported Formula AST node type: ${astNode.type}`);
+}
+
+function lowerFormula(formula) {
+    let formulaAst;
+    try {
+        formulaAst = parseFormula(formula);
+    }
+    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,
+    });
+    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 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 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);
+}
+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 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 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 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);
+    }
+}
+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 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 { 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 };
+        }
+        else if (nodeChanged) {
+            componentValues = syncNodeValueAndComponents(currentValue, evalState, preservedNodeValue);
+        }
+        else {
+            componentValues = syncComponentsAndPreserved(evalState, preservedNodeValue, currentValue);
+        }
+        const selectionValue = toSelectionSet(componentValues);
+        runInAction(() => {
+            const store = ComponentStore.getInstance();
+            store.setNodeRawSchema(node, selectionValue);
+            updateComponentsValues(componentsIds, componentValues, keyProp, valueProp);
+        });
+    }, { fireImmediately: true, equals: comparer.structural });
+    node.disposers.push(disposer);
+}
+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];
+        }
+    }
+    for (const key of Object.keys(evalState.value)) {
+        if (!(key in componentValues)) {
+            componentValues[key] = false;
+        }
+    }
+    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];
+            }
+        }
+    }
+    // Include user changes not yet in preservedNodeValue
+    for (const key of Object.keys(currentValue)) {
+        if (!(key in componentValues)) {
+            componentValues[key] = currentValue[key];
+        }
+    }
+    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);
+    }
+}
+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;
+    }
+}
+
+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 };
+    }
+    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 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}`);
+}
+
+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,
+    };
+}
+function lowerIfStatement(ifNode) {
+    return {
+        type: 'function',
+        name: 'if',
+        args: [lowerSchema(ifNode.if), lowerSchema(ifNode.then), lowerSchema(ifNode.else)],
+    };
+}
+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],
+    };
+}
+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}`);
+}
+
+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 evalNode = lowerComputationSchema(currentFrame.schema);
+    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);
+            }
+        }
+    }, { 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);
+            }
+            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;
+            }
+        }, {
+            // Fire immediately on setup to handle initial state
+            fireImmediately: true,
+        });
+        component.handlerDisposers.push(disposer);
+    }
+}
+
+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);
+}
+
+function activateMapStructure(node) {
+    const structure = node.structure;
+    if (structure === null) {
+        return;
+    }
+    for (const item of Object.values(structure)) {
+        activateNode(item);
+    }
+}
+
+function activateObjectStructure(node) {
+    const structure = node.structure;
+    if (structure === null) {
+        return;
+    }
+    for (const node of Object.values(structure)) {
+        activateNode(node);
+    }
+}
+
+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 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 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 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();
+}
+
+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;
+}
+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;
+}
+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 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) {
+        return;
+    }
+    // Idempotency: don't re-activate an already activated frame
+    if (frame.activated) {
+        return;
+    }
+    const activator = computationActivators[frame.schema.computationType];
+    if (activator) {
+        activator(node);
+    }
+}
+
+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();
+}
+
+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);
+        }
+    }
+}
+
+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);
+}
+
+var collectValuesMap$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    execute: execute$R
+});
+
+function execute$Q(_ctx, ms) {
+    return new Promise((resolve) => setTimeout(() => resolve(), ms));
+}
+
+var delay$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    execute: execute$Q
+});
+
+function execute$P(ctx, selector) {
+    return ComponentTreeApi.findNode(ctx.componentId, selector)?.extractedValue ?? null;
+}
+
+var get = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    execute: execute$P
+});
+
+function execute$O(ctx, selector, index) {
+    ComponentTreeApi.removeArrayItem(ctx.componentId, selector, index);
+}
+
+var removeArrayItem = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    execute: execute$O
+});
+
+function execute$N(ctx, selector, ...args) {
+    return ComponentTreeApi.runCommandNode(ctx.componentId, selector, ...args);
+}
+
+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}"`);
+    }
+    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);
+}
+
+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);
+    }
+}
+
+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.
+ */
+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',
+};
+
+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];
+}
+const at = {
+    kind: 'imperative',
+    execute: execute$J,
+    signature: '(unknown[], number) => unknown',
+};
+
+function execute$I(value) {
+    return Boolean(value);
+}
+const bool = {
+    kind: 'imperative',
+    execute: execute$I,
+    signature: '(unknown) => boolean',
+};
+
+function execute$H(value) {
+    return Math.ceil(value);
+}
+const ceil = {
+    kind: 'imperative',
+    execute: execute$H,
+    signature: '(number) => number',
+};
+
+function execute$G(ctx, selector, path) {
+    return ComponentTreeApi.collectValuesArray(ctx.componentId, selector, path);
+}
+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);
+}
+const collectValuesMap = {
+    kind: 'imperative',
+    contextual: true,
+    execute: execute$F,
+    signature: '(string, string, string) => unknown{}',
+};
+
+function execute$E(strings, separator = '') {
+    return strings.join(separator);
+}
+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',
+};
+
+function execute$C(num1, num2) {
+    return num1 / num2;
+}
+const divide = {
+    kind: 'imperative',
+    execute: execute$C,
+    signature: '(number, number) => number',
+};
+
+function execute$B(items) {
+    return items.length === 0;
+}
+const empty = {
+    kind: 'imperative',
+    execute: execute$B,
+    signature: '(unknown[]) => boolean',
+};
+
+function execute$A(object) {
+    return Object.keys(object).length === 0;
+}
+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;
+}
+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',
+};
+
+function execute$w(items) {
+    return items.every((item) => !!item);
+}
+const every = {
+    kind: 'imperative',
+    execute: execute$w,
+    signature: '(unknown[]) => boolean',
+};
+
+function execute$v(ctx, selector) {
+    return ComponentTreeApi.getNode(ctx.componentId, selector).failed;
+}
+const failed = {
+    kind: 'imperative',
+    contextual: true,
+    execute: execute$v,
+    signature: '(string) => boolean',
+};
+
+function execute$u(array, allowedValues) {
+    if (!allowedValues) {
+        return [];
+    }
+    if (allowedValues instanceof Set) {
+        return array.filter((item) => allowedValues.has(item));
+    }
+    return array.filter((item) => allowedValues.includes(item));
+}
+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);
+}
+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;
+}
+const findBy = {
+    kind: 'imperative',
+    execute: execute$s,
+    signature: '(unknown{}[], string, unknown) => unknown',
+};
+
+function execute$r(array) {
+    return array.flat();
+}
+const flatten = {
+    kind: 'imperative',
+    execute: execute$r,
+    signature: '(unknown[][]) => unknown[]',
+};
+
+function execute$q(value) {
+    return Math.floor(value);
+}
+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,
+    };
+}
+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',
+    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',
+};
+
+const execute$o = (a, b) => a >= b;
+const gte = {
+    kind: 'imperative',
+    execute: execute$o,
+    signature: '(number, number) => boolean',
+};
+
+function execute$n(ctx, componentSelector) {
+    return ComponentTreeApi.findComponent(ctx.componentId, componentSelector)?.id ?? null;
+}
+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',
+};
+
+function execute$m(collection, value) {
+    if (collection instanceof Set) {
+        return collection.has(value);
+    }
+    return collection.includes(value);
+}
+const inFn = {
+    kind: 'imperative',
+    execute: execute$m,
+    signature: '(unknown[], unknown) => boolean',
+};
+
+function replacer(_key, value) {
+    if (value instanceof Set) {
+        return Array.from(value);
+    }
+    return value;
+}
+function execute$l(arg) {
+    return JSON.stringify(arg, replacer);
+}
+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[]',
+};
+
+function execute$j(value) {
+    return value.length;
+}
+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',
+};
+
+function execute$g(num, delta) {
+    return num - delta;
+}
+const minus = {
+    kind: 'imperative',
+    execute: execute$g,
+    signature: '(number, number) => number',
+};
+
+function execute$f(num1, num2) {
+    return num1 * num2;
+}
+const multiply = {
+    kind: 'imperative',
+    execute: execute$f,
+    signature: '(number, number) => number',
+};
+
+const execute$e = (a, b) => a !== b;
+const neq = {
+    kind: 'imperative',
+    execute: execute$e,
+    signature: '(unknown, unknown) => boolean',
+};
+
+function execute$d(value) {
+    return !value;
+}
+const not = {
+    kind: 'imperative',
+    execute: execute$d,
+    signature: '(unknown) => boolean',
+};
+
+function execute$c(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$c,
+    signature: '(unknown) => number',
+};
+
+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;
+}
+const objectFn = {
+    kind: 'imperative',
+    execute: execute$b,
+    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');
+        }
+        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);
+        });
+    },
+    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',
+};
+
+function execute$9(a, b) {
+    return a + b;
+}
+const plus = {
+    kind: 'imperative',
+    execute: execute$9,
+    signature: '(unknown, unknown) => unknown',
+};
+
+/**
+ * Get a nested property value from an object using dot notation
+ * e.g., getNestedProperty({ user: { id: 123 } }, "user.id") => 123
+ */
+function getNestedProperty(obj, path) {
+    if (obj === null || obj === undefined) {
+        return undefined;
+    }
+    const parts = path.split('.');
+    let current = obj;
+    for (const part of parts) {
+        if (current === null || current === undefined || typeof current !== 'object') {
+            return undefined;
+        }
+        current = current[part];
+    }
+    return current;
+}
+function execute$8(dimensions, content) {
+    return generateCombinations(dimensions).map(({ variables }) => ({
+        componentType: 'sys.RefSpace',
+        content,
+        ...variables,
+    }));
+}
+function generateCombinations(dimensions) {
+    let results = [{ variables: {}, key: 0 }];
+    dimensions.forEach((dimension, dimensionIndex) => {
+        const tempResults = [];
+        results.forEach((result) => {
+            dimension.items.forEach((item, index) => {
+                const newVariables = {
+                    ...result.variables,
+                    [`${Delimiters.Variable}${dimension.index}`]: {
+                        _valueType: { type: 'number' },
+                        _value: index,
+                        _computation: null,
+                        _binding: null,
+                    },
+                    [`${Delimiters.Variable}${dimension.item}`]: {
+                        _valueType: dimension.itemsType.item,
+                        _value: item,
+                        _computation: null,
+                        _binding: null,
+                    },
+                };
+                if (dimension.first !== null) {
+                    newVariables[`${Delimiters.Variable}first`] = {
+                        _valueType: { type: 'boolean' },
+                        _value: index === 0,
+                        _computation: null,
+                        _binding: null,
+                    };
+                }
+                if (dimension.last !== null) {
+                    newVariables[`${Delimiters.Variable}last`] = {
+                        _valueType: { type: 'boolean' },
+                        _value: dimension.items.length - 1 === index,
+                        _computation: null,
+                        _binding: null,
+                    };
+                }
+                // Compute key for stable identity tracking
+                // dimension.trackBy: null = use index, "" = use item value, "prop" = use property
+                let keyPart;
+                if (dimension.trackBy !== null) {
+                    let trackByValue;
+                    if (dimension.trackBy === '') {
+                        trackByValue = item;
+                    }
+                    else {
+                        trackByValue = getNestedProperty(item, dimension.trackBy);
+                    }
+                    if (trackByValue === null || trackByValue === undefined || trackByValue === '') {
+                        keyPart = index;
+                    }
+                    else {
+                        keyPart = trackByValue;
+                    }
+                }
+                else {
+                    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);
+        });
+    },
+    signature: '(...unknown) => unknown',
+};
+
+function execute$2(value) {
+    return value.toLowerCase();
+}
+const toLowerCase = {
+    kind: 'imperative',
+    execute: execute$2,
+    signature: '(string) => string',
+};
+
+function execute$1(value) {
+    return value.toUpperCase();
+}
+const toUpperCase = {
+    kind: 'imperative',
+    execute: execute$1,
+    signature: '(string) => string',
+};
+
+/**
+ * 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,
+};
+
+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: {},
+    },
+};
+
+function autoRegisterCommonDefinitions() {
+    DefinitionStore.getInstance().setComponents(unfoldComponentDefinitions(componentsDefinitions$2));
+}
+
+const componentsDefinitions$1 = {
+    'browser.Styled': {
+        properties: {
+            'styleClass@string': null,
+        },
+    },
+    'browser.Element': {
+        traits: ['sys.Group', 'browser.Styled'],
+        properties: {
+            'tag@string': null,
+            'innerHTML@string': null,
+        },
+    },
+    'browser.Clickable': {
+        traits: ['sys.Box'],
+        properties: {
+            'click@()': null,
+            'stopPropagation@boolean': null,
+        },
+    },
+    'browser.Focusable': {
+        traits: ['sys.Box'],
+        properties: {
+            'tabIndex@number': null,
+            'blur@command': null,
+        },
+    },
+    'browser.Dialog': {
+        traits: ['sys.Box', 'browser.Styled'],
+        properties: {
+            'close@(unknown)': null,
+        },
+    },
+};
+
+function autoRegisterBrowserDefinitions() {
+    DefinitionStore.getInstance().setComponents(unfoldComponentDefinitions(componentsDefinitions$1));
+}
+
+const componentsDefinitions = {
+    'forms.Input': {
+        properties: {
+            'inputKey@string': null,
+            'value@unknown': null,
+            'setValue@(unknown)': `set('value', args[0])`,
+            'disabled@boolean': false,
+            'dirty@boolean': false,
+            'touched@boolean': false,
+            'touch@()': `set('touched', true)`,
+            'validators@validator[]': [],
+            'validity@forms.Validity': '=> validate(value, validators)',
+        },
+    },
+    'forms.BooleanInput': {
+        traits: ['forms.Input'],
+        properties: {
+            'value@boolean': null,
+            'setValue@(boolean)': `set('value', args[0])`,
+        },
+    },
+    'forms.StringInput': {
+        traits: ['forms.Input'],
+        properties: {
+            'value@string': null,
+            'setValue@(string)': `set('value', args[0])`,
+        },
+    },
+    'forms.NumberInput': {
+        traits: ['forms.Input'],
+        properties: {
+            'value@number': null,
+            'setValue@(number)': `set('value', args[0])`,
+        },
+    },
+    'forms.CustomInput': {
+        traits: ['sys.Box', 'forms.Input'],
+        properties: {},
+    },
+    'forms.InputComposite': {
+        traits: ['forms.Input'],
+        properties: {
+            'touched@boolean': `=> some(propArray(':forms.Input', 'touched'))`,
+            'dirty@boolean': `=> some(propArray(':forms.Input', 'dirty'))`,
+            'subInputsValid@boolean': `=> every(propArray(':forms.Input', 'validity.valid'))`,
+            'selfValidity@forms.Validity': '=> validate(value, validators)',
+            'validity@forms.Validity': `=> { valid: every([selfValidity.valid, subInputsValid]), errors: selfValidity.errors }`,
+        },
+    },
+    'forms.InputGroup': {
+        traits: ['sys.Box', 'forms.InputComposite'],
+        properties: {
+            'value@unknown{}': {
+                bindingType: 'object',
+                componentSelector: ':forms.Input',
+                mapping: {
+                    key: 'inputKey',
+                    value: 'value',
+                },
+            },
+        },
+    },
+    'forms.BooleanInputGroup': {
+        traits: ['sys.Box', 'forms.InputComposite'],
+        properties: {
+            'value@unknown#': {
+                bindingType: 'selection',
+                componentSelector: ':forms.Input',
+                mapping: {
+                    key: 'inputKey',
+                    selected: 'value',
+                },
+            },
+        },
+    },
+    'forms.InputArray': {
+        traits: ['sys.Box', 'forms.InputComposite'],
+        properties: {
+            'value@unknown[]': {
+                bindingType: 'array',
+                componentSelector: ':forms.Input',
+                mapping: {
+                    value: 'value',
+                },
+            },
+        },
+    },
+};
+
+class ValidatorRegistry {
+    static instance;
+    validators = {};
+    static getInstance() {
+        if (!ValidatorRegistry.instance) {
+            ValidatorRegistry.instance = new ValidatorRegistry();
+        }
+        return ValidatorRegistry.instance;
+    }
+    register(validatorType, validator) {
+        this.validators[validatorType] = validator;
+    }
+    get(validatorType) {
+        return this.validators[validatorType];
+    }
+}
+
+async function execute(value, validators) {
+    const errors = { valid: true, errors: [] };
+    for (const validator of validators) {
+        try {
+            const result = await runValidator(value, validator);
+            if (result) {
+                errors.valid = false;
+                errors.errors.push(result);
+                break;
+            }
+        }
+        catch (e) {
+            log.error(`Error running validator "${validator.validatorType}":`, e);
+            errors.valid = false;
+            break;
+        }
+    }
+    return errors;
+}
+async function runValidator(value, validator) {
+    const validatorDef = ValidatorRegistry.getInstance().get(validator.validatorType);
+    if (!validatorDef) {
+        throw new Error(`Validator "${validator.validatorType}" not registered`);
+    }
+    if (validator.disabled) {
+        return null;
+    }
+    if (validatorDef.createMessage) {
+        validator.message = validatorDef.createMessage(validator.params);
+    }
+    validator.message = replacePlaceholders(validator.message || validatorDef.defaultMessage, validator.params);
+    const validationResult = await validatorDef.validate(value, validator);
+    if (validationResult) {
+        return { validator: validator.validatorType, message: validationResult.message };
+    }
+    return null;
+}
+function replacePlaceholders(template, params) {
+    return template.replace(/\[\[(\w+)]]/g, (match, key) => {
+        if (key in params) {
+            return String(params[key]);
+        }
+        return match;
+    });
+}
+const validate = {
+    kind: 'imperative',
+    execute,
+    signature: '(unknown, unknown[]) => {valid: boolean, errors: {validator: string, message: string}[]}',
+};
+
+const formulaFunctions = {
+    validate: wrapImperativeAsReactive(validate),
+};
+
+const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+const email = {
+    params: {},
+    defaultMessage: 'The field must be a valid email address',
+    validate(value, validator) {
+        if (!value) {
+            return null;
+        }
+        const invalid = typeof value !== 'string' || !value.toLowerCase().match(pattern);
+        if (invalid) {
+            return { message: validator.message };
+        }
+        return null;
+    },
+};
+
+const equals = {
+    params: {
+        value: { type: 'unknown' },
+    },
+    defaultMessage: 'The value must be equal to [[value]]',
+    validate(value, validator) {
+        if (!value) {
+            return null;
+        }
+        const invalid = value !== validator.params.value;
+        if (invalid) {
+            return { message: validator.message };
+        }
+        return null;
+    },
+};
+
+const maxLength = {
+    params: {
+        maxLength: { type: 'number' },
+    },
+    defaultMessage: 'The field must have at most [[maxLength]] characters',
+    validate(value, validator) {
+        if (!value) {
+            return null;
+        }
+        const invalid = typeof value !== 'string' || value.length > validator.params.maxLength;
+        if (invalid) {
+            return { message: validator.message };
+        }
+        return null;
+    },
+};
+
+const min = {
+    params: {
+        min: { type: 'number' },
+    },
+    defaultMessage: 'The value must be [[min]] or higher',
+    validate(value, validator) {
+        if (!value) {
+            return null;
+        }
+        const invalid = typeof value !== 'number' || value < validator.params.min;
+        if (invalid) {
+            return { message: validator.message };
+        }
+        return null;
+    },
+};
+
+const minLength = {
+    params: {
+        minLength: { type: 'number' },
+    },
+    defaultMessage: `The field must have at least [[minLength]] characters`,
+    validate(value, validator) {
+        if (!value) {
+            return null;
+        }
+        const invalid = typeof value !== 'string' || value.length < validator.params.minLength;
+        if (invalid) {
+            return { message: validator.message };
+        }
+        return null;
+    },
+};
+
+const required = {
+    params: {},
+    defaultMessage: 'The field is required',
+    validate(value, validator) {
+        const invalid = value === undefined || value === null || value === '' || Number.isNaN(value);
+        if (invalid) {
+            return { message: validator.message };
+        }
+        return null;
+    },
+};
+
+const validators = {
+    required,
+    email,
+    min,
+    maxLength,
+    minLength,
+    equals,
+};
+
+function registerValidator(validatorType, def) {
+    DefinitionStore.getInstance().setVariantShapeKind('validator', validatorType, {
+        params: { type: 'object', fields: def.params },
+    });
+    ValidatorRegistry.getInstance().register(validatorType, def);
+}
+function registerValidators(validators) {
+    for (const [validatorType, def] of Object.entries(validators)) {
+        registerValidator(validatorType, def);
+    }
+}
+function registerShapes() {
+    DefinitionStore.getInstance().setVariantShape('validator', {
+        message: { type: 'string' },
+        disabled: { type: 'boolean' },
+    });
+    DefinitionStore.getInstance().setShape('forms.Validity', {
+        valid: { type: 'boolean' },
+        errors: {
+            type: 'array',
+            item: {
+                type: 'object',
+                fields: {
+                    validator: { type: 'string' },
+                    message: { type: 'string' },
+                },
+            },
+        },
+    });
+}
+function autoRegisterFormsDefinitions() {
+    registerShapes();
+    registerValidators(validators);
+    FunctionRegistry.getInstance().setFunctions(formulaFunctions);
+    DefinitionStore.getInstance().setComponents(unfoldComponentDefinitions(componentsDefinitions));
+}
+
+function initRuntime() {
+    componentTreeConfig.runCommand = runCommand;
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { activateNode, activateStructure, autoRegisterBrowserDefinitions, autoRegisterCommonDefinitions, autoRegisterFormsDefinitions, componentInstanceMap, debugName, initRuntime, registerCommonDefinitions, registerValidator, registerValidators, runCommand, templateLoadingTracker };
+//# sourceMappingURL=kaskad-core.mjs.map