elementdrawing 1.0.0

package/src/jsx/runtime/render.js

@@ -0,0 +1,914 @@
+/**
+ * render - DOM Rendering Engine
+ * ElementDrawing Framework - Converts virtual DOM to real DOM nodes with
+ * attribute setting, style application, event delegation, ref assignment,
+ * portal rendering, suspense, error boundaries, hydration, SVG/MathML
+ * namespace support, and concurrent rendering hints.
+ */
+
+'use strict';
+
+const {
+  REACT_FRAGMENT_TYPE, REACT_PORTAL_TYPE, REACT_SUSPENSE_TYPE,
+  REACT_LAZY_TYPE, REACT_STRICT_MODE_TYPE, REACT_ERROR_BOUNDARY_TYPE,
+  isValidElement,
+} = require('./createElement');
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const TEXT_NODE_TYPE = '#text';
+const COMMENT_NODE_TYPE = '#comment';
+
+const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+const MATH_NAMESPACE = 'http://www.w3.org/1998/Math/MathML';
+
+const VOID_ELEMENTS = new Set([
+  'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+  'link', 'meta', 'param', 'source', 'track', 'wbr',
+]);
+
+const SVG_TAGS = new Set([
+  'svg', 'animate', 'animateMotion', 'animateTransform', 'circle', 'clipPath',
+  'defs', 'desc', 'ellipse', 'feBlend', 'feColorMatrix', 'feComponentTransfer',
+  'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap',
+  'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG',
+  'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology',
+  'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile',
+  'feTurbulence', 'filter', 'foreignObject', 'g', 'image', 'line', 'linearGradient',
+  'marker', 'mask', 'metadata', 'mpath', 'path', 'pattern', 'polygon', 'polyline',
+  'radialGradient', 'rect', 'set', 'stop', 'switch', 'symbol', 'text', 'textPath',
+  'tspan', 'use', 'view',
+]);
+
+const BOOLEAN_ATTRIBUTES = new Set([
+  'allowFullScreen', 'async', 'autofocus', 'autoPlay', 'checked', 'controls',
+  'default', 'disabled', 'enableRemotePlayback', 'formNoValidate', 'hidden',
+  'loop', 'multiple', 'muted', 'noModule', 'noValidate', 'open', 'playsInline',
+  'readOnly', 'required', 'reversed', 'scoped', 'seamless', 'selected',
+  'itemScope',
+]);
+
+const PROPERTY_ATTRIBUTES = new Set([
+  'value', 'checked', 'selected', 'innerHTML', 'textContent',
+  'defaultValue', 'defaultChecked',
+]);
+
+// Event delegation map
+const eventDelegationMap = new Map();
+let rootContainer = null;
+
+// ─── DOM Creation ─────────────────────────────────────────────────────────────
+
+/**
+ * Create a real DOM element from a virtual element type.
+ * @param {string} type
+ * @param {Object} props
+ * @param {string|null} namespace
+ * @returns {HTMLElement|SVGElement}
+ */
+function createDOMElement(type, props, namespace) {
+  let domNode;
+
+  if (namespace === SVG_NAMESPACE || SVG_TAGS.has(type)) {
+    domNode = document.createElementNS(SVG_NAMESPACE, type);
+  } else if (namespace === MATH_NAMESPACE) {
+    domNode = document.createElementNS(MATH_NAMESPACE, type);
+  } else {
+    domNode = document.createElement(type);
+  }
+
+  return domNode;
+}
+
+/**
+ * Create a text node.
+ * @param {string} text
+ * @returns {Text}
+ */
+function createTextNode(text) {
+  return document.createTextNode(text);
+}
+
+/**
+ * Create a comment node.
+ * @param {string} text
+ * @returns {Comment}
+ */
+function createCommentNode(text) {
+  return document.createComment(text);
+}
+
+/**
+ * Create a document fragment.
+ * @returns {DocumentFragment}
+ */
+function createDocumentFragment() {
+  return document.createDocumentFragment();
+}
+
+// ─── Attribute Setting ────────────────────────────────────────────────────────
+
+/**
+ * Set an attribute on a DOM element with proper handling for different types.
+ * @param {HTMLElement} domNode
+ * @param {string} name
+ * @param {*} value
+ */
+function setAttribute(domNode, name, value) {
+  if (value === null || value === undefined || value === false) {
+    removeAttribute(domNode, name);
+    return;
+  }
+
+  // Boolean attributes
+  if (BOOLEAN_ATTRIBUTES.has(name)) {
+    if (value === true) {
+      domNode.setAttribute(name.toLowerCase(), '');
+      domNode[name] = true;
+    } else {
+      removeAttribute(domNode, name);
+      domNode[name] = false;
+    }
+    return;
+  }
+
+  // Property attributes
+  if (PROPERTY_ATTRIBUTES.has(name)) {
+    domNode[name] = value;
+    return;
+  }
+
+  // className -> class
+  if (name === 'className') {
+    domNode.className = value;
+    return;
+  }
+
+  // htmlFor -> for
+  if (name === 'htmlFor') {
+    domNode.setAttribute('for', value);
+    return;
+  }
+
+  // tabIndex
+  if (name === 'tabIndex') {
+    domNode.tabIndex = value;
+    return;
+  }
+
+  // Style object
+  if (name === 'style') {
+    applyStyle(domNode, value);
+    return;
+  }
+
+  // Event handlers
+  if (name.startsWith('on')) {
+    setEventHandler(domNode, name, value);
+    return;
+  }
+
+  // Data attributes
+  if (name.startsWith('data-')) {
+    domNode.setAttribute(name, value);
+    return;
+  }
+
+  // ARIA attributes
+  if (name.startsWith('aria-')) {
+    domNode.setAttribute(name, value);
+    return;
+  }
+
+  // Custom element attributes
+  if (name.includes('-') && !(domNode instanceof SVGElement)) {
+    domNode.setAttribute(name, value);
+    return;
+  }
+
+  // Standard attributes
+  if (name in domNode) {
+    try {
+      domNode[name] = value;
+    } catch (e) {
+      domNode.setAttribute(name, value);
+    }
+  } else {
+    domNode.setAttribute(name, value);
+  }
+}
+
+/**
+ * Remove an attribute from a DOM element.
+ * @param {HTMLElement} domNode
+ * @param {string} name
+ */
+function removeAttribute(domNode, name) {
+  if (name === 'className') {
+    domNode.className = '';
+    return;
+  }
+
+  if (name === 'style') {
+    domNode.removeAttribute('style');
+    domNode.style.cssText = '';
+    return;
+  }
+
+  if (name === 'htmlFor') {
+    domNode.removeAttribute('for');
+    return;
+  }
+
+  if (BOOLEAN_ATTRIBUTES.has(name)) {
+    domNode.removeAttribute(name.toLowerCase());
+    domNode[name] = false;
+    return;
+  }
+
+  if (PROPERTY_ATTRIBUTES.has(name)) {
+    if (name === 'value') domNode.value = '';
+    else if (name === 'checked') domNode.checked = false;
+    else if (name === 'selected') domNode.selected = false;
+    return;
+  }
+
+  if (name.startsWith('on')) {
+    removeEventHandler(domNode, name);
+    return;
+  }
+
+  try {
+    domNode.removeAttribute(name);
+    if (name in domNode) domNode[name] = '';
+  } catch (e) {
+    // Some attributes can't be removed
+  }
+}
+
+/**
+ * Set a property directly on a DOM element.
+ */
+function setProperty(domNode, name, value) {
+  try {
+    domNode[name] = value;
+  } catch (e) {
+    console.warn('[render] Failed to set property "' + name + '":', e);
+  }
+}
+
+// ─── Style Application ────────────────────────────────────────────────────────
+
+/**
+ * Apply inline styles to a DOM element.
+ * @param {HTMLElement} domNode
+ * @param {Object|string} style
+ */
+function applyStyle(domNode, style) {
+  if (!style) {
+    domNode.removeAttribute('style');
+    return;
+  }
+
+  if (typeof style === 'string') {
+    domNode.style.cssText = style;
+    return;
+  }
+
+  if (typeof style === 'object') {
+    for (const prop in style) {
+      if (style.hasOwnProperty(prop)) {
+        const cssProp = prop.includes('-') ? prop : camelToKebab(prop);
+        domNode.style.setProperty(cssProp, style[prop]);
+      }
+    }
+  }
+}
+
+/**
+ * Convert camelCase to kebab-case.
+ */
+function camelToKebab(str) {
+  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+/**
+ * Apply CSS classes to a DOM element.
+ */
+function applyClassName(domNode, className) {
+  if (!className) {
+    domNode.removeAttribute('class');
+    return;
+  }
+  domNode.className = className;
+}
+
+// ─── Event Handling ───────────────────────────────────────────────────────────
+
+/**
+ * Set an event handler on a DOM element.
+ */
+function setEventHandler(domNode, name, handler) {
+  const eventType = name.slice(2).toLowerCase();
+  const normalizedType = normalizeEventType(eventType);
+
+  const handlerKey = '__ed_handler_' + normalizedType;
+  const captureHandlerKey = '__ed_capture_' + normalizedType;
+
+  const isCapture = name.endsWith('Capture');
+  const key = isCapture ? captureHandlerKey : handlerKey;
+
+  // Remove old handler if exists
+  if (domNode[key]) {
+    domNode.removeEventListener(normalizedType, domNode[key], isCapture);
+  }
+
+  // Set new handler
+  if (typeof handler === 'function') {
+    domNode[key] = handler;
+    domNode.addEventListener(normalizedType, handler, isCapture);
+  }
+}
+
+/**
+ * Remove an event handler from a DOM element.
+ */
+function removeEventHandler(domNode, name) {
+  const eventType = name.slice(2).toLowerCase();
+  const normalizedType = normalizeEventType(eventType);
+  const isCapture = name.endsWith('Capture');
+  const key = isCapture ? '__ed_capture_' + normalizedType : '__ed_handler_' + normalizedType;
+
+  if (domNode[key]) {
+    domNode.removeEventListener(normalizedType, domNode[key], isCapture);
+    domNode[key] = null;
+  }
+}
+
+/**
+ * Normalize event type names.
+ */
+function normalizeEventType(eventType) {
+  const map = {
+    'doubleclick': 'dblclick',
+    'change': 'change',
+    'input': 'input',
+    'submit': 'submit',
+    'focusin': 'focusin',
+    'focusout': 'focusout',
+  };
+  return map[eventType] || eventType;
+}
+
+// ─── Event Delegation ─────────────────────────────────────────────────────────
+
+/**
+ * Set up event delegation on the root container.
+ * Captures events at the root and dispatches to the correct handler.
+ * @param {HTMLElement} container
+ */
+function setupEventDelegation(container) {
+  const delegatedEvents = ['click', 'input', 'change', 'submit', 'keydown', 'keyup', 'focus', 'blur'];
+
+  delegatedEvents.forEach((eventType) => {
+    container.addEventListener(eventType, function delegatedHandler(event) {
+      let target = event.target;
+
+      // Walk up the DOM tree to find the handler
+      while (target && target !== container) {
+        const handlerKey = '__ed_handler_' + eventType;
+        if (target[handlerKey]) {
+          try {
+            target[handlerKey](event);
+          } catch (error) {
+            console.error('[render] Delegated event handler error:', error);
+          }
+          break;
+        }
+        target = target.parentElement;
+      }
+    });
+  });
+}
+
+// ─── Ref Assignment ───────────────────────────────────────────────────────────
+
+/**
+ * Assign a DOM node to a ref.
+ */
+function assignRef(ref, domNode) {
+  if (!ref) return;
+
+  if (typeof ref === 'function') {
+    try {
+      ref(domNode);
+    } catch (error) {
+      console.error('[render] Callback ref error:', error);
+    }
+  } else if (typeof ref === 'object' && ref._isRef) {
+    ref.current = domNode;
+  } else if (typeof ref === 'object' && ref !== null) {
+    ref.current = domNode;
+  }
+}
+
+/**
+ * Clean up a ref when an element is removed.
+ */
+function detachRef(ref) {
+  if (!ref) return;
+
+  if (typeof ref === 'function') {
+    try {
+      ref(null);
+    } catch (error) {
+      console.error('[render] Detach ref error:', error);
+    }
+  } else if (typeof ref === 'object') {
+    ref.current = null;
+  }
+}
+
+// ─── Core Render Function ─────────────────────────────────────────────────────
+
+/**
+ * Render a virtual DOM element into a real DOM container.
+ *
+ * @param {Object} vnode - Virtual DOM element
+ * @param {HTMLElement} container - Target DOM container
+ * @param {Function} [callback] - Called after render completes
+ * @returns {HTMLElement} The rendered DOM node
+ */
+function render(vnode, container, callback) {
+  if (!container) {
+    throw new Error('[render] Target container is not a DOM element');
+  }
+
+  if (!(container instanceof HTMLElement) && !(container instanceof DocumentFragment)) {
+    throw new Error('[render] Target container must be an HTMLElement or DocumentFragment');
+  }
+
+  rootContainer = container;
+
+  // Set up event delegation on first render
+  if (!eventDelegationMap.has(container)) {
+    setupEventDelegation(container);
+    eventDelegationMap.set(container, true);
+  }
+
+  // Handle null/undefined/boolean vnodes
+  if (vnode === null || vnode === undefined || typeof vnode === 'boolean') {
+    while (container.firstChild) {
+      container.removeChild(container.firstChild);
+    }
+    if (typeof callback === 'function') callback();
+    return container;
+  }
+
+  // Render the vnode to DOM
+  const domNode = renderVNode(vnode, container, null);
+
+  // Clear container and insert new DOM
+  while (container.firstChild) {
+    container.removeChild(container.firstChild);
+  }
+  container.appendChild(domNode);
+
+  if (typeof callback === 'function') callback();
+
+  return domNode;
+}
+
+/**
+ * Render a virtual DOM node to a real DOM node.
+ * @param {Object} vnode
+ * @param {HTMLElement} container
+ * @param {string|null} namespace
+ * @returns {HTMLElement|Text}
+ */
+function renderVNode(vnode, container, namespace) {
+  // Handle primitive values
+  if (typeof vnode === 'string' || typeof vnode === 'number') {
+    return createTextNode(String(vnode));
+  }
+
+  // Handle null/undefined/boolean
+  if (vnode === null || vnode === undefined || typeof vnode === 'boolean') {
+    return createCommentNode('empty');
+  }
+
+  // Handle arrays
+  if (Array.isArray(vnode)) {
+    const fragment = createDocumentFragment();
+    vnode.forEach((child) => {
+      const childNode = renderVNode(child, fragment, namespace);
+      if (childNode) fragment.appendChild(childNode);
+    });
+    return fragment;
+  }
+
+  // Handle invalid vnodes
+  if (typeof vnode !== 'object') {
+    console.warn('[render] Invalid vnode type:', typeof vnode);
+    return createCommentNode('invalid');
+  }
+
+  // Text node
+  if (vnode.type === TEXT_NODE_TYPE) {
+    return createTextNode(vnode.props.nodeValue || '');
+  }
+
+  // Fragment
+  if (vnode.type === REACT_FRAGMENT_TYPE) {
+    return renderFragment(vnode, container, namespace);
+  }
+
+  // Portal
+  if (vnode.$$typeof === Symbol.for('elementdrawing.portal')) {
+    return renderPortal(vnode, namespace);
+  }
+
+  // Suspense
+  if (vnode.type === REACT_SUSPENSE_TYPE) {
+    return renderSuspense(vnode, container, namespace);
+  }
+
+  // StrictMode
+  if (vnode.type === REACT_STRICT_MODE_TYPE) {
+    return renderStrictMode(vnode, container, namespace);
+  }
+
+  // Error Boundary
+  if (vnode.type === REACT_ERROR_BOUNDARY_TYPE) {
+    return renderErrorBoundaryVNode(vnode, container, namespace);
+  }
+
+  // Lazy component
+  if (vnode.$$typeof === Symbol.for('elementdrawing.lazy')) {
+    return renderLazyComponent(vnode, container, namespace);
+  }
+
+  // Function component
+  if (typeof vnode.type === 'function' && !vnode.type._isClassComponent) {
+    return renderFunctionComponent(vnode, container, namespace);
+  }
+
+  // Class component
+  if (typeof vnode.type === 'function' && vnode.type._isClassComponent) {
+    return renderClassComponent(vnode, container, namespace);
+  }
+
+  // Host element (HTML/SVG)
+  if (typeof vnode.type === 'string') {
+    return renderHostElement(vnode, container, namespace);
+  }
+
+  console.warn('[render] Unknown vnode type:', vnode.type);
+  return createCommentNode('unknown');
+}
+
+// ─── Special Renderers ────────────────────────────────────────────────────────
+
+function renderFragment(vnode, container, namespace) {
+  const fragment = createDocumentFragment();
+  const children = flattenChildrenFromVNode(vnode);
+
+  children.forEach((child) => {
+    const childNode = renderVNode(child, fragment, namespace);
+    if (childNode) fragment.appendChild(childNode);
+  });
+
+  return fragment;
+}
+
+function renderPortal(vnode, namespace) {
+  const { children, containerInfo } = vnode;
+  if (!containerInfo) {
+    console.warn('[render] Portal requires a container element');
+    return createCommentNode('portal-no-container');
+  }
+
+  const childNodes = Array.isArray(children) ? children : [children];
+  childNodes.forEach((child) => {
+    const domNode = renderVNode(child, containerInfo, namespace);
+    if (domNode) containerInfo.appendChild(domNode);
+  });
+
+  return createCommentNode('portal');
+}
+
+function renderSuspense(vnode, container, namespace) {
+  try {
+    const children = flattenChildrenFromVNode(vnode);
+    const fragment = createDocumentFragment();
+
+    children.forEach((child) => {
+      const childNode = renderVNode(child, fragment, namespace);
+      if (childNode) fragment.appendChild(childNode);
+    });
+
+    return fragment;
+  } catch (error) {
+    // If a child suspends, render the fallback
+    if (vnode.props && vnode.props.fallback) {
+      return renderVNode(vnode.props.fallback, container, namespace);
+    }
+    return createCommentNode('suspense-error');
+  }
+}
+
+function renderStrictMode(vnode, container, namespace) {
+  // StrictMode renders children normally but enables double-invoke
+  const children = flattenChildrenFromVNode(vnode);
+  const fragment = createDocumentFragment();
+
+  children.forEach((child) => {
+    const childNode = renderVNode(child, fragment, namespace);
+    if (childNode) fragment.appendChild(childNode);
+  });
+
+  return fragment;
+}
+
+function renderErrorBoundaryVNode(vnode, container, namespace) {
+  try {
+    const children = flattenChildrenFromVNode(vnode);
+    const fragment = createDocumentFragment();
+
+    children.forEach((child) => {
+      const childNode = renderVNode(child, fragment, namespace);
+      if (childNode) fragment.appendChild(childNode);
+    });
+
+    return fragment;
+  } catch (error) {
+    if (vnode.props && vnode.props.fallback) {
+      return renderVNode(vnode.props.fallback, container, namespace);
+    }
+    if (vnode.props && typeof vnode.props.onError === 'function') {
+      vnode.props.onError(error);
+    }
+    return createCommentNode('error-boundary');
+  }
+}
+
+function renderLazyComponent(vnode, container, namespace) {
+  const payload = vnode._payload || vnode.type._payload;
+  if (!payload) return createCommentNode('lazy-no-payload');
+
+  if (payload._status === 0) {
+    // Resolved
+    const Component = payload._result;
+    return renderVNode(createElement(Component, vnode.props), container, namespace);
+  }
+
+  if (payload._status === 1) {
+    // Rejected
+    throw payload._result;
+  }
+
+  // Pending - trigger init
+  if (vnode.type._init) {
+    vnode.type._init(payload);
+  }
+
+  return createCommentNode('lazy-pending');
+}
+
+function renderFunctionComponent(vnode, container, namespace) {
+  try {
+    const { type, props } = vnode;
+    const renderedVNode = type(props);
+    return renderVNode(renderedVNode, container, namespace);
+  } catch (error) {
+    console.error('[render] Function component error:', error);
+    return renderErrorFallback(error, vnode);
+  }
+}
+
+function renderClassComponent(vnode, container, namespace) {
+  try {
+    const { type, props } = vnode;
+    const instance = new type(props);
+    instance._vnode = vnode;
+
+    if (vnode.ref) {
+      assignRef(vnode.ref, instance);
+    }
+
+    const renderedVNode = instance.render();
+    return renderVNode(renderedVNode, container, namespace);
+  } catch (error) {
+    console.error('[render] Class component error:', error);
+    return renderErrorFallback(error, vnode);
+  }
+}
+
+function renderHostElement(vnode, container, namespace) {
+  const { type, props, ref } = vnode;
+
+  // Determine namespace
+  let currentNamespace = namespace;
+  if (type === 'svg') {
+    currentNamespace = SVG_NAMESPACE;
+  } else if (type === 'math') {
+    currentNamespace = MATH_NAMESPACE;
+  }
+
+  // Create DOM element
+  const domNode = createDOMElement(type, props, currentNamespace);
+
+  // Apply attributes
+  for (const propName in props) {
+    if (!props.hasOwnProperty(propName)) continue;
+    if (propName === 'children') continue;
+    if (propName === 'dangerouslySetInnerHTML') continue;
+
+    setAttribute(domNode, propName, props[propName]);
+  }
+
+  // Handle dangerouslySetInnerHTML
+  if (props.dangerouslySetInnerHTML && props.dangerouslySetInnerHTML.__html) {
+    domNode.innerHTML = props.dangerouslySetInnerHTML.__html;
+  } else if (!VOID_ELEMENTS.has(type)) {
+    // Render children
+    const children = flattenChildrenFromVNode(vnode);
+    children.forEach((child) => {
+      const childNode = renderVNode(child, domNode, currentNamespace);
+      if (childNode) domNode.appendChild(childNode);
+    });
+  }
+
+  // Assign ref
+  if (ref) {
+    assignRef(ref, domNode);
+  }
+
+  // Store vnode reference on DOM node for reconciliation
+  domNode.__ed_vnode = vnode;
+
+  return domNode;
+}
+
+function renderErrorFallback(error, vnode) {
+  const fallback = vnode.props?.fallback;
+  if (fallback) {
+    return renderVNode(fallback, null, null);
+  }
+  return createCommentNode('error: ' + error.message);
+}
+
+// ─── Hydration Support ────────────────────────────────────────────────────────
+
+/**
+ * Hydrate a virtual DOM tree onto existing DOM nodes.
+ *
+ * @param {Object} vnode
+ * @param {HTMLElement} container
+ * @param {Function} [callback]
+ * @returns {HTMLElement}
+ */
+function hydrate(vnode, container, callback) {
+  if (!container) {
+    throw new Error('[hydrate] Target container is not a DOM element');
+  }
+
+  const domNode = hydrateVNode(vnode, container, container.firstChild, null);
+
+  if (typeof callback === 'function') callback();
+
+  return domNode;
+}
+
+/**
+ * Hydrate a single virtual DOM node.
+ */
+function hydrateVNode(vnode, parent, existingNode, namespace) {
+  if (!existingNode) {
+    return renderVNode(vnode, parent, namespace);
+  }
+
+  // Handle text nodes
+  if (existingNode.nodeType === 3) { // Node.TEXT_NODE
+    if (typeof vnode === 'string' || typeof vnode === 'number') {
+      const text = String(vnode);
+      if (existingNode.textContent !== text) {
+        existingNode.textContent = text;
+      }
+      return existingNode;
+    }
+    const newNode = renderVNode(vnode, parent, namespace);
+    parent.replaceChild(newNode, existingNode);
+    return newNode;
+  }
+
+  // Handle element nodes
+  if (existingNode.nodeType === 1) { // Node.ELEMENT_NODE
+    if (typeof vnode === 'object' && vnode.type && typeof vnode.type === 'string' &&
+        vnode.type === existingNode.tagName.toLowerCase()) {
+      // Same tag - update attributes
+      for (const propName in vnode.props) {
+        if (propName === 'children') continue;
+        setAttribute(existingNode, propName, vnode.props[propName]);
+      }
+
+      // Hydrate children
+      const children = flattenChildrenFromVNode(vnode);
+      let existingChild = existingNode.firstChild;
+
+      children.forEach((childVNode) => {
+        existingChild = hydrateVNode(childVNode, existingNode, existingChild, namespace);
+        if (existingChild) existingChild = existingChild.nextSibling;
+      });
+
+      // Remove extra DOM children
+      while (existingChild) {
+        const next = existingChild.nextSibling;
+        existingNode.removeChild(existingChild);
+        existingChild = next;
+      }
+
+      // Store vnode reference
+      existingNode.__ed_vnode = vnode;
+
+      // Assign ref
+      if (vnode.ref) {
+        assignRef(vnode.ref, existingNode);
+      }
+
+      return existingNode;
+    }
+
+    // Different tag - replace
+    const newNode = renderVNode(vnode, parent, namespace);
+    parent.replaceChild(newNode, existingNode);
+    return newNode;
+  }
+
+  return renderVNode(vnode, parent, namespace);
+}
+
+// ─── Utility ──────────────────────────────────────────────────────────────────
+
+function flattenChildrenFromVNode(vnode) {
+  if (!vnode || !vnode.props || !vnode.props.children) return [];
+  const children = vnode.props.children;
+  if (Array.isArray(children)) return children;
+  return [children];
+}
+
+/**
+ * Unmount a rendered tree from a container.
+ * @param {HTMLElement} container
+ */
+function unmountContainer(container) {
+  if (!container) return;
+
+  // Detach refs and clean up
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT);
+  let node;
+  while ((node = walker.nextNode())) {
+    if (node.__ed_vnode && node.__ed_vnode.ref) {
+      detachRef(node.__ed_vnode.ref);
+    }
+    delete node.__ed_vnode;
+  }
+
+  // Remove all children
+  while (container.firstChild) {
+    container.removeChild(container.firstChild);
+  }
+
+  eventDelegationMap.delete(container);
+}
+
+// ─── Exports ──────────────────────────────────────────────────────────────────
+
+module.exports = {
+  render,
+  hydrate,
+  unmountContainer,
+  createDOMElement,
+  createTextNode,
+  createCommentNode,
+  createDocumentFragment,
+  setAttribute,
+  removeAttribute,
+  setProperty,
+  applyStyle,
+  applyClassName,
+  setEventHandler,
+  removeEventHandler,
+  setupEventDelegation,
+  assignRef,
+  detachRef,
+  renderVNode,
+  hydrateVNode,
+  camelToKebab,
+  normalizeEventType,
+  VOID_ELEMENTS,
+  SVG_TAGS,
+  BOOLEAN_ATTRIBUTES,
+  SVG_NAMESPACE,
+  MATH_NAMESPACE,
+};