@kaskad/component-tree 0.0.1 → 0.0.2

package/esm2022/lib/mobx/store.js

@@ -1,827 +0,0 @@
-import { log } from '@kaskad/config';
-import { unfoldNodeSchema } from '@kaskad/schema';
-import { configure, observable, runInAction, untracked } from 'mobx';
-import { findComponent, findComponents, parseComponentSelector } from '../component-lookup';
-import { createNode } from '../node/node-creation';
-import { parseNodeSelector } from '../parsers';
-import { extractComponentsIds } from '../util/extract-node-value';
-import { formatSource } from '../util/format-source';
-import { getComponent } from '../util/get-component';
-import { componentIdGenerator } from '../util/id-generator';
-import { traverseNode } from '../util/traverse-node';
-configure({
-    enforceActions: 'always',
-});
-export class ComponentStore {
-    static instance;
-    components = new Map();
-    refSpaces = observable.map({}, { deep: false, name: 'ref-spaces-map' });
-    componentsToPreload = new Set();
-    // Index for O(m) RefSpace cleanup during component removal
-    componentsByRefSpace = new Map();
-    static getInstance() {
-        if (!ComponentStore.instance) {
-            ComponentStore.instance = new ComponentStore();
-        }
-        return ComponentStore.instance;
-    }
-    // tests purposes only
-    static reset() {
-        const store = ComponentStore.getInstance();
-        runInAction(() => {
-            // Remove all root components (components without parents)
-            // This will cascade and remove all child components and RefSpaces
-            const rootComponents = Array.from(store.components.values()).filter((c) => !c.position.componentId);
-            for (const component of rootComponents) {
-                store.removeComponent(component.id);
-            }
-            // Clear any remaining orphaned data (shouldn't be any, but just to be safe)
-            store.components.clear();
-            store.refSpaces.clear();
-            store.componentsToPreload.clear();
-            store.componentsByRefSpace.clear();
-            componentIdGenerator.reset();
-        });
-        return store;
-    }
-    addRefSpace(refSpace) {
-        runInAction(() => {
-            this.refSpaces.set(refSpace.id, refSpace);
-        });
-    }
-    addComponents(components) {
-        runInAction(() => {
-            for (const id in components) {
-                const component = components[id];
-                this.components.set(id, component);
-                // Maintain componentsByRefSpace index
-                if (!this.componentsByRefSpace.has(component.refSpaceId)) {
-                    this.componentsByRefSpace.set(component.refSpaceId, new Set());
-                }
-                this.componentsByRefSpace.get(component.refSpaceId)?.add(id);
-            }
-        });
-    }
-    getRefSpace(refSpaceId) {
-        return this.refSpaces.get(refSpaceId) ?? null;
-    }
-    getRefSpaceOrThrow(refSpaceId) {
-        const refSpace = this.getRefSpace(refSpaceId);
-        if (!refSpace) {
-            throw new Error(`RefSpace with id "${refSpaceId}" is not found.`);
-        }
-        return refSpace;
-    }
-    getComponent(componentId) {
-        return this.components.get(componentId) || null;
-    }
-    getComponentOrThrow(componentId) {
-        const component = this.getComponent(componentId);
-        if (!component) {
-            throw new Error(`Component with id "${componentId}" is not found.`);
-        }
-        return component;
-    }
-    findVariable(componentId, variableName) {
-        const component = this.getComponentOrThrow(componentId);
-        const node = component.variables.get(variableName);
-        if (node) {
-            return node;
-        }
-        const parentComponentId = component.position.componentId;
-        if (!parentComponentId) {
-            return null;
-        }
-        return this.findVariable(parentComponentId, variableName);
-    }
-    /**
-     * Find a single component using a selector relative to another component.
-     * Throws if multiple components match the selector.
-     *
-     * @param relativeTo - The component ID to search relative to
-     * @param selector - Component selector string (e.g., 'Button', '&myRef', '^parent', ':button', 'Button[disabled=true]')
-     * @returns The matching component or null if not found
-     * @throws If the selector matches multiple components
-     *
-     * @example
-     * ```typescript
-     * const button = store.findComponent(componentId, 'Button');
-     * const aliased = store.findComponent(componentId, '&myRef');
-     * const parent = store.findComponent(componentId, '^parent');
-     * const byType = store.findComponent(componentId, ':button');
-     * const filtered = store.findComponent(componentId, 'Button[disabled=true]');
-     * ```
-     */
-    findComponent(relativeTo, selector) {
-        const parsed = parseComponentSelector(selector);
-        return findComponent(relativeTo, parsed);
-    }
-    /**
-     * Find all components matching a selector relative to another component.
-     *
-     * @param relativeTo - The component ID to search relative to
-     * @param selector - Component selector string (e.g., 'Button', '&myRef', ':button', 'Button[disabled=true]')
-     * @returns Array of matching components (empty if none found)
-     *
-     * @example
-     * ```typescript
-     * const buttons = store.findComponents(componentId, 'Button');
-     * const allOfType = store.findComponents(componentId, ':button');
-     * const filtered = store.findComponents(componentId, 'Button[disabled=true]');
-     * ```
-     */
-    findComponents(relativeTo, selector) {
-        const parsed = parseComponentSelector(selector);
-        return findComponents(relativeTo, parsed);
-    }
-    /**
-     * Get a node by selector relative to a component.
-     * Throws an error if the component or node is not found.
-     * Use findNode() for optional lookups that return null instead of throwing.
-     *
-     * Note: Even if the selector contains optional chaining (?.), this method will throw
-     * if the node is not found. Use findNode() for optional chaining support.
-     *
-     * Component selector behavior:
-     * - `&ref->value` - Throws if component with ref doesn't exist
-     * - `&ref?->value` - Throws if node not found, but allows missing component (returns null for the whole expression)
-     *
-     * @param relativeTo - The component ID to search relative to
-     * @param selector - Node selector string (e.g., 'prop', '$variable', '^Parent->prop', '&ref?->value')
-     * @returns The node
-     * @throws If the component or node is not found (unless using ?-> for component)
-     *
-     * @example
-     * ```typescript
-     * const node = store.getNode(componentId, 'requiredProp'); // throws if not found
-     * const optionalNode = store.findNode(componentId, 'user?.profile'); // returns null if not found
-     * const optionalComponent = store.getNode(componentId, '&optional?->value'); // throws only if value missing, not if component missing
-     * ```
-     */
-    getNode(relativeTo, selector) {
-        const parsed = parseNodeSelector(selector);
-        // Look up the component
-        let component;
-        if (parsed.component) {
-            component = findComponent(relativeTo, parsed.component.selector);
-            // If component not found and not using optional selector, throw error
-            if (!component && !parsed.component.optional) {
-                const src = formatSource(this.getComponent(relativeTo)?.sourceUrl);
-                throw new Error(`${src} Component not found for selector '${selector}' relative to '${relativeTo}'`);
-            }
-        }
-        else {
-            component = this.getComponentOrThrow(relativeTo);
-        }
-        // If component is null (only possible with component.optional), throw
-        if (!component) {
-            const src = formatSource(this.getComponent(relativeTo)?.sourceUrl);
-            throw new Error(`${src} Component not found for selector '${selector}' relative to '${relativeTo}'`);
-        }
-        const src = formatSource(component.sourceUrl);
-        // If it's a variable path, use RefSpace chain lookup
-        if (parsed.kind === 'variable') {
-            const node = this.findVariable(component.id, parsed.head);
-            if (!node) {
-                throw new Error(`${src} Variable '${parsed.head}' does not exist in component '${component.id}' or its parent RefSpaces`);
-            }
-            const result = traverseNode(node, parsed.tail);
-            if (!result) {
-                throw new Error(`${src} Node not found for selector '${selector}' in component '${component.id}'`);
-            }
-            return result;
-        }
-        // For property paths, use strict lookup that throws on missing nodes
-        const node = component.getNodeFromParsed(parsed);
-        if (!node) {
-            throw new Error(`${src} Node not found for selector '${selector}' in component '${component.id}'`);
-        }
-        return node;
-    }
-    /**
-     * Find a node by selector relative to a component.
-     * Returns null if the node is not found.
-     *
-     * Component selector behavior:
-     * - `&ref->value` - Throws if component doesn't exist (strict by default)
-     * - `&ref?->value` - Returns null if component doesn't exist (lenient when explicit)
-     *
-     * Use `?->` to explicitly indicate that a missing component is acceptable.
-     * This makes the code self-documenting and prevents accidental null returns.
-     *
-     * @param relativeTo - The component ID to search relative to
-     * @param selector - Node selector string (e.g., 'prop', '$variable', '^Parent->prop', '&ref?->value')
-     * @returns The node or null if not found
-     *
-     * @example
-     * ```typescript
-     * // Strict - throws if component missing
-     * const node = store.findNode(componentId, '&ref->value');
-     *
-     * // Lenient - returns null if component missing
-     * const optionalNode = store.findNode(componentId, '&ref?->value');
-     * if (optionalNode) {
-     *   // Use the node
-     * }
-     * ```
-     */
-    findNode(relativeTo, selector) {
-        const parsed = parseNodeSelector(selector);
-        // If a component selector is specified, look up the component
-        let component = parsed.component
-            ? findComponent(relativeTo, parsed.component.selector)
-            : this.getComponent(relativeTo);
-        // If component not found and not using optional selector, throw error
-        if (!component && parsed.component && !parsed.component.optional) {
-            const src = formatSource(this.getComponent(relativeTo)?.sourceUrl);
-            throw new Error(`${src} Component not found for selector '${selector}' relative to '${relativeTo}'`);
-        }
-        if (!component) {
-            return null;
-        }
-        // If looking up a variable in a sys.Facade component (without explicit component selector),
-        // start search from the facade's parent. This ensures variables are resolved from the facade's
-        // context, not from within the facade itself. This only applies when using the implicit
-        // relativeTo component, not when explicitly selecting a Facade (e.g., ':sys.Facade->$var')
-        if (parsed.kind === 'variable' && !parsed.component && component.componentType === 'sys.Facade') {
-            const parentComponentId = component.position.componentId;
-            if (parentComponentId) {
-                const parentComponent = this.getComponent(parentComponentId);
-                // If parent exists, use it for variable lookup; otherwise fall back to the Facade itself
-                if (parentComponent) {
-                    component = parentComponent;
-                }
-            }
-        }
-        const src = formatSource(component.sourceUrl);
-        // If it's a variable path, use RefSpace chain lookup
-        if (parsed.kind === 'variable') {
-            const node = this.findVariable(component.id, parsed.head);
-            if (!node) {
-                // Variable itself doesn't exist - this is likely a typo, so throw
-                throw new Error(`${src} Variable "${parsed.head}" not found in component "${component.id}"`);
-            }
-            // Variable exists, traverse the path (may return null if path is missing)
-            return traverseNode(node, parsed.tail);
-        }
-        // For property paths, throw if property doesn't exist but allow null paths
-        const node = component.props.get(parsed.head);
-        if (!node) {
-            throw new Error(`${src} Property "${parsed.head}" not found in component "${component.id}" (type: ${component.componentType}). ` +
-                `Available properties: [${Array.from(component.props.keys()).join(', ')}]`);
-        }
-        // Property exists, traverse the path (may return null if path is missing)
-        return traverseNode(node, parsed.tail);
-    }
-    /**
-     * Collect node values from multiple components into an array.
-     * Maps over all components matching the selector and extracts a node value from each.
-     *
-     * @param relativeTo - The component ID to search relative to
-     * @param componentSelector - Selector for finding components (e.g., ':forms.Input', 'Button')
-     * @param nodeSelector - The node path to extract from each component (e.g., 'value', 'inputKey')
-     * @returns Array of node values from matched components
-     *
-     * @example
-     * ```typescript
-     * // Get all input values
-     * const values = store.collectValuesArray(componentId, ':forms.Input', 'value');
-     * // Returns: ['value1', 'value2', 'value3']
-     * ```
-     */
-    collectValuesArray(relativeTo, componentSelector, nodeSelector) {
-        const components = this.findComponents(relativeTo, componentSelector);
-        return components.map((component) => component.getNodeValue(nodeSelector));
-    }
-    /**
-     * Collect node values from multiple components into a map/object.
-     * Reduces over all components matching the selector, using one node as the key and another as the value.
-     *
-     * @param relativeTo - The component ID to search relative to
-     * @param componentSelector - Selector for finding components (e.g., ':forms.Input', 'Button')
-     * @param keyNodeSelector - The node path to use as the object key (e.g., 'inputKey', 'id')
-     * @param valueNodeSelector - The node path to use as the object value (e.g., 'value', 'label')
-     * @returns Object/map with keys and values from matched components
-     *
-     * @example
-     * ```typescript
-     * // Create a map from inputKey to value
-     * const map = store.collectValuesMap(componentId, ':forms.Input', 'inputKey', 'value');
-     * // Returns: { key1: 'value1', key2: 'value2' }
-     * ```
-     */
-    collectValuesMap(relativeTo, componentSelector, keyNodeSelector, valueNodeSelector) {
-        const components = this.findComponents(relativeTo, componentSelector);
-        return components.reduce((acc, component) => {
-            const key = component.getNodeValue(keyNodeSelector);
-            const value = component.getNodeValue(valueNodeSelector);
-            // skip if the key is not defined
-            if (key) {
-                acc[key] = value;
-            }
-            return acc;
-        }, {});
-    }
-    /**
-     * Set a node from a raw schema value.
-     * The raw schema will be unfolded before being applied.
-     * Handles structure, computation stack, and nested components.
-     *
-     * @param node - The node to update
-     * @param rawSchema - The raw schema value (will be unfolded into a NodeSchema)
-     */
-    setNodeRawSchema(node, rawSchema) {
-        try {
-            const unfolded = unfoldNodeSchema(rawSchema, node.valueType);
-            this.setNodeSchema(node, unfolded);
-        }
-        catch (e) {
-            const component = getComponent(node);
-            const src = formatSource(component.sourceUrl, node.position.path);
-            throw new Error(`${src} ${e.message}`, { cause: e });
-        }
-    }
-    /**
-     * Set a node from an already-unfolded schema.
-     * Use this when you already have a NodeSchema to avoid double-unfolding.
-     * Handles structure, nested components, and computation stack.
-     *
-     * @param node - The node to update
-     * @param schema - The unfolded NodeSchema to set
-     */
-    setNodeSchema(node, schema) {
-        const component = getComponent(node);
-        const refSpace = this.getRefSpaceOrThrow(component.refSpaceId);
-        const opts = {
-            refSpaceId: refSpace.id,
-            position: { componentId: component.id, path: node.position.path },
-            components: {},
-            refs: {},
-            sourceUrl: component.sourceUrl ?? undefined,
-        };
-        const tmpNode = createNode(schema, opts);
-        runInAction(() => {
-            // Handle component removal for component-type nodes
-            // Only remove components that are in the old structure but NOT in the new structure
-            // This is important for component[] types where existing component IDs may be reused
-            const oldComponents = extractComponentsIds(node);
-            const newComponents = new Set(extractComponentsIds(tmpNode));
-            for (const id of oldComponents) {
-                if (!newComponents.has(id)) {
-                    this.removeComponent(id);
-                }
-            }
-            // Set new structure and register new components/refs
-            node.structure = tmpNode.structure;
-            // Add refs for all RefSpaces (parent RefSpace and any nested RefSpaces created)
-            for (const refSpaceId in opts.refs) {
-                const targetRefSpace = this.getRefSpace(refSpaceId);
-                if (targetRefSpace) {
-                    const refs = opts.refs[refSpaceId] ?? {};
-                    targetRefSpace.addRefs(refs);
-                }
-            }
-            this.addComponents(opts.components);
-        });
-        // Push computation frame onto stack (after runAction, before activation)
-        if (schema.computation) {
-            const resultFrame = tmpNode.computationStack.top;
-            if (resultFrame) {
-                node.computationStack.push(resultFrame.schema);
-            }
-        }
-    }
-    /**
-     * Remove an item from an array node.
-     * Handles cleanup of nested components in the removed item.
-     *
-     * @param arrayNode - The array node to remove from
-     * @param index - The index of the item to remove
-     */
-    removeArrayItem(arrayNode, index) {
-        runInAction(() => {
-            const value = arrayNode.structure || [];
-            const removedItem = value[index];
-            // Clean up components in the removed item
-            if (removedItem) {
-                const oldComponents = extractComponentsIds(removedItem);
-                for (const id of oldComponents) {
-                    this.removeComponent(id);
-                }
-            }
-            arrayNode.structure = [...value.slice(0, index), ...value.slice(index + 1)];
-        });
-    }
-    /**
-     * Insert an item into an array node at a specific index.
-     * Creates a node structure from the raw value and inserts it at the specified position.
-     * Shifts existing items to the right.
-     *
-     * @param arrayNode - The array node to insert into
-     * @param index - The index at which to insert the item
-     * @param value - The raw value to insert (will be transformed into a node structure)
-     */
-    insertArrayItem(arrayNode, index, value) {
-        const { itemNode, opts, refSpace } = this.createArrayItemNode(arrayNode, index, value);
-        runInAction(() => {
-            const currentValue = arrayNode.structure || [];
-            arrayNode.structure = [...currentValue.slice(0, index), itemNode, ...currentValue.slice(index)];
-            const refs = opts.refs[refSpace.id] ?? {};
-            refSpace.addRefs(refs);
-            this.addComponents(opts.components);
-        });
-    }
-    /**
-     * Replace an item in an array node at a specific index.
-     * Creates a node structure from the raw value and replaces the item at the specified position.
-     * Properly cleans up nested components in the replaced item.
-     *
-     * @param arrayNode - The array node containing the item to replace
-     * @param index - The index of the item to replace
-     * @param value - The raw value to set (will be transformed into a node structure)
-     */
-    replaceArrayItem(arrayNode, index, value) {
-        const { itemNode, opts, refSpace } = this.createArrayItemNode(arrayNode, index, value);
-        runInAction(() => {
-            const currentValue = arrayNode.structure || [];
-            const replacedItem = currentValue[index];
-            // Clean up components in the replaced item
-            if (replacedItem) {
-                const oldComponents = extractComponentsIds(replacedItem);
-                for (const id of oldComponents) {
-                    this.removeComponent(id);
-                }
-            }
-            arrayNode.structure = [...currentValue.slice(0, index), itemNode, ...currentValue.slice(index + 1)];
-            const refs = opts.refs[refSpace.id] ?? {};
-            refSpace.addRefs(refs);
-            this.addComponents(opts.components);
-        });
-    }
-    /**
-     * Append an item to the end of an array node.
-     * Creates a node structure from the raw value and appends it to the array.
-     *
-     * @param arrayNode - The array node to append to
-     * @param value - The raw value to append (will be transformed into a node structure)
-     */
-    appendArrayItem(arrayNode, value) {
-        // Calculate the index for the new item
-        const currentLength = arrayNode.structure?.length ?? 0;
-        const { itemNode, opts, refSpace } = this.createArrayItemNode(arrayNode, currentLength, value);
-        runInAction(() => {
-            arrayNode.structure = [...(arrayNode.structure ?? []), itemNode];
-            const refs = opts.refs[refSpace.id] ?? {};
-            refSpace.addRefs(refs);
-            this.addComponents(opts.components);
-        });
-    }
-    /**
-     * Reconcile for-loop children using key-based diffing.
-     * Instead of destroying all children and recreating them,
-     * this method compares old vs new keys and only creates/destroys what's necessary.
-     *
-     * @param arrayNode - The array node containing for-loop children
-     * @param newSchemas - The new schemas to reconcile
-     * @returns Indices of newly added items for activation
-     */
-    reconcileForLoopChildren(arrayNode, newSchemas) {
-        const oldChildren = arrayNode.structure || [];
-        // Handle null/undefined newSchemas
-        if (!newSchemas) {
-            this.setNodeRawSchema(arrayNode, []);
-            return [];
-        }
-        // If there are no old children, just set the new schemas
-        if (oldChildren.length === 0) {
-            this.setNodeRawSchema(arrayNode, newSchemas);
-            return newSchemas.map((_, index) => index);
-        }
-        // If there are no new schemas, just set empty array (will remove all)
-        if (newSchemas.length === 0) {
-            this.setNodeRawSchema(arrayNode, []);
-            return [];
-        }
-        // Check if explicit keys are provided (trackBy syntax)
-        const hasExplicitKeys = this.checkForExplicitKeys(newSchemas);
-        if (!hasExplicitKeys) {
-            // No explicit keys - fall back to full replacement
-            this.setNodeRawSchema(arrayNode, newSchemas);
-            return newSchemas.map((_, index) => index);
-        }
-        // Extract keys from old children and new schemas
-        const oldKeyMap = this.extractOldKeys(oldChildren);
-        const newKeys = this.extractNewKeys(newSchemas);
-        // Check for duplicate keys in new schemas
-        const duplicateKeys = this.findDuplicateKeys(newKeys);
-        if (duplicateKeys.size > 0) {
-            log.warn(`Duplicate keys detected in for-loop: ${Array.from(duplicateKeys).join(', ')}. ` +
-                'This may cause unexpected behavior. Falling back to full replacement.');
-            this.setNodeRawSchema(arrayNode, newSchemas);
-            return newSchemas.map((_, index) => index);
-        }
-        // Build sets for diffing
-        const oldKeySet = new Set(oldKeyMap.keys());
-        const newKeySet = new Set(newKeys);
-        // Determine what to add, remove, and keep
-        const toRemove = [];
-        const toKeepSet = new Set();
-        for (const key of oldKeySet) {
-            if (newKeySet.has(key)) {
-                toKeepSet.add(key);
-            }
-            else {
-                toRemove.push(key);
-            }
-        }
-        const toAdd = [];
-        newKeys.forEach((key, index) => {
-            if (!oldKeySet.has(key)) {
-                toAdd.push(index);
-            }
-        });
-        // Perform the actual reconciliation
-        this.applyForLoopReconciliation(arrayNode, {
-            oldKeyMap,
-            newKeys,
-            newSchemas,
-            toRemove,
-            toKeep: Array.from(toKeepSet),
-        });
-        // Update loop variables (index, first, last, and item variables) for repositioned components
-        this.updateLoopVariables(arrayNode, newKeys, newSchemas, oldKeyMap);
-        return toAdd;
-    }
-    /**
-     * Apply for-loop reconciliation by building new structure and cleaning up removed components.
-     */
-    applyForLoopReconciliation(arrayNode, reconcileInfo) {
-        const { oldKeyMap, newKeys, newSchemas, toRemove, toKeep } = reconcileInfo;
-        const toKeepSet = new Set(toKeep);
-        const component = getComponent(arrayNode);
-        const refSpace = this.getRefSpaceOrThrow(component.refSpaceId);
-        // Build the new structure array, reusing kept nodes and creating new ones
-        const newStructure = [];
-        const newComponents = {};
-        const newRefs = {};
-        // Build new structure in order of new keys
-        // Use untracked to avoid MobX reactivity issues when reading structure
-        const oldStructure = untracked(() => arrayNode.structure);
-        for (let i = 0; i < newKeys.length; i++) {
-            const key = newKeys[i];
-            const oldEntry = oldKeyMap.get(key);
-            if (oldEntry && toKeepSet.has(key) && oldStructure && oldStructure[oldEntry.index]) {
-                // Reuse existing node
-                newStructure.push(oldStructure[oldEntry.index]);
-            }
-            else {
-                // Create new node
-                const schema = newSchemas[i];
-                const itemPath = [...arrayNode.position.path, i];
-                const opts = {
-                    refSpaceId: refSpace.id,
-                    position: { componentId: component.id, path: itemPath },
-                    components: {},
-                    refs: {},
-                    sourceUrl: component.sourceUrl ?? undefined,
-                };
-                const itemNode = createNode(unfoldNodeSchema(schema, arrayNode.valueType.item), opts);
-                newStructure.push(itemNode);
-                // Collect new components and refs
-                Object.assign(newComponents, opts.components);
-                const itemRefs = opts.refs[refSpace.id] ?? {};
-                Object.assign(newRefs, itemRefs);
-            }
-        }
-        runInAction(() => {
-            // Remove components that are no longer needed
-            for (const key of toRemove) {
-                const entry = oldKeyMap.get(key);
-                if (entry) {
-                    this.removeComponent(entry.componentId);
-                }
-            }
-            // Update the structure
-            arrayNode.structure = newStructure;
-            // Register new refs and components
-            refSpace.addRefs(newRefs);
-            this.addComponents(newComponents);
-        });
-    }
-    /**
-     * Update loop variables (including item variable) on components that have been repositioned or whose data changed.
-     */
-    updateLoopVariables(node, newKeys, newSchemas, oldKeyMap) {
-        const structure = node.structure || [];
-        const totalItems = newKeys.length;
-        runInAction(() => {
-            newKeys.forEach((key, newIndex) => {
-                const oldEntry = oldKeyMap.get(key);
-                if (!oldEntry)
-                    return; // Skip newly added items
-                const child = structure[newIndex];
-                if (!child)
-                    return;
-                const componentId = child.structure;
-                if (!componentId)
-                    return;
-                const component = this.getComponent(componentId);
-                if (!component)
-                    return;
-                // Update $index variable if it exists and the index changed
-                // Variables are stored without the $ prefix (e.g., 'index' not '$index')
-                const indexNode = component.variables.get('index');
-                if (indexNode && oldEntry.index !== newIndex) {
-                    indexNode.structure = newIndex;
-                }
-                // Update $first variable if it exists
-                const firstNode = component.variables.get('first');
-                if (firstNode) {
-                    const wasFirst = oldEntry.index === 0;
-                    const isFirst = newIndex === 0;
-                    if (wasFirst !== isFirst) {
-                        firstNode.structure = isFirst;
-                    }
-                }
-                // Update $last variable if it exists
-                const lastNode = component.variables.get('last');
-                if (lastNode) {
-                    lastNode.structure = newIndex === totalItems - 1;
-                }
-                // Update item variables from new schema
-                const newSchema = newSchemas[newIndex];
-                for (const [schemaKey, schemaValue] of Object.entries(newSchema)) {
-                    if (!schemaKey.startsWith('$'))
-                        continue;
-                    const varName = schemaKey.slice(1); // Remove '$' prefix
-                    // Skip loop control variables (already handled above)
-                    if (varName === 'index' || varName === 'first' || varName === 'last' || varName === 'trackBy') {
-                        continue;
-                    }
-                    const varNode = component.variables.get(varName);
-                    if (!varNode)
-                        continue;
-                    const varDef = schemaValue;
-                    if (!varDef || !('_value' in varDef))
-                        continue;
-                    // Update item variable using setNodeRawSchema for proper object handling
-                    this.setNodeRawSchema(varNode, varDef._value);
-                }
-            });
-        });
-    }
-    /**
-     * Check if schemas have explicit trackBy keys that can be used for diffing.
-     */
-    checkForExplicitKeys(schemas) {
-        if (schemas.length === 0)
-            return false;
-        const firstSchema = schemas[0];
-        if (!firstSchema)
-            return false;
-        const forKeySchema = firstSchema['$trackBy'];
-        if (forKeySchema && '_value' in forKeySchema) {
-            const value = forKeySchema._value;
-            if (typeof value === 'number') {
-                return false;
-            }
-            if (typeof value === 'string') {
-                const indexPattern = /^\d+(?::\d+)*$/;
-                return !indexPattern.test(value);
-            }
-            return true;
-        }
-        return false;
-    }
-    /**
-     * Extract keys from existing children (RefSpace components with $trackBy variable)
-     */
-    extractOldKeys(children) {
-        const keyMap = new Map();
-        children.forEach((child, index) => {
-            const componentId = child.structure;
-            if (!componentId)
-                return;
-            const component = this.getComponent(componentId);
-            if (!component || component.componentType !== 'sys.RefSpace')
-                return;
-            const keyNode = component.variables.get('trackBy');
-            const key = keyNode ? keyNode.extractedValue : component.id;
-            keyMap.set(String(key), { index, componentId });
-        });
-        return keyMap;
-    }
-    /**
-     * Extract keys from new schemas (generated by repeat())
-     */
-    extractNewKeys(schemas) {
-        return schemas.map((schema, index) => {
-            const forKeyValue = schema['$trackBy'];
-            if (forKeyValue && '_value' in forKeyValue) {
-                return String(forKeyValue._value);
-            }
-            return String(index);
-        });
-    }
-    /**
-     * Find duplicate keys in an array
-     */
-    findDuplicateKeys(keys) {
-        const seen = new Set();
-        const duplicates = new Set();
-        for (const key of keys) {
-            if (seen.has(key)) {
-                duplicates.add(key);
-            }
-            seen.add(key);
-        }
-        return duplicates;
-    }
-    removeComponent(componentId) {
-        const component = this.components.get(componentId);
-        if (!component)
-            return;
-        runInAction(() => {
-            // Collect all nested child component IDs (depth-first traversal)
-            const allChildIds = [];
-            for (const [, propNode] of component.props) {
-                extractComponentsIds(propNode, allChildIds);
-            }
-            for (const [, varNode] of component.variables) {
-                extractComponentsIds(varNode, allChildIds);
-            }
-            // Deduplicate while preserving order (later items are deeper in tree)
-            const childIds = [...new Set(allChildIds)];
-            const allIds = new Set([componentId, ...childIds]);
-            const spacesToRemove = this.collectRefSpacesToRemove(allIds);
-            // Dispose components in leaf-first order (reverse of depth-first)
-            for (let i = childIds.length - 1; i >= 0; i--) {
-                this.components.get(childIds[i])?.dispose();
-            }
-            component.dispose();
-            // Finally, delete all components and RefSpaces from registries
-            for (const id of allIds) {
-                // Remove from componentsByRefSpace index
-                const comp = this.components.get(id);
-                if (comp) {
-                    this.componentsByRefSpace.get(comp.refSpaceId)?.delete(id);
-                }
-                this.components.delete(id);
-            }
-            for (const refSpaceId of spacesToRemove) {
-                this.refSpaces.delete(refSpaceId);
-                // Clean up empty index entries
-                this.componentsByRefSpace.delete(refSpaceId);
-            }
-        });
-    }
-    /**
-     * Creates a new node for an array item from a raw value.
-     * Returns the created node and the options used (for registering components/refs).
-     * @throws If the array node has no parent component
-     */
-    createArrayItemNode(arrayNode, index, value) {
-        const component = getComponent(arrayNode);
-        const refSpace = this.getRefSpaceOrThrow(component.refSpaceId);
-        const itemPath = [...arrayNode.position.path, index];
-        const opts = {
-            refSpaceId: refSpace.id,
-            position: { componentId: component.position.componentId, path: itemPath },
-            components: {},
-            refs: {},
-            sourceUrl: component.sourceUrl ?? undefined,
-        };
-        const itemNode = createNode(unfoldNodeSchema(value, arrayNode.valueType.item), opts);
-        return { itemNode, opts, refSpace };
-    }
-    collectRefSpacesToRemove(componentIdsToDelete) {
-        // Collect unique RefSpace IDs that components belong to (candidates for removal)
-        const candidateSpaceIds = new Set();
-        for (const componentId of componentIdsToDelete) {
-            const refSpaceId = this.components.get(componentId)?.refSpaceId;
-            if (refSpaceId) {
-                candidateSpaceIds.add(refSpaceId);
-            }
-        }
-        // Filter to only RefSpaces that have no remaining components after deletion
-        const refSpaceIdsToDelete = new Set();
-        for (const refSpaceId of candidateSpaceIds) {
-            const componentsInSpace = this.componentsByRefSpace.get(refSpaceId);
-            if (!componentsInSpace)
-                continue;
-            // Check if ALL components in this RefSpace are being deleted
-            let allDeleted = true;
-            for (const id of componentsInSpace) {
-                if (!componentIdsToDelete.has(id)) {
-                    allDeleted = false;
-                    break;
-                }
-            }
-            if (allDeleted) {
-                refSpaceIdsToDelete.add(refSpaceId);
-            }
-        }
-        return refSpaceIdsToDelete;
-    }
-}
-//# sourceMappingURL=store.js.map