create-microact-app 1.0.1

package/templates/vanilla/node_modules/@monygroupcorp/microact/dist/microact.cjs.js

@@ -0,0 +1,1749 @@
+'use strict';
+
+class EventBus {
+    constructor() {
+        this.listeners = new Map();
+        this.debugMode = false;
+    }
+
+    /**
+     * Enable or disable debug logging
+     * @param {boolean} enabled 
+     */
+    setDebugMode(enabled) {
+        this.debugMode = enabled;
+    }
+
+    /**
+     * Subscribe to an event
+     * @param {string} eventName 
+     * @param {Function} callback 
+     * @returns {Function} Unsubscribe function
+     */
+    on(eventName, callback) {
+        if (!this.listeners.has(eventName)) {
+            this.listeners.set(eventName, new Set());
+        }
+        
+        this.listeners.get(eventName).add(callback);
+        
+        if (this.debugMode) {
+            console.log(`[EventBus] Listener added for "${eventName}"`);
+        }
+
+        // Return unsubscribe function
+        return () => this.off(eventName, callback);
+    }
+
+    /**
+     * Remove a specific event listener
+     * @param {string} eventName 
+     * @param {Function} callback 
+     */
+    off(eventName, callback) {
+        if (!this.listeners.has(eventName)) return;
+        
+        this.listeners.get(eventName).delete(callback);
+        
+        if (this.debugMode) {
+            console.log(`[EventBus] Listener removed for "${eventName}"`);
+        }
+
+        // Cleanup empty event sets
+        if (this.listeners.get(eventName).size === 0) {
+            this.listeners.delete(eventName);
+        }
+    }
+
+    /**
+     * Remove all listeners for an event
+     * @param {string} eventName 
+     */
+    removeAllListeners(eventName) {
+        if (eventName) {
+            this.listeners.delete(eventName);
+            if (this.debugMode) {
+                console.log(`[EventBus] All listeners removed for "${eventName}"`);
+            }
+        } else {
+            this.listeners.clear();
+            if (this.debugMode) {
+                console.log('[EventBus] All listeners removed');
+            }
+        }
+    }
+
+    /**
+     * Emit an event with data
+     * @param {string} eventName 
+     * @param {any} data 
+     */
+    emit(eventName, data) {
+        if (!this.listeners.has(eventName)) {
+            return;
+        }
+
+        if (this.debugMode) {
+            console.log(`[EventBus] Emitting "${eventName}"`, data);
+        }
+
+        this.listeners.get(eventName).forEach(callback => {
+            try {
+                callback(data);
+            } catch (error) {
+                console.error(`[EventBus] Error in listener for "${eventName}":`, error);
+            }
+        });
+    }
+
+    /**
+     * Subscribe to an event for one-time use
+     * @param {string} eventName 
+     * @param {Function} callback 
+     * @returns {Function} Unsubscribe function
+     */
+    once(eventName, callback) {
+        // Create a wrapper that will call the callback and then unsubscribe
+        const wrappedCallback = (data) => {
+            // Unsubscribe first to prevent issues if the callback triggers the same event
+            this.off(eventName, wrappedCallback);
+            // Call the original callback
+            try {
+                callback(data);
+            } catch (error) {
+                console.error(`[EventBus] Error in once callback for "${eventName}":`, error);
+            }
+        };
+        
+        // Register the wrapped callback
+        const unsubscribe = this.on(eventName, wrappedCallback);
+        return unsubscribe;
+    }
+}
+
+// Create a single instance for the application
+const eventBus = new EventBus();
+
+/**
+ * DOMUpdater - Utility for granular DOM updates
+ * Preserves focus state, scroll position, and form input values during updates
+ */
+class DOMUpdater {
+    constructor() {
+        this._activeElement = null;
+        this._activeElementPath = null;
+        this._scrollPositions = new Map();
+    }
+
+    /**
+     * Save the currently focused element and scroll positions
+     * @param {HTMLElement} rootElement - Root element to save state from
+     */
+    saveState(rootElement) {
+        // Save active element
+        const activeElement = document.activeElement;
+        if (activeElement && rootElement.contains(activeElement)) {
+            this._activeElement = activeElement;
+            this._activeElementPath = this._getElementPath(activeElement, rootElement);
+        } else {
+            this._activeElement = null;
+            this._activeElementPath = null;
+        }
+
+        // Save scroll positions for all scrollable containers
+        this._scrollPositions.clear();
+        const scrollableElements = rootElement.querySelectorAll('[data-scroll-container], [style*="overflow"]');
+        scrollableElements.forEach(el => {
+            if (el.scrollTop !== undefined || el.scrollLeft !== undefined) {
+                const path = this._getElementPath(el, rootElement);
+                this._scrollPositions.set(path, {
+                    scrollTop: el.scrollTop,
+                    scrollLeft: el.scrollLeft
+                });
+            }
+        });
+    }
+
+    /**
+     * Restore focus and scroll positions after DOM update
+     * @param {HTMLElement} rootElement - Root element to restore state in
+     */
+    restoreState(rootElement) {
+        // Restore focus
+        if (this._activeElementPath) {
+            const element = this._getElementByPath(rootElement, this._activeElementPath);
+            if (element && element.focus) {
+                try {
+                    // Restore cursor position if it's an input/textarea
+                    if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
+                        const selectionStart = element.selectionStart || 0;
+                        element.focus();
+                        if (element.setSelectionRange) {
+                            element.setSelectionRange(selectionStart, selectionStart);
+                        }
+                    } else {
+                        element.focus();
+                    }
+                } catch (e) {
+                    // Focus may fail if element is not focusable, ignore
+                }
+            }
+        }
+
+        // Restore scroll positions
+        this._scrollPositions.forEach((position, path) => {
+            const element = this._getElementByPath(rootElement, path);
+            if (element) {
+                element.scrollTop = position.scrollTop;
+                element.scrollLeft = position.scrollLeft;
+            }
+        });
+    }
+
+    /**
+     * Get a path string to identify an element within its root
+     * @private
+     */
+    _getElementPath(element, root) {
+        const path = [];
+        let current = element;
+        
+        while (current && current !== root && current.parentNode) {
+            const parent = current.parentNode;
+            const index = Array.from(parent.children).indexOf(current);
+            path.unshift(index);
+            current = parent;
+        }
+        
+        return path.join('/');
+    }
+
+    /**
+     * Get an element by its path within root
+     * @private
+     */
+    _getElementByPath(root, path) {
+        const indices = path.split('/').map(Number);
+        let current = root;
+        
+        for (const index of indices) {
+            if (!current.children || !current.children[index]) {
+                return null;
+            }
+            current = current.children[index];
+        }
+        
+        return current;
+    }
+
+    /**
+     * Compare two HTML strings and determine if they're structurally different
+     * @param {string} oldHTML - Previous HTML
+     * @param {string} newHTML - New HTML
+     * @returns {boolean} - True if structure is significantly different
+     */
+    diffHTML(oldHTML, newHTML) {
+        if (oldHTML === newHTML) return false;
+        
+        // Simple heuristic: if length difference is > 50%, likely structural change
+        const lengthDiff = Math.abs(oldHTML.length - newHTML.length);
+        const avgLength = (oldHTML.length + newHTML.length) / 2;
+        if (lengthDiff / avgLength > 0.5) {
+            return true;
+        }
+        
+        // Check for tag changes (simplified)
+        const oldTags = oldHTML.match(/<[^>]+>/g) || [];
+        const newTags = newHTML.match(/<[^>]+>/g) || [];
+        if (oldTags.length !== newTags.length) {
+            return true;
+        }
+        
+        return false;
+    }
+
+    /**
+     * Update text content of a node
+     * @param {Node} node - Node to update
+     * @param {string} newText - New text content
+     */
+    updateText(node, newText) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            node.textContent = newText;
+        } else if (node.nodeType === Node.ELEMENT_NODE) {
+            // For elements, update only if it's a text-only element
+            if (node.children.length === 0) {
+                node.textContent = newText;
+            }
+        }
+    }
+
+    /**
+     * Update attributes of an element
+     * @param {HTMLElement} element - Element to update
+     * @param {Object} newAttrs - New attributes object
+     */
+    updateAttributes(element, newAttrs) {
+        if (!element || element.nodeType !== Node.ELEMENT_NODE) return;
+        
+        // Get current attributes
+        const currentAttrs = {};
+        Array.from(element.attributes).forEach(attr => {
+            currentAttrs[attr.name] = attr.value;
+        });
+        
+        // Update changed attributes
+        Object.keys(newAttrs).forEach(name => {
+            const newValue = newAttrs[name];
+            if (currentAttrs[name] !== newValue) {
+                if (newValue === null || newValue === undefined) {
+                    element.removeAttribute(name);
+                } else {
+                    element.setAttribute(name, newValue);
+                }
+            }
+        });
+        
+        // Remove attributes that are no longer present
+        Object.keys(currentAttrs).forEach(name => {
+            if (!(name in newAttrs)) {
+                element.removeAttribute(name);
+            }
+        });
+    }
+
+    /**
+     * Update children of a parent element using a simple reconciliation algorithm
+     * @param {HTMLElement} parent - Parent element
+     * @param {NodeList|Array} oldChildren - Current children
+     * @param {DocumentFragment|HTMLElement} newChildrenContainer - Container with new children
+     */
+    updateChildren(parent, oldChildren, newChildrenContainer) {
+        const oldArray = Array.from(oldChildren);
+        const newArray = Array.from(newChildrenContainer.children || []);
+        
+        // If structure is too different, replace entirely
+        if (Math.abs(oldArray.length - newArray.length) > oldArray.length * 0.3) {
+            return false; // Signal to fall back to full replacement
+        }
+        
+        // Simple reconciliation: update in place where possible
+        const maxLength = Math.max(oldArray.length, newArray.length);
+        
+        for (let i = 0; i < maxLength; i++) {
+            const oldChild = oldArray[i];
+            const newChild = newArray[i];
+            
+            if (!oldChild && newChild) {
+                // New child - append
+                parent.appendChild(newChild);
+            } else if (oldChild && !newChild) {
+                // Old child removed
+                oldChild.remove();
+            } else if (oldChild && newChild) {
+                // Both exist - try to update in place
+                if (this._canUpdateInPlace(oldChild, newChild)) {
+                    this._updateNodeInPlace(oldChild, newChild);
+                } else {
+                    // Replace
+                    parent.replaceChild(newChild, oldChild);
+                }
+            }
+        }
+        
+        return true; // Successfully updated
+    }
+
+    /**
+     * Check if two nodes can be updated in place
+     * @private
+     */
+    _canUpdateInPlace(oldNode, newNode) {
+        if (oldNode.nodeType !== newNode.nodeType) return false;
+        if (oldNode.nodeType === Node.TEXT_NODE) return true;
+        if (oldNode.nodeType === Node.ELEMENT_NODE) {
+            return oldNode.tagName === newNode.tagName;
+        }
+        return false;
+    }
+
+    /**
+     * Update a node in place with new content
+     * @private
+     */
+    _updateNodeInPlace(oldNode, newNode) {
+        if (oldNode.nodeType === Node.TEXT_NODE) {
+            oldNode.textContent = newNode.textContent;
+            return;
+        }
+        
+        if (oldNode.nodeType === Node.ELEMENT_NODE) {
+            // Update attributes
+            const newAttrs = {};
+            Array.from(newNode.attributes).forEach(attr => {
+                newAttrs[attr.name] = attr.value;
+            });
+            this.updateAttributes(oldNode, newAttrs);
+            
+            // Update children recursively
+            const oldChildren = oldNode.childNodes;
+            const newChildren = newNode.childNodes;
+            
+            // For simple text-only updates
+            if (oldChildren.length === 1 && newChildren.length === 1 &&
+                oldChildren[0].nodeType === Node.TEXT_NODE &&
+                newChildren[0].nodeType === Node.TEXT_NODE) {
+                oldChildren[0].textContent = newChildren[0].textContent;
+                return;
+            }
+            
+            // For more complex structures, try to reconcile
+            if (!this.updateChildren(oldNode, oldChildren, newNode)) {
+                // Fall back to replacing content
+                oldNode.innerHTML = newNode.innerHTML;
+            }
+        }
+    }
+
+    /**
+     * Perform a granular update of an element's content
+     * @param {HTMLElement} element - Element to update
+     * @param {string} newHTML - New HTML content
+     * @returns {boolean} - True if granular update succeeded, false if fallback needed
+     */
+    updateGranular(element, newHTML) {
+        // Save state before update
+        this.saveState(element);
+        
+        // Create temporary container for new HTML
+        const temp = document.createElement('div');
+        temp.innerHTML = newHTML;
+        
+        // Try to update children granularly
+        const oldHTML = element.innerHTML;
+        const isStructuralChange = this.diffHTML(oldHTML, newHTML);
+        
+        if (isStructuralChange) {
+            // Structural change detected - fall back to full replacement
+            return false;
+        }
+        
+        // Try granular update
+        try {
+            const success = this.updateChildren(element, element.childNodes, temp);
+            if (success) {
+                // Restore state after successful update
+                this.restoreState(element);
+                return true;
+            }
+        } catch (e) {
+            console.warn('[DOMUpdater] Granular update failed, falling back:', e);
+        }
+        
+        return false;
+    }
+}
+
+/**
+ * UpdateScheduler - Coordinates component updates using requestAnimationFrame batching
+ * 
+ * Prevents UI blocking by batching multiple component updates into a single frame.
+ * Components can opt-in to batching for non-critical updates, while critical updates
+ * (user input, errors) can execute immediately.
+ * 
+ * Usage:
+ *   // In Component.js
+ *   this.scheduleUpdate(); // Batched (default)
+ *   this.scheduleUpdate({ immediate: true }); // Immediate
+ */
+class UpdateScheduler {
+    constructor() {
+        // Queue of components waiting to be updated
+        this._queue = new Set();
+        
+        // Flag to track if requestAnimationFrame is already scheduled
+        this._scheduled = false;
+        
+        // Performance metrics (only tracked in dev mode)
+        this._metrics = {
+            frames: 0,
+            updates: 0,
+            maxFrameTime: 0,
+            totalFrameTime: 0,
+            maxUpdatesPerFrame: 0
+        };
+        
+        // Dev mode flag (can be enabled for performance monitoring)
+        this._devMode = false;
+        
+        // Track if scheduler is enabled (can be disabled for debugging)
+        this._enabled = true;
+    }
+    
+    /**
+     * Get singleton instance
+     * @returns {UpdateScheduler}
+     */
+    static getInstance() {
+        if (!UpdateScheduler._instance) {
+            UpdateScheduler._instance = new UpdateScheduler();
+        }
+        return UpdateScheduler._instance;
+    }
+    
+    /**
+     * Enable or disable dev mode (performance tracking)
+     * @param {boolean} enabled
+     */
+    setDevMode(enabled) {
+        this._devMode = enabled;
+    }
+    
+    /**
+     * Enable or disable the scheduler (for debugging)
+     * @param {boolean} enabled
+     */
+    setEnabled(enabled) {
+        this._enabled = enabled;
+        if (!enabled && this._scheduled) {
+            // Cancel pending frame if disabling
+            this._queue.clear();
+            this._scheduled = false;
+        }
+    }
+    
+    /**
+     * Queue a component for batched update
+     * @param {Component} component - Component instance to update
+     */
+    queue(component) {
+        if (!this._enabled) {
+            // If scheduler is disabled, execute immediately
+            try {
+                component.update();
+            } catch (error) {
+                console.error('[UpdateScheduler] Error updating component (immediate):', error);
+            }
+            return;
+        }
+        
+        if (!component || typeof component.update !== 'function') {
+            console.warn('[UpdateScheduler] Invalid component queued:', component);
+            return;
+        }
+        
+        // Add to queue (Set automatically deduplicates)
+        this._queue.add(component);
+        
+        // Schedule flush if not already scheduled
+        if (!this._scheduled) {
+            this._scheduled = true;
+            requestAnimationFrame(() => this._flush());
+        }
+    }
+    
+    /**
+     * Execute all queued updates in a single frame
+     * @private
+     */
+    _flush() {
+        if (this._queue.size === 0) {
+            this._scheduled = false;
+            return;
+        }
+        
+        const start = performance.now();
+        const updates = Array.from(this._queue);
+        const updateCount = updates.length;
+        
+        // Clear queue and reset scheduled flag
+        this._queue.clear();
+        this._scheduled = false;
+        
+        // Execute all updates
+        updates.forEach(component => {
+            try {
+                // Check if component is still mounted/valid before updating
+                if (component && component.element && typeof component.update === 'function') {
+                    component.update();
+                }
+            } catch (error) {
+                // Log error but continue with other updates
+                console.error('[UpdateScheduler] Error updating component:', error);
+                console.error('[UpdateScheduler] Component:', component);
+            }
+        });
+        
+        const duration = performance.now() - start;
+        
+        // Track metrics in dev mode
+        if (this._devMode) {
+            this._metrics.frames++;
+            this._metrics.updates += updateCount;
+            this._metrics.totalFrameTime += duration;
+            this._metrics.maxFrameTime = Math.max(this._metrics.maxFrameTime, duration);
+            this._metrics.maxUpdatesPerFrame = Math.max(this._metrics.maxUpdatesPerFrame, updateCount);
+            
+            // Warn if frame took too long (>16ms for 60fps)
+            if (duration > 16) {
+                console.warn(
+                    `[UpdateScheduler] Frame took ${duration.toFixed(2)}ms (>16ms target). ` +
+                    `Updated ${updateCount} component(s).`
+                );
+            }
+        }
+        
+        // Handle nested updates (components that schedule updates during their update)
+        // If new updates were queued during this flush, schedule another frame
+        if (this._queue.size > 0) {
+            this._scheduled = true;
+            requestAnimationFrame(() => this._flush());
+        }
+    }
+    
+    /**
+     * Get performance metrics
+     * @returns {Object} Metrics object
+     */
+    getMetrics() {
+        if (!this._devMode) {
+            return { enabled: false };
+        }
+        
+        const avgFrameTime = this._metrics.frames > 0
+            ? this._metrics.totalFrameTime / this._metrics.frames
+            : 0;
+        
+        const avgUpdatesPerFrame = this._metrics.frames > 0
+            ? this._metrics.updates / this._metrics.frames
+            : 0;
+        
+        return {
+            enabled: true,
+            frames: this._metrics.frames,
+            totalUpdates: this._metrics.updates,
+            maxFrameTime: this._metrics.maxFrameTime,
+            avgFrameTime: avgFrameTime,
+            maxUpdatesPerFrame: this._metrics.maxUpdatesPerFrame,
+            avgUpdatesPerFrame: avgUpdatesPerFrame
+        };
+    }
+    
+    /**
+     * Reset performance metrics
+     */
+    resetMetrics() {
+        this._metrics = {
+            frames: 0,
+            updates: 0,
+            maxFrameTime: 0,
+            totalFrameTime: 0,
+            maxUpdatesPerFrame: 0
+        };
+    }
+    
+    /**
+     * Clear the update queue (useful for cleanup or testing)
+     */
+    clear() {
+        this._queue.clear();
+        this._scheduled = false;
+    }
+    
+    /**
+     * Get current queue size (for debugging)
+     * @returns {number}
+     */
+    getQueueSize() {
+        return this._queue.size;
+    }
+}
+
+// Export singleton instance getter
+const getUpdateScheduler = () => UpdateScheduler.getInstance();
+
+class Component {
+    constructor() {
+        this.element = null;
+        this.state = {};
+        this.mounted = false;
+        this.boundEvents = new Map();
+        // Cleanup registry for tracking all cleanup functions
+        this._cleanupRegistry = new Set();
+        // Child components registry for automatic cleanup
+        this._children = new Map();
+        // Event subscriptions registry for automatic cleanup
+        this._subscriptions = new Set();
+        // DOM updater for granular updates
+        this._domUpdater = new DOMUpdater();
+        // Element reference cache
+        this._refs = new Map();
+        // Context storage
+        this._context = new Map();
+        // Parent component reference for context traversal
+        this._parent = null;
+    }
+
+    /**
+     * Initialize state with default values
+     * @param {Object} initialState 
+     */
+    setState(newState) {
+        const oldState = {...this.state};
+        this.state = { ...this.state, ...newState };
+        
+        // Only update if we should based on state changes
+        if (this.shouldUpdate(oldState, this.state)) {
+            this.update();
+            this.onStateUpdate(oldState, this.state);
+        }
+    }
+
+    /**
+     * Determines if the component should update based on state changes
+     * Override in child classes for custom comparison logic
+     * @param {Object} oldState - Previous state
+     * @param {Object} newState - New state 
+     * @returns {boolean} - Whether component should update
+     */
+    shouldUpdate(oldState, newState) {
+        // Default shallow comparison of top-level state properties
+        // Check if any properties have changed
+        if (!oldState || !newState) return true;
+        
+        // Check if object references are the same
+        if (oldState === newState) return false;
+        
+        // Do a shallow comparison of properties
+        const oldKeys = Object.keys(oldState);
+        const newKeys = Object.keys(newState);
+        
+        // If they have different number of keys, they changed
+        if (oldKeys.length !== newKeys.length) return true;
+        
+        // Check if any key's value has changed
+        return oldKeys.some(key => oldState[key] !== newState[key]);
+    }
+    
+    /**
+     * Lifecycle hook called after state is updated but before rendering
+     * Override in child classes to handle state updates
+     * @param {Object} oldState 
+     * @param {Object} newState 
+     */
+    onStateUpdate(oldState, newState) {
+        // Default implementation does nothing
+    }
+
+    /**
+     * Mount component to DOM
+     * @param {HTMLElement} container 
+     */
+    mount(element) {
+        try {
+            this.element = element;
+            this.mounted = true;
+            
+            // Apply styles if they exist
+            if (this.constructor.styles) {
+                const styleElement = document.createElement('style');
+                styleElement.textContent = this.constructor.styles;
+                document.head.appendChild(styleElement);
+                this.styleElement = styleElement;
+                
+                // Register cleanup for style element
+                this.registerCleanup(() => {
+                    if (this.styleElement && this.styleElement.parentNode) {
+                        this.styleElement.remove();
+                    }
+                });
+            }
+
+            this.update();
+            if (this.onMount) {
+                this.onMount();
+            }
+        } catch (error) {
+            this._handleError(error, { phase: 'mount' });
+        }
+    }
+
+    /**
+     * Remove component from DOM
+     */
+    unmount() {
+        if (!this.mounted) return;
+
+
+        
+        // Execute all registered cleanup functions
+        this._executeCleanup();
+        
+        // Unbind all events
+        this.unbindEvents();
+        
+        // Clear all refs
+        this.invalidateRefs();
+        
+        // Remove element if it exists
+        if (this.element) {
+            this.element.innerHTML = '';
+        }
+        this.element = null;
+        
+        // Call lifecycle method
+        this.mounted = false;
+        if (this.onUnmount) {
+            this.onUnmount();
+        }
+    }
+
+    /**
+     * Bind DOM events based on this.events()
+     */
+    bindEvents() {
+        // First unbind any existing events
+        this.unbindEvents();
+
+        if (!this.element || typeof this.events !== 'function') {
+            return;
+        }
+        
+        const events = this.events();
+        if (!events) return;
+
+        const entries = events instanceof Map ? Array.from(events.entries()) : Object.entries(events);
+
+        for (const [eventSelector, handlerReference] of entries) {
+            if (!eventSelector) continue;
+
+            const descriptor = eventSelector.trim();
+            if (!descriptor) continue;
+
+            const [eventName, ...selectorParts] = descriptor.split(/\s+/);
+            if (!eventName) {
+                console.warn(`[Component] Invalid event descriptor '${eventSelector}' in component '${this.constructor.name}'.`);
+                continue;
+            }
+            const selector = selectorParts.join(' ');
+
+            const handler = this._resolveEventHandler(handlerReference, eventSelector);
+            if (!handler) {
+                continue;
+            }
+            
+            if (selector) {
+                // Delegated event
+                const eventHandler = (e) => {
+                    const target = e?.target;
+                    if (!target) return;
+                    const matchedTarget = typeof target.closest === 'function'
+                        ? target.closest(selector)
+                        : (target.matches(selector) ? target : null);
+                    if (matchedTarget && this.element.contains(matchedTarget)) {
+                        handler(e);
+                    }
+                };
+                this.element.addEventListener(eventName, eventHandler);
+                this.boundEvents.set(eventSelector, eventHandler);
+            } else {
+                // Direct event
+                this.element.addEventListener(eventName, handler);
+                this.boundEvents.set(eventSelector, handler);
+            }
+        }
+    }
+
+    /**
+     * Resolve event handler definitions passed via this.events()
+     * Supports both handler name strings and direct function references.
+     * @private
+     */
+    _resolveEventHandler(handlerReference, eventSelector) {
+        let handler = handlerReference;
+
+        if (typeof handlerReference === 'string') {
+            handler = this[handlerReference];
+        }
+
+        if (typeof handler !== 'function') {
+            console.warn(`[Component] Event handler '${handlerReference}' for event '${eventSelector}' is not a function on component '${this.constructor.name}'.`);
+            return null;
+        }
+
+        // Bind handler to component instance when possible
+        if (typeof handler.bind === 'function') {
+            return handler.bind(this);
+        }
+
+        return (...args) => handler.apply(this, args);
+    }
+
+    /**
+     * Unbind all DOM events
+     */
+    unbindEvents() {
+        if (!this.element) {
+            this.boundEvents.clear();
+            return;
+        }
+
+        for (const [eventSelector, handler] of this.boundEvents.entries()) {
+            const [eventName] = eventSelector.trim().split(/\s+/);
+            if (!eventName) continue;
+            this.element.removeEventListener(eventName, handler);
+        }
+        this.boundEvents.clear();
+    }
+
+    /**
+     * Update component after state change
+     */
+    update() {
+        if (!this.element) return;
+        
+        try {
+            // Get new content
+            const newContent = this.render();
+            
+            // Always update on first render or when content changes
+            // First render is detected by checking if innerHTML is empty
+            if (!this.element.innerHTML || this.element.innerHTML !== newContent) {
+                // Try granular update first (preserves focus/scroll)
+                const granularSuccess = this._domUpdater.updateGranular(this.element, newContent);
+                
+                if (!granularSuccess) {
+                    // Fall back to full replacement for complex structural changes
+                    // Note: This will destroy child components, so they need to be re-mounted
+                    this.element.innerHTML = newContent;
+                }
+                
+                // Invalidate refs cache after DOM update
+                this.invalidateRefs();
+
+                // Mount child components
+                this._mountChildren();
+                
+                // Bind events if events() method exists
+                if (this.events && typeof this.events === 'function') {
+                    this.bindEvents();
+                }
+            }
+        } catch (error) {
+            this._handleError(error, { phase: 'update' });
+        }
+    }
+
+    /**
+     * Mount declared child components.
+     * This method is called after the parent component's DOM is updated.
+     * @private
+     */
+    _mountChildren() {
+        if (typeof this.children !== 'function') {
+            return;
+        }
+        const childrenToMount = this.children();
+        if (!childrenToMount) {
+            return;
+        }
+
+        for (const selector in childrenToMount) {
+            const container = this.getRef(selector);
+            if (container) {
+                const child = childrenToMount[selector];
+                
+                // If a different component is already in this container, unmount it.
+                if (container.component && container.component !== child) {
+                    container.component.unmount();
+                }
+
+                // If the child is not already mounted in this specific container, mount it.
+                if (child.element !== container) {
+                    child.mount(container);
+                    container.component = child; // Associate component with element for cleanup.
+                    this.registerCleanup(() => child.unmount());
+                }
+            }
+        }
+    }
+
+    /**
+     * Declares child components for the component.
+     * @returns {Object.<string, Component>} A map where keys are CSS selectors 
+     * for the container elements and values are the child component instances.
+     * e.g., { '#child-container': this.childComponent }
+     */
+    children() {
+        return {};
+    }
+
+    /**
+     * Schedule a component update with optional priority
+     * 
+     * This method allows components to opt-in to requestAnimationFrame batching
+     * for better performance when multiple components update simultaneously.
+     * 
+     * @param {Object} options - Update options
+     * @param {boolean} options.immediate - If true, update immediately (bypass batching).
+     *                                      Use for critical updates (user input, errors).
+     *                                      Default: false (batched)
+     * 
+     * @example
+     *   // Batched update (default) - good for price updates, balance updates
+     *   this.scheduleUpdate();
+     *   
+     *   // Immediate update - good for user input, error displays
+     *   this.scheduleUpdate({ immediate: true });
+     */
+    scheduleUpdate(options = {}) {
+        if (options.immediate) {
+            // Critical update - execute immediately
+            this.update();
+        } else {
+            // Non-critical update - queue for batching
+            const scheduler = getUpdateScheduler();
+            scheduler.queue(this);
+        }
+    }
+
+    // Lifecycle methods (to be overridden by child classes)
+    onMount() {}
+    onUnmount() {}
+    onUpdate(oldState) {}
+    
+    /**
+     * Error handler lifecycle hook
+     * Override in child classes to handle errors
+     * @param {Error} error - The error that occurred
+     * @param {Object} errorInfo - Additional error information
+     */
+    onError(error, errorInfo) {
+        // Default implementation does nothing
+        // Child classes can override to handle errors
+    }
+
+    // Methods to be implemented by child classes
+    render() {
+        try {
+            return this.template ? this.template() : '';
+        } catch (error) {
+            this._handleError(error, { phase: 'render' });
+            return '<div class="component-error">Error rendering component</div>';
+        }
+    }
+    
+    /**
+     * Handle errors and propagate to nearest ErrorBoundary
+     * @private
+     */
+    _handleError(error, errorInfo = {}) {
+        // Call component's error handler if it exists
+        if (this.onError) {
+            try {
+                this.onError(error, errorInfo);
+            } catch (handlerError) {
+                console.error('[Component] Error in onError handler:', handlerError);
+            }
+        }
+        
+        // Propagate to parent ErrorBoundary if it exists
+        // Check by constructor name to avoid circular dependency
+        let parent = this._parent;
+        while (parent) {
+            if (parent.constructor && parent.constructor.name === 'ErrorBoundary') {
+                if (parent._errorHandler) {
+                    parent._errorHandler(error, { ...errorInfo, component: this.constructor.name });
+                }
+                return;
+            }
+            parent = parent._parent;
+        }
+        
+        // If no ErrorBoundary found, log to console
+        console.error(`[Component] Unhandled error in ${this.constructor.name}:`, error, errorInfo);
+    }
+
+    events() {
+        return {};
+    }
+
+    /**
+     * Register a cleanup function to be called on unmount
+     * @param {Function} cleanupFn - Function to call during cleanup
+     * @returns {Function} - Unregister function to remove this cleanup
+     */
+    registerCleanup(cleanupFn) {
+        if (typeof cleanupFn !== 'function') {
+            console.warn('[Component] registerCleanup called with non-function:', cleanupFn);
+            return () => {};
+        }
+        
+        this._cleanupRegistry.add(cleanupFn);
+        
+        // Return unregister function
+        return () => {
+            this._cleanupRegistry.delete(cleanupFn);
+        };
+    }
+
+    /**
+     * Execute all registered cleanup functions
+     * @private
+     */
+    _executeCleanup() {
+        this._cleanupRegistry.forEach(cleanupFn => {
+            try {
+                cleanupFn();
+            } catch (error) {
+                console.error('[Component] Error during cleanup:', error);
+            }
+        });
+        this._cleanupRegistry.clear();
+    }
+
+    /**
+     * Unmount all child components
+     * @private
+     */
+    _unmountChildren() {
+        for (const [key, child] of this._children.entries()) {
+            try {
+                if (child && typeof child.unmount === 'function') {
+                    child.unmount();
+                }
+            } catch (error) {
+                console.error(`[Component] Error unmounting child "${key}":`, error);
+            }
+        }
+        this._children.clear();
+    }
+
+    /**
+     * Create and track a child component
+     * @param {string} key - Unique key for this child component
+     * @param {Component} childComponent - Child component instance
+     * @returns {Component} - The child component
+     */
+    createChild(key, childComponent) {
+        if (this._children.has(key)) {
+            console.warn(`[Component] Child with key "${key}" already exists, unmounting previous instance`);
+            const previous = this._children.get(key);
+            if (previous && typeof previous.unmount === 'function') {
+                previous.unmount();
+            }
+        }
+        
+        // Set parent reference for context traversal
+        childComponent._parent = this;
+        
+        // Inherit parent context
+        this._context.forEach((value, key) => {
+            childComponent._context.set(key, value);
+        });
+        
+        this._children.set(key, childComponent);
+        
+        // Register cleanup to unmount child
+        this.registerCleanup(() => {
+            if (childComponent && typeof childComponent.unmount === 'function') {
+                childComponent.unmount();
+            }
+            this._children.delete(key);
+        });
+        
+        return childComponent;
+    }
+
+    /**
+     * Wrapper for setTimeout that automatically registers cleanup
+     * @param {Function} callback - Function to call after delay
+     * @param {number} delay - Delay in milliseconds
+     * @returns {number} - Timer ID (can be used with clearTimeout)
+     */
+    setTimeout(callback, delay) {
+        const timerId = window.setTimeout(callback, delay);
+        
+        // Register cleanup to clear the timer
+        this.registerCleanup(() => {
+            window.clearTimeout(timerId);
+        });
+        
+        return timerId;
+    }
+
+    /**
+     * Wrapper for setInterval that automatically registers cleanup
+     * @param {Function} callback - Function to call repeatedly
+     * @param {number} delay - Interval in milliseconds
+     * @returns {number} - Timer ID (can be used with clearInterval)
+     */
+    setInterval(callback, delay) {
+        const timerId = window.setInterval(callback, delay);
+        
+        // Register cleanup to clear the interval
+        this.registerCleanup(() => {
+            window.clearInterval(timerId);
+        });
+        
+        return timerId;
+    }
+
+    /**
+     * Subscribe to an event with automatic cleanup on unmount
+     * @param {string} eventName - Name of the event to subscribe to
+     * @param {Function} callback - Callback function to call when event is emitted
+     * @returns {Function} - Unsubscribe function (also auto-called on unmount)
+     */
+    subscribe(eventName, callback) {
+        // Subscribe to the event
+        const unsubscribe = eventBus.on(eventName, callback);
+        
+        // Track the subscription for automatic cleanup
+        this._subscriptions.add(unsubscribe);
+        
+        // Register cleanup to unsubscribe
+        this.registerCleanup(() => {
+            unsubscribe();
+            this._subscriptions.delete(unsubscribe);
+        });
+        
+        return unsubscribe;
+    }
+
+    /**
+     * Subscribe to an event for one-time use with automatic cleanup
+     * @param {string} eventName - Name of the event to subscribe to
+     * @param {Function} callback - Callback function to call when event is emitted (once)
+     * @returns {Function} - Unsubscribe function (also auto-called on unmount or after first call)
+     */
+    subscribeOnce(eventName, callback) {
+        // Subscribe to the event once
+        const unsubscribe = eventBus.once(eventName, callback);
+        
+        // Track the subscription for automatic cleanup
+        this._subscriptions.add(unsubscribe);
+        
+        // Register cleanup
+        this.registerCleanup(() => {
+            unsubscribe();
+            this._subscriptions.delete(unsubscribe);
+        });
+        
+        return unsubscribe;
+    }
+
+    /**
+     * Hook to subscribe to store state changes
+     * Automatically updates component when selected store state changes
+     * 
+     * STATE OWNERSHIP RULES:
+     * - UI-only state (focus, hover, temporary UI state) → use this.state
+     * - Shared/global state (balances, price, wallet, contract data) → use store
+     * - Derived state → use selectors
+     * 
+     * Usage examples:
+     *   // Using a selector method
+     *   const isPhase2 = this.useStore(tradingStore, () => tradingStore.selectIsPhase2());
+     *   
+     *   // Using a direct state selector
+     *   const price = this.useStore(tradingStore, (state) => state.price.current);
+     *   
+     *   // With update callback
+     *   this.useStore(tradingStore, () => tradingStore.selectIsPhase2(), (newValue, oldValue) => {
+     *     console.log('Phase 2 changed:', newValue);
+     *   });
+     * 
+     * @param {Store} store - Store instance to subscribe to
+     * @param {Function} selector - Function that selects state (can be store method or state selector)
+     * @param {Function} onUpdate - Optional callback when selected state changes
+     * @returns {any} - Current selected state value
+     */
+    useStore(store, selector, onUpdate) {
+        if (!store || typeof selector !== 'function') {
+            console.warn('[Component] useStore called with invalid arguments');
+            return null;
+        }
+
+        // Store the last value for comparison
+        if (!this._storeValues) {
+            this._storeValues = new Map();
+        }
+        
+        const selectorKey = selector.toString(); // Use function string as key (not perfect but works)
+        let lastValue = this._storeValues.get(selectorKey);
+        
+        // Get initial value
+        const getCurrentValue = () => {
+            // Try calling as store method first (e.g., tradingStore.selectIsPhase2())
+            try {
+                const result = selector.call(store);
+                if (result !== undefined) {
+                    return result;
+                }
+            } catch (e) {
+                // Not a method, try as state selector
+            }
+            
+            // Try as state selector (e.g., (state) => state.price)
+            return selector(store.getState());
+        };
+        
+        const currentValue = getCurrentValue();
+        this._storeValues.set(selectorKey, currentValue);
+        
+        // Subscribe to store changes
+        const unsubscribe = store.subscribe(() => {
+            const newValue = getCurrentValue();
+            const oldValue = lastValue;
+            
+            // Only update if value actually changed (shallow comparison)
+            if (this._hasValueChanged(oldValue, newValue)) {
+                // Update stored value
+                this._storeValues.set(selectorKey, newValue);
+                lastValue = newValue;
+                
+                // Call optional update callback
+                if (typeof onUpdate === 'function') {
+                    onUpdate(newValue, oldValue);
+                }
+                
+                // Trigger component update
+                this.update();
+            }
+        });
+        
+        // Register cleanup to unsubscribe
+        this.registerCleanup(() => {
+            unsubscribe();
+            if (this._storeValues) {
+                this._storeValues.delete(selectorKey);
+            }
+        });
+        
+        return currentValue;
+    }
+
+    /**
+     * Check if two values have changed (shallow comparison)
+     * @private
+     */
+    _hasValueChanged(oldValue, newValue) {
+        // Primitive comparison
+        if (oldValue === newValue) return false;
+        
+        // Null/undefined handling
+        if (oldValue == null || newValue == null) return oldValue !== newValue;
+        
+        // Object comparison (shallow)
+        if (typeof oldValue === 'object' && typeof newValue === 'object') {
+            const oldKeys = Object.keys(oldValue);
+            const newKeys = Object.keys(newValue);
+            
+            if (oldKeys.length !== newKeys.length) return true;
+            
+            return oldKeys.some(key => oldValue[key] !== newValue[key]);
+        }
+        
+        return true;
+    }
+
+    /**
+     * Get a cached element reference by name and selector
+     * @param {string} name - Reference name (for caching)
+     * @param {string} selector - CSS selector to find element
+     * @returns {HTMLElement|null} - Element or null if not found
+     */
+    _getRefCached(name, selector) {
+        if (!this.element) return null;
+        
+        // Check cache first
+        if (this._refs.has(name)) {
+            const cached = this._refs.get(name);
+            // Verify element is still in DOM
+            if (cached && this.element.contains(cached)) {
+                return cached;
+            }
+            // Stale reference, remove from cache
+            this._refs.delete(name);
+        }
+        
+        // Query DOM if not cached
+        const element = this.element.querySelector(selector);
+        if (element) {
+            this._refs.set(name, element);
+        }
+        
+        return element;
+    }
+
+    /**
+     * Manually update a cached reference
+     * @param {string} name - Reference name
+     * @param {HTMLElement} element - Element to cache
+     */
+    updateRef(name, element) {
+        if (element) {
+            this._refs.set(name, element);
+        } else {
+            this._refs.delete(name);
+        }
+    }
+
+    /**
+     * Invalidate all cached references
+     * Should be called when DOM structure changes significantly
+     */
+    invalidateRefs() {
+        this._refs.clear();
+    }
+
+    /**
+     * Invalidate a specific cached reference
+     * @param {string} name - Reference name to invalidate
+     */
+    invalidateRef(name) {
+        this._refs.delete(name);
+    }
+
+    /**
+     * Get a single DOM element within this component's element
+     * Convenience wrapper around querySelector with null-safety check
+     * @param {string} selector - CSS selector to query
+     * @returns {HTMLElement|null} The first matching element or null
+     */
+    getRef(selector) {
+        if (!this.element) {
+            console.warn(`[Component] getRef called on ${this.constructor.name} before element exists`);
+            return null;
+        }
+        return this.element.querySelector(selector);
+    }
+
+    /**
+     * Get multiple DOM elements within this component's element
+     * Convenience wrapper around querySelectorAll with null-safety check
+     * @param {string} selector - CSS selector to query
+     * @returns {Array<HTMLElement>} Array of matching elements (empty array if none found)
+     */
+    getRefs(selector) {
+        if (!this.element) {
+            console.warn(`[Component] getRefs called on ${this.constructor.name} before element exists`);
+            return [];
+        }
+        // Convert NodeList to Array for easier manipulation
+        return Array.from(this.element.querySelectorAll(selector));
+    }
+
+    /**
+     * Provide a context value to child components
+     * @param {string} key - Context key
+     * @param {any} value - Context value
+     */
+    provideContext(key, value) {
+        this._context.set(key, value);
+        
+        // Propagate to existing children
+        this._children.forEach(child => {
+            if (child && typeof child._context !== 'undefined') {
+                child._context.set(key, value);
+            }
+        });
+    }
+
+    /**
+     * Get a context value, searching up the component tree
+     * @param {string} key - Context key
+     * @returns {any} - Context value or undefined if not found
+     */
+    getContext(key) {
+        // Check own context first
+        if (this._context.has(key)) {
+            return this._context.get(key);
+        }
+        
+        // Search up the tree
+        let parent = this._parent;
+        while (parent) {
+            if (parent._context && parent._context.has(key)) {
+                return parent._context.get(key);
+            }
+            parent = parent._parent;
+        }
+        
+        return undefined;
+    }
+
+    /**
+     * Remove a context value
+     * @param {string} key - Context key to remove
+     */
+    removeContext(key) {
+        this._context.delete(key);
+        
+        // Remove from children
+        this._children.forEach(child => {
+            if (child && typeof child._context !== 'undefined') {
+                child._context.delete(key);
+            }
+        });
+    }
+}
+
+/**
+ * Simple client-side router for SPA navigation
+ * Supports static routes and browser history
+ */
+class Router {
+    constructor() {
+        this.routes = new Map();
+        this.currentRoute = null;
+        this.currentHandler = null;
+        this.notFoundHandler = null;
+        
+        // Bind methods
+        this.handleRoute = this.handleRoute.bind(this);
+        this.navigate = this.navigate.bind(this);
+        
+        // Listen for browser back/forward
+        window.addEventListener('popstate', async (e) => {
+            await this.handleRoute(window.location.pathname);
+        });
+    }
+    
+    /**
+     * Register a route
+     * @param {string} path - Route path (e.g., '/', '/cultexecs')
+     * @param {Function} handler - Route handler function
+     */
+    on(path, handler) {
+        this.routes.set(path, handler);
+    }
+    
+    /**
+     * Register a 404 handler
+     * @param {Function} handler - Handler for unmatched routes
+     */
+    notFound(handler) {
+        this.notFoundHandler = handler;
+    }
+    
+    /**
+     * Navigate to a route
+     * @param {string} path - Route path
+     * @param {boolean} replace - Whether to replace history entry
+     */
+    async navigate(path, replace = false) {
+        if (path === window.location.pathname) {
+            return; // Already on this route
+        }
+        
+        if (replace) {
+            window.history.replaceState({ path }, '', path);
+        } else {
+            window.history.pushState({ path }, '', path);
+        }
+        
+        await this.handleRoute(path);
+        
+
+    }
+    
+    /**
+     * Match a path against a route pattern
+     * @param {string} pattern - Route pattern (e.g., '/project/:id')
+     * @param {string} path - Actual path to match
+     * @returns {object|null} Matched params or null if no match
+     * @private
+     */
+    _matchRoute(pattern, path) {
+        // Exact match for static routes
+        if (pattern === path) {
+            return {};
+        }
+        
+        // Split into parts, filtering empty strings
+        const patternParts = pattern.split('/').filter(p => p);
+        const pathParts = path.split('/').filter(p => p);
+        
+        // Must have same number of parts
+        if (patternParts.length !== pathParts.length) {
+            return null;
+        }
+        
+        const params = {};
+        for (let i = 0; i < patternParts.length; i++) {
+            const patternPart = patternParts[i];
+            const pathPart = pathParts[i];
+            
+            // Check if this is a parameter (starts with :)
+            if (patternPart.startsWith(':')) {
+                const paramName = patternPart.slice(1);
+                // Decode URL component
+                try {
+                    params[paramName] = decodeURIComponent(pathPart);
+                } catch (e) {
+                    // If decoding fails, use raw value
+                    params[paramName] = pathPart;
+                }
+            } else if (patternPart !== pathPart) {
+                // Static part doesn't match
+                return null;
+            }
+        }
+        
+        return params;
+    }
+    
+    /**
+     * Find matching route handler
+     * @param {string} path - Route path
+     * @returns {object|null} { handler, params } or null
+     * @private
+     */
+    _findRoute(path) {
+        // First check for exact static route match (static routes take precedence)
+        if (this.routes.has(path)) {
+            return {
+                handler: this.routes.get(path),
+                params: {}
+            };
+        }
+        
+        // Collect all dynamic routes and sort by specificity
+        const dynamicRoutes = [];
+        for (const [pattern, handler] of this.routes.entries()) {
+            // Skip if it's an exact match (already checked above)
+            if (pattern === path) {
+                continue;
+            }
+            
+            // Check if pattern contains dynamic parameters
+            if (pattern.includes(':')) {
+                const paramCount = (pattern.match(/:/g) || []).length;
+                // Count literal (non-param) parts for better specificity
+                const literalCount = pattern.split('/').filter(p => p && !p.startsWith(':')).length;
+                dynamicRoutes.push({ pattern, handler, paramCount, literalCount });
+            }
+        }
+        
+        // Sort by literal count first (more literals = more specific), then by param count
+        // This ensures routes with literal parts (like /create) are matched before fully dynamic routes
+        dynamicRoutes.sort((a, b) => {
+            if (b.literalCount !== a.literalCount) {
+                return b.literalCount - a.literalCount;
+            }
+            return b.paramCount - a.paramCount;
+        });
+        
+        // Try each route in order of specificity
+        for (const { pattern, handler } of dynamicRoutes) {
+            const params = this._matchRoute(pattern, path);
+            if (params !== null) {
+                return { handler, params };
+            }
+        }
+        
+        return null;
+    }
+    
+    /**
+     * Handle route change
+     * @param {string} path - Route path
+     */
+    async handleRoute(path) {
+        // Clean up current handler if it exists
+        if (this.currentHandler && typeof this.currentHandler.cleanup === 'function') {
+            this.currentHandler.cleanup();
+        }
+        
+        // Find matching route
+        const match = this._findRoute(path);
+        
+        if (match) {
+            this.currentRoute = path;
+            // Call handler with params and store the result (which may include cleanup function)
+            // Handle both sync and async handlers
+            const result = await Promise.resolve(match.handler(match.params));
+            this.currentHandler = result || null;
+            
+
+        } else if (this.notFoundHandler) {
+            this.currentRoute = null;
+            this.currentHandler = null;
+            this.notFoundHandler(path);
+        } else {
+            console.warn(`No route handler for: ${path}`);
+        }
+    }
+    
+    /**
+     * Start the router
+     */
+    async start() {
+        // Handle initial route
+        await this.handleRoute(window.location.pathname);
+    }
+    
+    /**
+     * Get current route
+     */
+    getCurrentRoute() {
+        return this.currentRoute || window.location.pathname;
+    }
+    
+    /**
+     * Encode a title for use in URL (slug)
+     * @param {string} title - Title to encode
+     * @returns {string} URL-safe slug
+     */
+    _encodeTitle(title) {
+        if (!title) return '';
+        return title
+            .toLowerCase()
+            .trim()
+            .replace(/[^a-z0-9]+/g, '-')  // Replace non-alphanumeric with hyphens
+            .replace(/^-+|-+$/g, '');      // Remove leading/trailing hyphens
+    }
+    
+    /**
+     * Decode a URL slug back to title (approximate)
+     * @param {string} slug - URL slug
+     * @returns {string} Decoded title
+     */
+    _decodeTitle(slug) {
+        if (!slug) return '';
+        return slug
+            .split('-')
+            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ');
+    }
+    
+    /**
+     * Generate URL from chain ID, factory title, instance name, and optional piece title
+     * @param {string|number} chainId - Chain ID (e.g., 1 for Ethereum mainnet)
+     * @param {string} factoryTitle - Factory title
+     * @param {string} instanceName - Instance name
+     * @param {string} [pieceTitle] - Optional piece title (for ERC1155)
+     * @returns {string} URL path
+     */
+    generateURL(chainId, factoryTitle, instanceName, pieceTitle = null) {
+        const chainIdStr = String(chainId || '1'); // Default to 1 (Ethereum mainnet)
+        const factorySlug = this._encodeTitle(factoryTitle);
+        const instanceSlug = this._encodeTitle(instanceName);
+        
+        if (pieceTitle) {
+            const pieceSlug = this._encodeTitle(pieceTitle);
+            return `/${chainIdStr}/${factorySlug}/${instanceSlug}/${pieceSlug}`;
+        }
+        
+        return `/${chainIdStr}/${factorySlug}/${instanceSlug}`;
+    }
+}
+
+exports.Component = Component;
+exports.DOMUpdater = DOMUpdater;
+exports.Router = Router;
+exports.eventBus = eventBus;
+exports.getUpdateScheduler = getUpdateScheduler;
+//# sourceMappingURL=microact.cjs.js.map