@coherent.js/client 1.0.0-beta.2

package/dist/index.js

@@ -0,0 +1,964 @@
+// src/hydration.js
+var componentInstances = /* @__PURE__ */ new WeakMap();
+function extractInitialState(element, options = {}) {
+  if (typeof window === "undefined") {
+    return options.initialState || null;
+  }
+  if (!element || typeof element.getAttribute !== "function") {
+    return options.initialState || null;
+  }
+  try {
+    const stateAttr = element.getAttribute("data-coherent-state");
+    if (stateAttr) {
+      return JSON.parse(stateAttr);
+    }
+    const state = {};
+    let hasState = false;
+    const countAttr = element.getAttribute("data-count");
+    if (countAttr !== null) {
+      state.count = parseInt(countAttr, 10) || 0;
+      hasState = true;
+    }
+    const stepAttr = element.getAttribute("data-step");
+    if (stepAttr !== null) {
+      state.step = parseInt(stepAttr, 10) || 1;
+      hasState = true;
+    }
+    const todosAttr = element.getAttribute("data-todos");
+    if (todosAttr) {
+      state.todos = JSON.parse(todosAttr);
+      hasState = true;
+    }
+    const valueAttr = element.getAttribute("data-value");
+    if (valueAttr !== null) {
+      state.value = valueAttr;
+      hasState = true;
+    }
+    if (options.initialState) {
+      return { ...options.initialState, ...state };
+    }
+    return hasState ? state : null;
+  } catch (_error) {
+    console.warn("Error extracting initial state:", _error);
+    return options.initialState || null;
+  }
+}
+function hydrate(element, component, props = {}, options = {}) {
+  if (typeof window === "undefined") {
+    console.warn("Hydration can only be performed in a browser environment");
+    return null;
+  }
+  if (typeof component !== "function") {
+    console.error("Hydrate error: component must be a function, received:", typeof component);
+    return null;
+  }
+  if (componentInstances.has(element)) {
+    const existingInstance = componentInstances.get(element);
+    return existingInstance;
+  }
+  const initialState = extractInitialState(element, options);
+  const instance = {
+    element,
+    component,
+    props: { ...props },
+    state: initialState,
+    isHydrated: true,
+    eventListeners: [],
+    options: { ...options },
+    previousVirtualElement: null,
+    // Update method for re-rendering
+    update(newProps) {
+      this.props = { ...this.props, ...newProps };
+      this.rerender();
+      return this;
+    },
+    // Re-render the component with current state
+    rerender() {
+      try {
+        this.fallbackRerender();
+      } catch (_error) {
+        console.error("Error during component re-render:", _error);
+      }
+    },
+    // Fallback re-render method using existing patching
+    fallbackRerender() {
+      try {
+        const componentProps2 = { ...this.props, ...this.state || {} };
+        if (typeof this.component !== "function") {
+          console.error("Component is not a function:", this.component);
+          return;
+        }
+        const newVirtualElement = this.component(componentProps2);
+        if (!this.previousVirtualElement) {
+          this.previousVirtualElement = this.virtualElementFromDOM(this.element);
+        }
+        this.patchDOM(this.element, this.previousVirtualElement, newVirtualElement);
+        attachFunctionEventListeners(this.element, newVirtualElement, this, { inputsOnly: true });
+        this.previousVirtualElement = newVirtualElement;
+      } catch (_error) {
+        console.error("Error during component re-render (fallback):", _error);
+      }
+    },
+    // Create virtual element representation from existing DOM
+    virtualElementFromDOM(domElement) {
+      if (typeof window === "undefined" || typeof Node === "undefined") {
+        return null;
+      }
+      if (domElement.nodeType === Node.TEXT_NODE) {
+        return domElement.textContent;
+      }
+      if (domElement.nodeType !== Node.ELEMENT_NODE) {
+        return null;
+      }
+      const tagName = domElement.tagName.toLowerCase();
+      const props2 = {};
+      const children = [];
+      if (domElement.attributes) {
+        Array.from(domElement.attributes).forEach((attr) => {
+          const name = attr.name === "class" ? "className" : attr.name;
+          props2[name] = attr.value;
+        });
+      }
+      if (domElement.childNodes) {
+        Array.from(domElement.childNodes).forEach((child) => {
+          if (child.nodeType === Node.TEXT_NODE) {
+            const text = child.textContent.trim();
+            if (text) children.push(text);
+          } else if (child.nodeType === Node.ELEMENT_NODE) {
+            const childVNode = this.virtualElementFromDOM(child);
+            if (childVNode) children.push(childVNode);
+          }
+        });
+      }
+      if (children.length > 0) {
+        props2.children = children;
+      }
+      return { [tagName]: props2 };
+    },
+    // Intelligent DOM patching with minimal changes
+    patchDOM(domElement, oldVNode, newVNode) {
+      if (typeof newVNode === "string" || typeof newVNode === "number") {
+        const newText = String(newVNode);
+        if (typeof window === "undefined" || typeof Node === "undefined" || typeof document === "undefined") {
+          return;
+        }
+        if (domElement.nodeType === Node.TEXT_NODE) {
+          if (domElement.textContent !== newText) {
+            domElement.textContent = newText;
+          }
+        } else {
+          const textNode = document.createTextNode(newText);
+          if (domElement.parentNode) {
+            domElement.parentNode.replaceChild(textNode, domElement);
+          }
+        }
+        return;
+      }
+      if (!newVNode) {
+        domElement.remove();
+        return;
+      }
+      if (Array.isArray(newVNode)) {
+        console.warn("Array virtual node at root level");
+        return;
+      }
+      const newTagName = Object.keys(newVNode)[0];
+      if (domElement.tagName.toLowerCase() !== newTagName.toLowerCase()) {
+        if (typeof window === "undefined" || typeof document === "undefined") {
+          return;
+        }
+        const newElement = this.createDOMElement(newVNode);
+        if (domElement.parentNode) {
+          domElement.parentNode.replaceChild(newElement, domElement);
+        }
+        attachEventListeners(newElement, this);
+        return;
+      }
+      this.patchAttributes(domElement, oldVNode, newVNode);
+      this.patchChildren(domElement, oldVNode, newVNode);
+      attachEventListeners(domElement, this);
+    },
+    // Patch element attributes efficiently
+    patchAttributes(domElement, oldVNode, newVNode) {
+      if (typeof window === "undefined" || typeof document === "undefined") {
+        return;
+      }
+      if (!domElement || typeof domElement.setAttribute !== "function" || typeof domElement.removeAttribute !== "function") {
+        return;
+      }
+      const oldTagName = oldVNode ? Object.keys(oldVNode)[0] : null;
+      const newTagName = Object.keys(newVNode)[0];
+      const oldProps = oldVNode && oldTagName ? oldVNode[oldTagName] || {} : {};
+      const newProps = newVNode[newTagName] || {};
+      Object.keys(oldProps).forEach((key) => {
+        if (key === "children" || key === "text") return;
+        if (!(key in newProps)) {
+          const attrName = key === "className" ? "class" : key;
+          domElement.removeAttribute(attrName);
+        }
+      });
+      Object.keys(newProps).forEach((key) => {
+        if (key === "children" || key === "text") return;
+        const newValue = newProps[key];
+        const oldValue = oldProps[key];
+        if (newValue !== oldValue) {
+          const attrName = key === "className" ? "class" : key;
+          if (newValue === true) {
+            domElement.setAttribute(attrName, "");
+          } else if (newValue === false || newValue === null) {
+            domElement.removeAttribute(attrName);
+          } else {
+            domElement.setAttribute(attrName, String(newValue));
+          }
+        }
+      });
+    },
+    // Patch children with intelligent list diffing
+    patchChildren(domElement, oldVNode, newVNode) {
+      if (typeof window === "undefined" || typeof Node === "undefined" || typeof document === "undefined") {
+        return;
+      }
+      if (!domElement || typeof domElement.childNodes === "undefined" || typeof domElement.appendChild !== "function") {
+        return;
+      }
+      const oldTagName = oldVNode ? Object.keys(oldVNode)[0] : null;
+      const newTagName = Object.keys(newVNode)[0];
+      const oldProps = oldVNode && oldTagName ? oldVNode[oldTagName] || {} : {};
+      const newProps = newVNode[newTagName] || {};
+      let oldChildren = [];
+      let newChildren = [];
+      if (oldProps.children) {
+        oldChildren = Array.isArray(oldProps.children) ? oldProps.children : [oldProps.children];
+      } else if (oldProps.text) {
+        oldChildren = [oldProps.text];
+      }
+      if (newProps.children) {
+        newChildren = Array.isArray(newProps.children) ? newProps.children : [newProps.children];
+      } else if (newProps.text) {
+        newChildren = [newProps.text];
+      }
+      let domChildren = [];
+      if (typeof Array.from === "function" && domElement.childNodes) {
+        try {
+          domChildren = Array.from(domElement.childNodes).filter((node) => {
+            return node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.TEXT_NODE && node.textContent && node.textContent.trim();
+          });
+        } catch (_error) {
+          console.warn("Failed to convert childNodes to array:", _error);
+          domChildren = [];
+        }
+      }
+      const maxLength = Math.max(oldChildren.length, newChildren.length, domChildren.length);
+      for (let i = 0; i < maxLength; i++) {
+        const oldChild = oldChildren[i];
+        const newChild = newChildren[i];
+        const domChild = domChildren[i];
+        if (newChild === void 0) {
+          if (domChild && typeof domChild.remove === "function") {
+            domChild.remove();
+          }
+        } else if (domChild === void 0) {
+          const newElement = this.createDOMElement(newChild);
+          if (newElement) {
+            domElement.appendChild(newElement);
+          }
+        } else {
+          this.patchDOM(domChild, oldChild, newChild);
+        }
+      }
+    },
+    // Create DOM element from virtual element
+    createDOMElement(vNode) {
+      if (typeof vNode === "string" || typeof vNode === "number") {
+        return document.createTextNode(String(vNode));
+      }
+      if (!vNode || typeof vNode !== "object") {
+        return document.createTextNode("");
+      }
+      if (Array.isArray(vNode)) {
+        const fragment = document.createDocumentFragment();
+        vNode.forEach((child) => {
+          fragment.appendChild(this.createDOMElement(child));
+        });
+        return fragment;
+      }
+      const tagName = Object.keys(vNode)[0];
+      const props2 = vNode[tagName] || {};
+      const element2 = document.createElement(tagName);
+      Object.keys(props2).forEach((key) => {
+        if (key === "children" || key === "text") return;
+        const value = props2[key];
+        const attrName = key === "className" ? "class" : key;
+        if (value === true) {
+          element2.setAttribute(attrName, "");
+        } else if (value !== false && value !== null) {
+          element2.setAttribute(attrName, String(value));
+        }
+      });
+      if (props2.children) {
+        const children = Array.isArray(props2.children) ? props2.children : [props2.children];
+        children.forEach((child) => {
+          element2.appendChild(this.createDOMElement(child));
+        });
+      } else if (props2.text) {
+        element2.appendChild(document.createTextNode(String(props2.text)));
+      }
+      return element2;
+    },
+    // Render virtual element to HTML string
+    renderVirtualElement(element2) {
+      if (typeof element2 === "string" || typeof element2 === "number") {
+        return String(element2);
+      }
+      if (!element2 || typeof element2 !== "object") {
+        return "";
+      }
+      if (Array.isArray(element2)) {
+        return element2.map((el) => this.renderVirtualElement(el)).join("");
+      }
+      const tagName = Object.keys(element2)[0];
+      const props2 = element2[tagName];
+      if (!props2 || typeof props2 !== "object") {
+        return `<${tagName}></${tagName}>`;
+      }
+      let attributes = "";
+      const children = [];
+      Object.keys(props2).forEach((key) => {
+        if (key === "children") {
+          if (Array.isArray(props2.children)) {
+            children.push(...props2.children);
+          } else {
+            children.push(props2.children);
+          }
+        } else if (key === "text") {
+          children.push(props2.text);
+        } else {
+          const attrName = key === "className" ? "class" : key;
+          const value = props2[key];
+          if (value === true) {
+            attributes += ` ${attrName}`;
+          } else if (value !== false && value !== null && value !== void 0) {
+            attributes += ` ${attrName}="${String(value).replace(/"/g, "&quot;")}"`;
+          }
+        }
+      });
+      const childrenHTML = children.map((child) => this.renderVirtualElement(child)).join("");
+      const voidElements = /* @__PURE__ */ new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"]);
+      if (voidElements.has(tagName.toLowerCase())) {
+        return `<${tagName}${attributes}>`;
+      }
+      return `<${tagName}${attributes}>${childrenHTML}</${tagName}>`;
+    },
+    // Destroy the component and clean up
+    destroy() {
+      this.eventListeners.forEach(({ element: element2, event, handler }) => {
+        if (element2.removeEventListener) {
+          element2.removeEventListener(event, handler);
+        }
+      });
+      this.state = null;
+      this.isHydrated = false;
+      componentInstances.delete(this.element);
+    },
+    // Set state (for components with state)
+    setState(newState) {
+      if (!this.state) {
+        this.state = {};
+      }
+      const oldState = { ...this.state };
+      this.state = typeof newState === "function" ? { ...this.state, ...newState(this.state) } : { ...this.state, ...newState };
+      this.rerender();
+      if (this.onStateChange) {
+        this.onStateChange(this.state, oldState);
+      }
+    },
+    // Add event listener that will be cleaned up on destroy
+    addEventListener(targetElement, event, handler) {
+      if (targetElement.addEventListener) {
+        targetElement.addEventListener(event, handler);
+        this.eventListeners.push({ element: targetElement, event, handler });
+      }
+    }
+  };
+  componentInstances.set(element, instance);
+  if (element && typeof element.setAttribute === "function") {
+    element.__coherentInstance = instance;
+    if (!element.hasAttribute("data-coherent-component")) {
+      element.setAttribute("data-coherent-component", "true");
+    }
+  }
+  const componentProps = { ...instance.props };
+  if (instance.component.__stateContainer) {
+    if (instance.state) {
+      instance.component.__stateContainer.setState(instance.state);
+    }
+    instance.setState = (newState) => {
+      instance.component.__stateContainer.setState(newState);
+      const updatedState = instance.component.__stateContainer.getState();
+      instance.state = updatedState;
+      instance.rerender();
+    };
+  }
+  const freshVirtualElement = instance.component(componentProps);
+  if (freshVirtualElement && typeof freshVirtualElement === "object") {
+    const tagName = Object.keys(freshVirtualElement)[0];
+    if (freshVirtualElement[tagName]) {
+    }
+  }
+  attachFunctionEventListeners(element, freshVirtualElement, instance);
+  return instance;
+}
+var eventRegistry = {};
+function registerEventHandler(id, handler) {
+  eventRegistry[id] = handler;
+}
+if (typeof window !== "undefined") {
+  window.__coherentEventRegistry = window.__coherentEventRegistry || {};
+  window.__coherentActionRegistry = window.__coherentActionRegistry || {};
+  window.__coherentEventHandler = function(eventId, element, event) {
+    let handlerFunc = window.__coherentEventRegistry[eventId];
+    if (!handlerFunc && window.__coherentActionRegistry[eventId]) {
+      handlerFunc = window.__coherentActionRegistry[eventId];
+    }
+    if (handlerFunc) {
+      let componentElement = element;
+      while (componentElement && !componentElement.hasAttribute("data-coherent-component")) {
+        componentElement = componentElement.parentElement;
+      }
+      if (componentElement && componentElement.__coherentInstance) {
+        const instance = componentElement.__coherentInstance;
+        const state = instance.state || {};
+        const setState = instance.setState ? instance.setState.bind(instance) : (() => {
+        });
+        try {
+          handlerFunc.call(element, event, state, setState);
+        } catch (_error) {
+          console.warn(`Error executing coherent event handler:`, _error);
+        }
+      } else {
+        try {
+          handlerFunc.call(element, event);
+        } catch (_error) {
+          console.warn(`Error executing coherent event handler (no component context):`, _error);
+        }
+      }
+    } else {
+      console.warn(`Event handler not found for ID: ${eventId}`);
+    }
+  };
+}
+function attachFunctionEventListeners(rootElement, virtualElement, instance, options = {}) {
+  if (!rootElement || !virtualElement || typeof window === "undefined") {
+    return;
+  }
+  function traverseAndAttach(domElement, vElement, path = []) {
+    if (!vElement || typeof vElement !== "object") return;
+    if (Array.isArray(vElement)) {
+      vElement.forEach((child, index) => {
+        const childElement = domElement.children[index];
+        if (childElement) {
+          traverseAndAttach(childElement, child, [...path, index]);
+        }
+      });
+      return;
+    }
+    const tagName = Object.keys(vElement)[0];
+    const elementProps = vElement[tagName];
+    if (elementProps && typeof elementProps === "object") {
+      const eventHandlers = ["onclick", "onchange", "oninput", "onfocus", "onblur", "onsubmit", "onkeypress", "onkeydown", "onkeyup", "onmouseenter", "onmouseleave"];
+      eventHandlers.forEach((eventName) => {
+        const handler = elementProps[eventName];
+        if (typeof handler === "function") {
+          const eventType = eventName.substring(2);
+          if (options.inputsOnly) {
+            const inputEvents = ["input", "change", "keypress"];
+            const isDynamicElement = domElement.closest(".todo-item") || domElement.closest("[data-dynamic]");
+            if (!inputEvents.includes(eventType) && !(eventType === "click" && isDynamicElement)) {
+              return;
+            }
+          }
+          const handlerKey = `__coherent_${eventType}_handler`;
+          if (domElement[handlerKey]) {
+            domElement.removeEventListener(eventType, domElement[handlerKey]);
+            delete domElement[handlerKey];
+          }
+          const wrappedHandler = (event) => {
+            try {
+              if (eventType !== "input" && eventType !== "change" && eventType !== "keypress") {
+                event.preventDefault();
+              }
+              let currentState = {};
+              let currentSetState = () => {
+              };
+              if (instance.component && instance.component.__stateContainer) {
+                currentState = instance.component.__stateContainer.getState();
+                currentSetState = (newState) => {
+                  instance.component.__stateContainer.setState(newState);
+                  if (instance.state && typeof newState === "object") {
+                    Object.assign(instance.state, newState);
+                  }
+                  instance.component.__stateContainer.getState();
+                  const componentRoot = domElement.closest("[data-coherent-component]");
+                  if (componentRoot && componentRoot.__coherentInstance) {
+                    componentRoot.__coherentInstance.rerender();
+                  }
+                };
+              } else if (instance.state) {
+                currentState = instance.state;
+                currentSetState = (newState) => {
+                  if (typeof newState === "object") {
+                    Object.assign(instance.state, newState);
+                  }
+                  const componentRoot = domElement.closest("[data-coherent-component]");
+                  if (componentRoot && componentRoot.__coherentInstance) {
+                    componentRoot.__coherentInstance.rerender();
+                  }
+                };
+              }
+              const result = handler.call(domElement, event, currentState, currentSetState);
+              return result;
+            } catch (_error) {
+              console.error(`Error in ${eventName} handler:`, _error);
+            }
+          };
+          if (domElement.hasAttribute(eventName)) {
+            domElement.removeAttribute(eventName);
+          }
+          domElement[handlerKey] = wrappedHandler;
+          const useCapture = eventType !== "input" && eventType !== "change";
+          domElement.addEventListener(eventType, wrappedHandler, useCapture);
+          if (instance.eventListeners && Array.isArray(instance.eventListeners)) {
+            instance.eventListeners.push({
+              element: domElement,
+              event: eventType,
+              handler: wrappedHandler
+            });
+          }
+        }
+      });
+      if (elementProps.children) {
+        const children = Array.isArray(elementProps.children) ? elementProps.children : [elementProps.children];
+        children.forEach((child, index) => {
+          const childElement = domElement.children[index];
+          if (childElement && child) {
+            traverseAndAttach(childElement, child, [...path, "children", index]);
+          }
+        });
+      }
+    }
+  }
+  traverseAndAttach(rootElement, virtualElement);
+}
+function attachEventListeners(element, instance) {
+  try {
+    if (instance && instance.eventListeners && Array.isArray(instance.eventListeners)) {
+      instance.eventListeners.forEach(({ element: element2, event, handler }) => {
+        if (element2 && typeof element2.removeEventListener === "function") {
+          element2.removeEventListener(event, handler);
+        }
+      });
+      instance.eventListeners = [];
+    }
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      return;
+    }
+    if (!element || typeof element.querySelectorAll !== "function") {
+      return;
+    }
+    const actionElements = element.querySelectorAll("[data-action]");
+    actionElements.forEach((actionElement) => {
+      if (!actionElement || typeof actionElement.getAttribute !== "function") return;
+      const action = actionElement.getAttribute("data-action");
+      const target = actionElement.getAttribute("data-target") || "default";
+      const event = actionElement.getAttribute("data-event") || "click";
+      if (action) {
+        const handler = (e) => {
+          if (e && typeof e.preventDefault === "function") {
+            e.preventDefault();
+          }
+          handleComponentAction(e, action, target, instance);
+        };
+        if (typeof actionElement.addEventListener === "function") {
+          actionElement.addEventListener(event, handler);
+          if (instance.eventListeners && Array.isArray(instance.eventListeners)) {
+            instance.eventListeners.push({
+              element: actionElement,
+              event,
+              handler
+            });
+          }
+        }
+      }
+    });
+    const eventAttributes = ["onclick", "onchange", "oninput", "onfocus", "onblur", "onsubmit"];
+    eventAttributes.forEach((eventName) => {
+      const attributeSelector = `[${eventName}]`;
+      const elements = element.querySelectorAll(attributeSelector);
+      elements.forEach((elementWithEvent) => {
+        if (!elementWithEvent || typeof elementWithEvent.getAttribute !== "function") return;
+        const eventAttr = elementWithEvent.getAttribute(eventName);
+        if (eventAttr) {
+          console.warn(
+            `[Coherent.js] Inline event attribute "${eventName}="${eventAttr}" found but not supported.
+For security and CSP compliance, use one of these alternatives:
+1. Function-based handlers: Pass functions directly in virtual DOM
+2. Data-action registry: <button data-action="actionId" data-event="click">
+3. Event registry: <button data-coherent-event="handlerId" data-coherent-event-type="click">
+See documentation for details.`
+          );
+        }
+      });
+    });
+    const dataActionElements = element.querySelectorAll("[data-action]");
+    dataActionElements.forEach((actionElement) => {
+      if (!actionElement || typeof actionElement.getAttribute !== "function") return;
+      const actionId = actionElement.getAttribute("data-action");
+      const eventType = actionElement.getAttribute("data-event") || "click";
+      if (actionId) {
+        let handlerFunc = null;
+        if (typeof window !== "undefined" && window.__coherentActionRegistry && window.__coherentActionRegistry[actionId]) {
+          handlerFunc = window.__coherentActionRegistry[actionId];
+        } else {
+          console.warn(`No handler found for action ${actionId}`, window.__coherentActionRegistry);
+        }
+        if (handlerFunc && typeof handlerFunc === "function") {
+          if (typeof actionElement.hasAttribute === "function" && !actionElement.hasAttribute(`data-hydrated-${eventType}`)) {
+            actionElement.setAttribute(`data-hydrated-${eventType}`, "true");
+            const handler = (e) => {
+              try {
+                let componentElement = actionElement;
+                while (componentElement && !componentElement.hasAttribute("data-coherent-component")) {
+                  componentElement = componentElement.parentElement;
+                }
+                if (componentElement && componentElement.__coherentInstance) {
+                  const instance2 = componentElement.__coherentInstance;
+                  const state = instance2.state || {};
+                  const setState = instance2.setState || (() => {
+                  });
+                  handlerFunc.call(actionElement, e, state, setState);
+                } else {
+                  handlerFunc.call(actionElement, e);
+                }
+              } catch (_error) {
+                console.warn(`Error executing action handler for ${actionId}:`, _error);
+              }
+            };
+            if (typeof actionElement.addEventListener === "function") {
+              actionElement.addEventListener(eventType, handler);
+              if (instance && instance.eventListeners && Array.isArray(instance.eventListeners)) {
+                instance.eventListeners.push({
+                  element: actionElement,
+                  event: eventType,
+                  handler
+                });
+              }
+            }
+          }
+        }
+      }
+    });
+    const coherentEventElements = element.querySelectorAll("[data-coherent-event]");
+    coherentEventElements.forEach((elementWithCoherentEvent) => {
+      if (!elementWithCoherentEvent || typeof elementWithCoherentEvent.getAttribute !== "function") return;
+      const eventId = elementWithCoherentEvent.getAttribute("data-coherent-event");
+      const eventType = elementWithCoherentEvent.getAttribute("data-coherent-event-type");
+      if (eventId && eventType) {
+        let handlerFunc = null;
+        if (typeof window !== "undefined" && window.__coherentEventRegistry && window.__coherentEventRegistry[eventId]) {
+          handlerFunc = window.__coherentEventRegistry[eventId];
+        }
+        if (handlerFunc && typeof handlerFunc === "function") {
+          if (typeof elementWithCoherentEvent.hasAttribute === "function" && !elementWithCoherentEvent.hasAttribute(`data-hydrated-${eventType}`)) {
+            elementWithCoherentEvent.setAttribute(`data-hydrated-${eventType}`, "true");
+            const handler = (e) => {
+              try {
+                const state = instance.state || {};
+                const setState = instance.setState || (() => {
+                });
+                handlerFunc.call(elementWithCoherentEvent, e, state, setState);
+              } catch (_error) {
+                console.warn(`Error executing coherent event handler:`, _error);
+              }
+            };
+            if (typeof elementWithCoherentEvent.addEventListener === "function") {
+              elementWithCoherentEvent.addEventListener(eventType, handler);
+              if (instance.eventListeners && Array.isArray(instance.eventListeners)) {
+                instance.eventListeners.push({
+                  element: elementWithCoherentEvent,
+                  event: eventType,
+                  handler
+                });
+              }
+            }
+          }
+        }
+      }
+    });
+  } catch (_error) {
+    console.warn("Error attaching event listeners:", _error);
+  }
+}
+function handleComponentAction(event, action, target, instance) {
+  switch (action) {
+    case "increment":
+      if (instance.state && instance.state.count !== void 0) {
+        const step = instance.state.step || 1;
+        instance.setState({ count: instance.state.count + step });
+        const countElement = instance.element.querySelector('[data-ref="count"]');
+        if (countElement) {
+          countElement.textContent = `Count: ${instance.state.count + step}`;
+        }
+      }
+      break;
+    case "decrement":
+      if (instance.state && instance.state.count !== void 0) {
+        const step = instance.state.step || 1;
+        instance.setState({ count: instance.state.count - step });
+        const countElement = instance.element.querySelector('[data-ref="count"]');
+        if (countElement) {
+          countElement.textContent = `Count: ${instance.state.count - step}`;
+        }
+      }
+      break;
+    case "reset":
+      if (instance.state) {
+        const initialCount = instance.props.initialCount || 0;
+        instance.setState({ count: initialCount });
+        const countElement = instance.element.querySelector('[data-ref="count"]');
+        if (countElement) {
+          countElement.textContent = `Count: ${initialCount}`;
+        }
+      }
+      break;
+    case "changeStep":
+      const inputElement = event.target;
+      if (inputElement && inputElement.value) {
+        const stepValue = parseInt(inputElement.value, 10);
+        if (!isNaN(stepValue) && stepValue >= 1 && stepValue <= 10) {
+          instance.setState({ step: stepValue });
+          const stepElement = instance.element.querySelector('[data-ref="step"]');
+          if (stepElement) {
+            stepElement.textContent = `Step: ${stepValue}`;
+          }
+        }
+      }
+      break;
+    case "toggle":
+      const todoIndex = event.target && event.target.getAttribute ? parseInt(event.target.getAttribute("data-todo-index")) : -1;
+      if (todoIndex >= 0 && instance.state && instance.state.todos && instance.state.todos[todoIndex]) {
+        const newTodos = [...instance.state.todos];
+        newTodos[todoIndex].completed = !newTodos[todoIndex].completed;
+        instance.setState({ todos: newTodos });
+      }
+      break;
+    case "add":
+      if (typeof document !== "undefined" && document.getElementById) {
+        const input = document.getElementById(`new-todo-${target}`);
+        if (input && input.value && input.value.trim()) {
+          if (instance.state && instance.state.todos) {
+            const newTodos = [
+              ...instance.state.todos,
+              { text: input.value.trim(), completed: false }
+            ];
+            instance.setState({ todos: newTodos });
+            input.value = "";
+          }
+        }
+      }
+      break;
+    default:
+      if (instance && typeof instance[action] === "function") {
+        try {
+          instance[action](event, target);
+        } catch (_error) {
+          console.warn(`Error executing custom action ${action}:`, _error);
+        }
+      } else {
+        if (typeof window !== "undefined" && window.__coherentActionRegistry && window.__coherentActionRegistry[action]) {
+          const handlerFunc = window.__coherentActionRegistry[action];
+          const state = instance ? instance.state || {} : {};
+          const setState = instance && instance.setState ? instance.setState.bind(instance) : (() => {
+          });
+          try {
+            handlerFunc(event, state, setState);
+          } catch (_error) {
+            console.warn(`Error executing action handler ${action}:`, _error);
+          }
+        } else {
+        }
+      }
+  }
+}
+function hydrateAll(elements, components, propsArray = []) {
+  if (elements.length !== components.length) {
+    throw new Error("Number of elements must match number of components");
+  }
+  return elements.map((element, index) => {
+    const component = components[index];
+    const props = propsArray[index] || {};
+    return hydrate(element, component, props);
+  });
+}
+function hydrateBySelector(selector, component, props = {}) {
+  if (typeof window === "undefined" || !document.querySelectorAll) {
+    return [];
+  }
+  const elements = document.querySelectorAll(selector);
+  return Array.from(elements).map((element) => hydrate(element, component, props));
+}
+function enableClientEvents(rootElement = document) {
+  if (typeof window === "undefined" || !rootElement.querySelectorAll) {
+    return;
+  }
+}
+function makeHydratable(component, options = {}) {
+  const componentName = options.componentName || component.name || "AnonymousComponent";
+  const hydratableComponent = function(props = {}) {
+    return component(props);
+  };
+  Object.defineProperty(hydratableComponent, "name", {
+    value: componentName,
+    writable: false
+  });
+  Object.keys(component).forEach((key) => {
+    hydratableComponent[key] = component[key];
+  });
+  if (component.prototype) {
+    hydratableComponent.prototype = Object.create(component.prototype);
+  }
+  if (component.__wrappedComponent && component.__stateContainer) {
+    hydratableComponent.__wrappedComponent = component.__wrappedComponent;
+    hydratableComponent.__stateContainer = component.__stateContainer;
+  }
+  hydratableComponent.isHydratable = true;
+  hydratableComponent.hydrationOptions = options;
+  hydratableComponent.autoHydrate = function(componentRegistry = {}) {
+    if (!componentRegistry[hydratableComponent.name || "AnonymousComponent"]) {
+      componentRegistry[hydratableComponent.name || "AnonymousComponent"] = hydratableComponent;
+    }
+    autoHydrate(componentRegistry);
+  };
+  hydratableComponent.isHydratable = true;
+  hydratableComponent.withHydrationData = function(customProps = {}, customState = null) {
+    return {
+      render: function(props = {}) {
+        const mergedProps = { ...customProps, ...props };
+        const result = hydratableComponent(mergedProps);
+        const hydrationData = hydratableComponent.getHydrationData(mergedProps, customState);
+        if (result && typeof result === "object" && !Array.isArray(result)) {
+          const tagName = Object.keys(result)[0];
+          const elementProps = result[tagName];
+          if (elementProps && typeof elementProps === "object") {
+            Object.keys(hydrationData.hydrationAttributes).forEach((attr) => {
+              const value = hydrationData.hydrationAttributes[attr];
+              if (value !== null) {
+                elementProps[attr] = value;
+              }
+            });
+          }
+        }
+        return result;
+      }
+    };
+  };
+  hydratableComponent.getHydrationData = function(props = {}, state = null) {
+    return {
+      componentName,
+      props,
+      initialState: options.initialState,
+      // Add data attributes for hydration
+      hydrationAttributes: {
+        "data-coherent-component": componentName,
+        "data-coherent-state": state ? JSON.stringify(state) : options.initialState ? JSON.stringify(options.initialState) : null,
+        "data-coherent-props": Object.keys(props).length > 0 ? JSON.stringify(props) : null
+      }
+    };
+  };
+  hydratableComponent.renderWithHydration = function(props = {}) {
+    const result = hydratableComponent(props);
+    let state = null;
+    if (hydratableComponent.__wrappedComponent && hydratableComponent.__stateContainer) {
+      try {
+        state = hydratableComponent.__stateContainer.getState();
+      } catch (e) {
+        console.warn("Could not get component state:", e);
+      }
+    }
+    const hydrationData = hydratableComponent.getHydrationData(props, state);
+    if (result && typeof result === "object" && !Array.isArray(result)) {
+      const tagName = Object.keys(result)[0];
+      const elementProps = result[tagName];
+      if (elementProps && typeof elementProps === "object") {
+        Object.keys(hydrationData.hydrationAttributes).forEach((attr) => {
+          const value = hydrationData.hydrationAttributes[attr];
+          if (value !== null) {
+            elementProps[attr] = value;
+          }
+        });
+      }
+    }
+    return result;
+  };
+  return hydratableComponent;
+}
+function autoHydrate(componentRegistry = {}) {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return;
+  }
+  if (componentRegistry === window) {
+    console.warn("\u26A0\uFE0F Component registry is the window object! This suggests the registry was not properly initialized.");
+    componentRegistry = window.componentRegistry || {};
+  }
+  window.__coherentEventRegistry = window.__coherentEventRegistry || {};
+  window.__coherentActionRegistry = window.__coherentActionRegistry || {};
+  const hydrateComponents = () => {
+    const hydrateableElements = document.querySelectorAll("[data-coherent-component]");
+    hydrateableElements.forEach((element) => {
+      const componentName = element.getAttribute("data-coherent-component");
+      let component = componentRegistry[componentName];
+      if (!component) {
+        for (const comp of Object.values(componentRegistry)) {
+          if (comp && comp.isHydratable) {
+            component = comp;
+            break;
+          }
+        }
+      }
+      if (!component) {
+        console.error(`\u274C Component ${componentName} not found in registry`);
+        return;
+      }
+      if (component) {
+        try {
+          const propsAttr = element.getAttribute("data-coherent-props");
+          const props = propsAttr ? JSON.parse(propsAttr) : {};
+          const stateAttr = element.getAttribute("data-coherent-state");
+          const initialState = stateAttr ? JSON.parse(stateAttr) : null;
+          const instance = hydrate(element, component, props, { initialState });
+          if (instance) {
+          } else {
+            console.warn(`\u274C Failed to hydrate component: ${componentName}`);
+          }
+        } catch (_error) {
+          console.error(`\u274C Failed to auto-hydrate component ${componentName}:`, _error);
+        }
+      }
+    });
+    enableClientEvents();
+  };
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", hydrateComponents);
+  } else {
+    hydrateComponents();
+  }
+}
+export {
+  autoHydrate,
+  enableClientEvents,
+  hydrate,
+  hydrateAll,
+  hydrateBySelector,
+  makeHydratable,
+  registerEventHandler
+};
+//# sourceMappingURL=index.js.map