@coherent.js/client 1.1.1 → 2.0.0-rc.0

package/dist/index.js

@@ -4,7 +4,22 @@ import {
   eventDelegation,
   handlerRegistry,
   wrapEvent
-} from "./chunk-N36BSMJU.js";
+} from "./chunk-UYL3RRRC.js";
+import {
+  CleanupTracker,
+  ConnectionIndicator,
+  ErrorOverlay,
+  HMRClient,
+  ModuleTracker,
+  StateCapturer,
+  cleanupTracker,
+  connectionIndicator,
+  createHotContext,
+  errorOverlay,
+  hmrClient,
+  moduleTracker,
+  stateCapturer
+} from "./chunk-EAOAAY2X.js";
 
 // src/hydration/state-serializer.js
 function serializeState(state) {
@@ -68,41 +83,306 @@ function serializeStateWithWarning(state, componentName = "Unknown") {
   return encoded;
 }
 
+// src/hydration/vnode.js
+var VOID_ELEMENTS = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+function isTrustedContent(value) {
+  return Boolean(value) && typeof value === "object" && value[/* @__PURE__ */ Symbol.for("coherent.js.trustedContent")] === true && typeof value.__html === "string";
+}
+function callFunctionComponent(fn) {
+  let result = fn;
+  for (let guard = 0; typeof result === "function"; guard++) {
+    if (guard > 100) {
+      return { ok: false };
+    }
+    try {
+      result = result();
+    } catch {
+      return { ok: false };
+    }
+  }
+  return { ok: true, value: result };
+}
+var TAG_NAME = /^[a-zA-Z][a-zA-Z0-9-]*$/;
+function isElementVNode(vNode) {
+  if (!vNode || typeof vNode !== "object" || Array.isArray(vNode) || isTrustedContent(vNode)) {
+    return false;
+  }
+  const keys = Object.keys(vNode);
+  return keys.length > 0 && keys.every((key) => TAG_NAME.test(key));
+}
+function readElement(vNode) {
+  const tagName = Object.keys(vNode)[0];
+  let content = vNode[tagName];
+  if (typeof content === "function") {
+    const called = callFunctionComponent(content);
+    content = called.ok ? called.value : null;
+  }
+  if (content === null || content === void 0) {
+    return { tagName, props: {} };
+  }
+  if (typeof content !== "object") {
+    return { tagName, props: { text: content } };
+  }
+  return { tagName, props: content };
+}
+function flatten(node, out) {
+  if (node === null || node === void 0 || typeof node === "boolean") {
+    return;
+  }
+  if (typeof node === "string" || typeof node === "number") {
+    out.push({ type: "text", text: String(node) });
+    return;
+  }
+  if (Array.isArray(node)) {
+    for (const child of node) flatten(child, out);
+    return;
+  }
+  if (typeof node === "function") {
+    const called = callFunctionComponent(node);
+    if (called.ok) flatten(called.value, out);
+    else out.push({ type: "opaque" });
+    return;
+  }
+  if (isTrustedContent(node)) {
+    out.push({ type: "opaque", html: node.__html });
+    return;
+  }
+  if (node.__isLazy === true && typeof node.evaluate === "function") {
+    const called = callFunctionComponent(() => node.evaluate());
+    if (called.ok) flatten(called.value, out);
+    else out.push({ type: "opaque" });
+    return;
+  }
+  if (!isElementVNode(node)) {
+    return;
+  }
+  const tagNames = Object.keys(node);
+  for (const tagName of tagNames) {
+    out.push({ type: "element", vNode: tagNames.length === 1 ? node : { [tagName]: node[tagName] } });
+  }
+}
+function resolveAttributeValue(value) {
+  if (typeof value !== "function") return value;
+  try {
+    return value();
+  } catch {
+    return "";
+  }
+}
+var NON_ATTRIBUTE_PROPS = /* @__PURE__ */ new Set(["children", "text", "html", "key"]);
+var ATTRIBUTE_NAMES = { className: "class", htmlFor: "for" };
+var ENUMERATED_BOOLEAN_ATTRIBUTES = /* @__PURE__ */ new Set(["spellcheck", "draggable", "contenteditable"]);
+function isEventProp(name, value) {
+  return name.startsWith("on") && typeof value === "function";
+}
+function toKebabCase(property) {
+  return property.startsWith("--") ? property : property.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}
+function styleToCss(style) {
+  return Object.entries(style).filter(([, value]) => value !== null && value !== void 0 && value !== false).map(([property, value]) => `${toKebabCase(property)}: ${value}`).join("; ");
+}
+function normalizeClassValue(value) {
+  if (Array.isArray(value)) {
+    return value.map(normalizeClassValue).filter(Boolean).join(" ");
+  }
+  if (value && typeof value === "object") {
+    return Object.keys(value).filter((name) => value[name]).join(" ");
+  }
+  if (value === null || value === void 0 || value === false) return "";
+  return String(value);
+}
+function renderedAttributes(props) {
+  const attributes = /* @__PURE__ */ new Map();
+  const mergeClass = props.class !== void 0 && props.className !== void 0;
+  for (const [name, raw] of Object.entries(props)) {
+    if (NON_ATTRIBUTE_PROPS.has(name) || isEventProp(name, raw)) continue;
+    if (mergeClass && name === "className") continue;
+    const attrName = ATTRIBUTE_NAMES[name] ?? name;
+    let value = mergeClass && name === "class" ? [raw, props.className].map((v) => normalizeClassValue(resolveAttributeValue(v))).filter(Boolean).join(" ") : resolveAttributeValue(raw);
+    if (attrName === "class" && value !== null && typeof value === "object") {
+      value = normalizeClassValue(value);
+    }
+    if (typeof value === "boolean" && (attrName.startsWith("aria-") || ENUMERATED_BOOLEAN_ATTRIBUTES.has(attrName.toLowerCase()))) {
+      value = String(value);
+    }
+    if (attrName === "style" && value && typeof value === "object") {
+      const css = styleToCss(value);
+      if (css) attributes.set("style", css);
+    } else if (value === true) {
+      attributes.set(attrName, "");
+    } else if (value !== false && value !== null && value !== void 0) {
+      attributes.set(attrName, String(value));
+    }
+  }
+  return attributes;
+}
+function getRenderedChildren(tagName, props) {
+  if (!props || VOID_ELEMENTS.has(String(tagName).toLowerCase())) {
+    return [];
+  }
+  const html = resolveAttributeValue(props.html);
+  if (html !== void 0 && html !== null) {
+    return [{ type: "opaque", html: isTrustedContent(html) ? html.__html : String(html) }];
+  }
+  const text = resolveAttributeValue(props.text);
+  if (isTrustedContent(text)) {
+    return [{ type: "opaque", html: text.__html }];
+  }
+  const raw = [];
+  if (text !== void 0 && text !== null) {
+    raw.push({ type: "text", text: String(text) });
+  }
+  flatten(props.children, raw);
+  const merged = [];
+  for (const item of raw) {
+    const last = merged[merged.length - 1];
+    if (item.type === "text" && last?.type === "text") {
+      last.text += item.text;
+    } else {
+      merged.push(item.type === "text" ? { ...item } : item);
+    }
+  }
+  return merged.filter((item) => item.type !== "text" || item.text.trim() !== "");
+}
+function getSignificantDOMChildren(element) {
+  if (!element || !element.childNodes) return [];
+  return Array.from(element.childNodes).filter((node) => {
+    if (node.nodeType === 1) return true;
+    if (node.nodeType === 3) {
+      return typeof node.textContent === "string" && node.textContent.trim().length > 0;
+    }
+    return false;
+  });
+}
+function alignChildren(vList, dList) {
+  const firstOpaque = vList.findIndex((item) => item.type === "opaque");
+  const pairs = [];
+  if (firstOpaque === -1) {
+    const length = Math.min(vList.length, dList.length);
+    for (let i = 0; i < length; i++) pairs.push([vList[i], dList[i], i]);
+    return { pairs, exact: true };
+  }
+  let lastOpaque = firstOpaque;
+  for (let i = vList.length - 1; i > firstOpaque; i--) {
+    if (vList[i].type === "opaque") {
+      lastOpaque = i;
+      break;
+    }
+  }
+  for (let i = 0; i < firstOpaque && i < dList.length; i++) {
+    pairs.push([vList[i], dList[i], i]);
+  }
+  const tail = vList.length - 1 - lastOpaque;
+  for (let k = 1; k <= tail && dList.length - k >= firstOpaque; k++) {
+    const vIndex = vList.length - k;
+    pairs.push([vList[vIndex], dList[dList.length - k], vIndex]);
+  }
+  return { pairs, exact: false };
+}
+function pairElementChildren(tagName, props, domElement) {
+  const vElements = getRenderedChildren(tagName, props).filter((item) => item.type !== "text");
+  const dElements = Array.from(domElement?.childNodes ?? []).filter((node) => node.nodeType === 1);
+  return alignChildren(vElements, dElements).pairs.filter(([item]) => item.type === "element").map(([item, node]) => [item.vNode, node]);
+}
+
 // src/hydration/mismatch-detector.js
 function formatPath(segments) {
   if (!segments || segments.length === 0) return "root";
   return segments.join(".");
 }
-function getVNodeChildren(vNode) {
-  if (!vNode || typeof vNode !== "object" || Array.isArray(vNode)) {
-    return [];
+var ATTRIBUTE_CHECKS = [
+  { virtual: "className", dom: "class" },
+  { virtual: "id", dom: "id" },
+  { virtual: "type", dom: "type" },
+  { virtual: "value", dom: "value" },
+  { virtual: "checked", dom: "checked" },
+  { virtual: "disabled", dom: "disabled" },
+  { virtual: "href", dom: "href" },
+  { virtual: "src", dom: "src" }
+];
+function textOf(node) {
+  return (node?.textContent ?? "").trim();
+}
+function compareChildren(parent, vList, path, mismatches, childSegment) {
+  const dList = getSignificantDOMChildren(parent);
+  const { pairs, exact } = alignChildren(vList, dList);
+  if (exact && vList.length !== dList.length) {
+    mismatches.push({
+      path: formatPath([...path, "children"]),
+      type: "children_count",
+      expected: vList.length,
+      actual: dList.length,
+      domPath: getDOMPath(parent)
+    });
   }
-  const tagName = Object.keys(vNode)[0];
-  const props = vNode[tagName];
-  if (!props || typeof props !== "object") {
-    return [];
+  for (const [item, node, index] of pairs) {
+    const childPath = [...path, childSegment(index)];
+    if (item.type === "element") {
+      mismatches.push(...detectMismatch(node, item.vNode, childPath));
+    } else if (item.type === "text") {
+      const expected = item.text.trim();
+      if (node.nodeType !== 3) {
+        mismatches.push({
+          path: formatPath(childPath),
+          type: "text",
+          expected,
+          actual: describeNode(node),
+          domPath: getDOMPath(parent)
+        });
+      } else if (textOf(node) !== expected) {
+        mismatches.push({
+          path: formatPath(childPath),
+          type: "text",
+          expected,
+          actual: textOf(node),
+          domPath: getDOMPath(parent)
+        });
+      }
+    }
   }
-  if (props.children) {
-    return Array.isArray(props.children) ? props.children : [props.children];
+  if (!exact) return;
+  for (let i = dList.length; i < vList.length; i++) {
+    mismatches.push({
+      path: formatPath([...path, childSegment(i)]),
+      type: "missing_dom_child",
+      expected: describeRendered(vList[i]),
+      actual: null,
+      domPath: getDOMPath(parent)
+    });
   }
-  if (props.text !== void 0) {
-    return [String(props.text)];
+  for (let i = vList.length; i < dList.length; i++) {
+    mismatches.push({
+      path: formatPath([...path, childSegment(i)]),
+      type: "extra_dom_child",
+      expected: null,
+      actual: describeNode(dList[i]),
+      domPath: getDOMPath(parent)
+    });
   }
-  return [];
 }
 function detectMismatch(domElement, virtualNode, path = []) {
   const mismatches = [];
-  if (virtualNode === null || virtualNode === void 0) {
+  if (virtualNode === null || virtualNode === void 0 || typeof virtualNode === "boolean") {
     return mismatches;
   }
   if (typeof virtualNode === "string" || typeof virtualNode === "number") {
     const expectedText = String(virtualNode).trim();
-    let actualText;
-    if (domElement.nodeType === 3) {
-      actualText = domElement.textContent?.trim() || "";
-    } else {
-      actualText = domElement.textContent?.trim() || "";
-    }
+    const actualText = textOf(domElement);
     if (actualText !== expectedText) {
       mismatches.push({
         path: formatPath(path),
@@ -114,33 +394,15 @@ function detectMismatch(domElement, virtualNode, path = []) {
     }
     return mismatches;
   }
-  if (Array.isArray(virtualNode)) {
-    virtualNode.forEach((child, index) => {
-      const domChild = getDOMChildAtIndex(domElement, index);
-      if (domChild) {
-        const childMismatches = detectMismatch(
-          domChild,
-          child,
-          [...path, `[${index}]`]
-        );
-        mismatches.push(...childMismatches);
-      } else {
-        mismatches.push({
-          path: formatPath([...path, `[${index}]`]),
-          type: "missing_element",
-          expected: describeVNode(child),
-          actual: null,
-          domPath: `${getDOMPath(domElement)} > child[${index}]`
-        });
-      }
-    });
+  if (Array.isArray(virtualNode) || typeof virtualNode === "function") {
+    const vList = getRenderedChildren("fragment", { children: virtualNode });
+    compareChildren(domElement, vList, path, mismatches, (i) => `[${i}]`);
     return mismatches;
   }
-  if (typeof virtualNode !== "object") {
+  if (!isElementVNode(virtualNode)) {
     return mismatches;
   }
-  const tagName = Object.keys(virtualNode)[0];
-  const props = virtualNode[tagName] || {};
+  const { tagName, props } = readElement(virtualNode);
   const domTagName = domElement.tagName?.toLowerCase();
   if (domTagName !== tagName.toLowerCase()) {
     mismatches.push({
@@ -152,34 +414,27 @@ function detectMismatch(domElement, virtualNode, path = []) {
     });
     return mismatches;
   }
-  const attributeChecks = [
-    { virtual: "className", dom: "class" },
-    { virtual: "id", dom: "id" },
-    { virtual: "type", dom: "type" },
-    { virtual: "value", dom: "value" },
-    { virtual: "checked", dom: "checked" },
-    { virtual: "disabled", dom: "disabled" },
-    { virtual: "href", dom: "href" },
-    { virtual: "src", dom: "src" }
-  ];
-  attributeChecks.forEach(({ virtual, dom }) => {
-    const expectedValue = props[virtual];
-    if (expectedValue === void 0) return;
+  const attributes = renderedAttributes(props);
+  for (const { virtual, dom } of ATTRIBUTE_CHECKS) {
+    const isClass = dom === "class";
+    if (props[virtual] === void 0 && !(isClass && props.class !== void 0)) continue;
+    const expectedValue = isClass ? attributes.get("class") ?? null : resolveAttributeValue(props[virtual]);
     const actualValue = domElement.getAttribute(dom);
-    const expectedStr = String(expectedValue);
-    if (typeof expectedValue === "boolean") {
-      const actualBool = actualValue !== null;
-      if (expectedValue !== actualBool) {
+    if (typeof expectedValue === "boolean" || expectedValue === null || expectedValue === void 0) {
+      const expectedPresent = expectedValue === true;
+      const actualPresent = actualValue !== null && actualValue !== void 0;
+      if (expectedPresent !== actualPresent) {
         mismatches.push({
           path: formatPath([...path, `@${dom}`]),
           type: "attribute",
-          expected: expectedValue,
-          actual: actualBool,
+          expected: expectedPresent,
+          actual: actualPresent,
           domPath: getDOMPath(domElement)
         });
       }
-      return;
+      continue;
     }
+    const expectedStr = String(expectedValue);
     if (expectedStr !== actualValue) {
       mismatches.push({
         path: formatPath([...path, `@${dom}`]),
@@ -189,47 +444,14 @@ function detectMismatch(domElement, virtualNode, path = []) {
         domPath: getDOMPath(domElement)
       });
     }
-  });
-  const vChildren = getVNodeChildren({ [tagName]: props });
-  const dChildren = getSignificantDOMChildren(domElement);
-  if (vChildren.length !== dChildren.length) {
-    mismatches.push({
-      path: formatPath([...path, "children"]),
-      type: "children_count",
-      expected: vChildren.length,
-      actual: dChildren.length,
-      domPath: getDOMPath(domElement)
-    });
-  }
-  const maxChildren = Math.max(vChildren.length, dChildren.length);
-  for (let i = 0; i < maxChildren; i++) {
-    const vChild = vChildren[i];
-    const dChild = dChildren[i];
-    if (vChild && dChild) {
-      const childMismatches = detectMismatch(
-        dChild,
-        vChild,
-        [...path, `children[${i}]`]
-      );
-      mismatches.push(...childMismatches);
-    } else if (vChild && !dChild) {
-      mismatches.push({
-        path: formatPath([...path, `children[${i}]`]),
-        type: "missing_dom_child",
-        expected: describeVNode(vChild),
-        actual: null,
-        domPath: getDOMPath(domElement)
-      });
-    } else if (!vChild && dChild) {
-      mismatches.push({
-        path: formatPath([...path, `children[${i}]`]),
-        type: "extra_dom_child",
-        expected: null,
-        actual: describeNode(dChild),
-        domPath: getDOMPath(domElement)
-      });
-    }
   }
+  compareChildren(
+    domElement,
+    getRenderedChildren(tagName, props),
+    path,
+    mismatches,
+    (i) => `children[${i}]`
+  );
   return mismatches;
 }
 function reportMismatches(mismatches, options = {}) {
@@ -251,20 +473,6 @@ ${i + 1}. ${m.type} at ${m.path}
     throw new Error(`Hydration failed: ${mismatches.length} mismatch(es) found. See console for details.`);
   }
 }
-function getSignificantDOMChildren(element) {
-  if (!element || !element.childNodes) return [];
-  return Array.from(element.childNodes).filter((node) => {
-    if (node.nodeType === 1) return true;
-    if (node.nodeType === 3) {
-      return node.textContent && node.textContent.trim().length > 0;
-    }
-    return false;
-  });
-}
-function getDOMChildAtIndex(parent, index) {
-  const children = getSignificantDOMChildren(parent);
-  return children[index] || null;
-}
 function getDOMPath(element) {
   if (!element || !element.tagName) return "(unknown)";
   const parts = [];
@@ -288,18 +496,14 @@ function getDOMPath(element) {
   }
   return parts.join(" > ");
 }
-function describeVNode(vNode) {
-  if (typeof vNode === "string" || typeof vNode === "number") {
-    return `text: "${String(vNode).substring(0, 50)}"`;
-  }
-  if (Array.isArray(vNode)) {
-    return `array[${vNode.length}]`;
+function describeRendered(item) {
+  if (item.type === "text") {
+    return `text: "${item.text.trim().substring(0, 50)}"`;
   }
-  if (typeof vNode === "object" && vNode !== null) {
-    const tagName = Object.keys(vNode)[0];
-    return `<${tagName}>`;
+  if (item.type === "element") {
+    return `<${Object.keys(item.vNode)[0]}>`;
   }
-  return String(vNode);
+  return "raw content";
 }
 function describeNode(node) {
   if (!node) return "(null)";
@@ -312,7 +516,183 @@ function describeNode(node) {
   return `node(type=${node.nodeType})`;
 }
 
+// src/hydration/patch.js
+var SVG_NS = "http://www.w3.org/2000/svg";
+var LIVE_PROPERTIES = /* @__PURE__ */ new Set(["value", "checked", "selected"]);
+function applyLiveProperties(element, props) {
+  for (const name of LIVE_PROPERTIES) {
+    if (!(name in props) || !(name in element)) continue;
+    const value = resolveAttributeValue(props[name]);
+    if (name === "value") {
+      const next = value === null || value === void 0 ? "" : String(value);
+      if (element.value !== next) element.value = next;
+    } else {
+      const next = Boolean(value);
+      if (element[name] !== next) element[name] = next;
+    }
+  }
+}
+function setAttributes(element, previous, next) {
+  for (const name of previous.keys()) {
+    if (!next.has(name)) element.removeAttribute(name);
+  }
+  for (const [name, value] of next) {
+    if (element.getAttribute(name) !== value) element.setAttribute(name, value);
+  }
+}
+function setRawHTML(element, html) {
+  if (element.innerHTML !== html) element.innerHTML = html;
+}
+function nodesFromHTML(html, doc) {
+  const holder = doc.createElement("div");
+  holder.innerHTML = html;
+  return Array.from(holder.childNodes);
+}
+function createNodes(item, doc, namespace) {
+  if (item.type === "text") return [doc.createTextNode(item.text)];
+  if (item.type === "element") return [createElement(item.vNode, doc, namespace)];
+  return item.html === void 0 ? [] : nodesFromHTML(item.html, doc);
+}
+function createElement(vNode, doc = document, namespace = null) {
+  const { tagName, props } = readElement(vNode);
+  const ns = tagName.toLowerCase() === "svg" ? SVG_NS : namespace;
+  const element = ns && typeof doc.createElementNS === "function" ? doc.createElementNS(ns, tagName) : doc.createElement(tagName);
+  setAttributes(element, /* @__PURE__ */ new Map(), renderedAttributes(props));
+  applyLiveProperties(element, props);
+  const childNs = tagName.toLowerCase() === "foreignobject" ? null : ns;
+  for (const item of getRenderedChildren(tagName, props)) {
+    for (const node of createNodes(item, doc, childNs)) element.appendChild(node);
+  }
+  return element;
+}
+function namespaceOf(element) {
+  return element.namespaceURI === SVG_NS && element.localName !== "foreignObject" ? SVG_NS : null;
+}
+function keyOf(item) {
+  if (item.type !== "element") return void 0;
+  const { props } = readElement(item.vNode);
+  return props.key;
+}
+function allKeyed(list) {
+  if (list.length === 0) return false;
+  const keys = /* @__PURE__ */ new Set();
+  for (const item of list) {
+    const key = keyOf(item);
+    if (key === void 0 || key === null || keys.has(key)) return false;
+    keys.add(key);
+  }
+  return true;
+}
+function sameTag(a, b) {
+  return Object.keys(a)[0].toLowerCase() === Object.keys(b)[0].toLowerCase();
+}
+function isInsignificant(node) {
+  return node.nodeType === 8 || node.nodeType === 3 && node.textContent.trim() === "";
+}
+function significantFrom(node) {
+  let current = node;
+  while (current && isInsignificant(current)) current = current.nextSibling;
+  return current;
+}
+function placeInOrder(parent, nodes) {
+  let previous = null;
+  for (const node of nodes) {
+    const expected = significantFrom(previous ? previous.nextSibling : parent.firstChild);
+    if (node !== expected) {
+      parent.insertBefore(node, previous ? previous.nextSibling : parent.firstChild);
+    }
+    previous = node;
+  }
+}
+function patchChild(parent, node, previous, next) {
+  const doc = parent.ownerDocument ?? globalThis.document;
+  if (previous.type === "text" && next.type === "text" && node.nodeType === 3) {
+    if (node.textContent !== next.text) node.textContent = next.text;
+    return [node];
+  }
+  if (previous.type === "element" && next.type === "element" && node.nodeType === 1 && sameTag(previous.vNode, next.vNode)) {
+    patchElement(node, previous.vNode, next.vNode);
+    return [node];
+  }
+  return createNodes(next, doc, namespaceOf(parent));
+}
+function patchChildren(element, previousProps, nextProps, tagName) {
+  const doc = element.ownerDocument ?? globalThis.document;
+  const previousList = getRenderedChildren(tagName, previousProps);
+  const nextList = getRenderedChildren(tagName, nextProps);
+  const domList = getSignificantDOMChildren(element);
+  const namespace = namespaceOf(element);
+  const previousHTML = previousList.length === 1 && previousList[0].type === "opaque" ? previousList[0].html : void 0;
+  const nextHTML = nextList.length === 1 && nextList[0].type === "opaque" ? nextList[0].html : void 0;
+  if (nextProps.html !== void 0 && nextHTML !== void 0) {
+    if (previousProps.html === void 0 || previousHTML !== nextHTML) setRawHTML(element, nextHTML);
+    return;
+  }
+  const reliable = previousList.length === domList.length && !previousList.some((item) => item.type === "opaque") && !nextList.some((item) => item.type === "opaque");
+  if (!reliable) {
+    if (nextList.length === 0 || nextList.length === 1 && nextList[0].type === "text") {
+      const text = nextList.length === 0 ? "" : nextList[0].text;
+      if (element.textContent !== text || domList.length !== nextList.length) {
+        element.textContent = text;
+      }
+      return;
+    }
+    for (const node of Array.from(element.childNodes)) element.removeChild(node);
+    for (const item of nextList) {
+      for (const node of createNodes(item, doc, namespace)) element.appendChild(node);
+    }
+    return;
+  }
+  const nextNodes = [];
+  if (allKeyed(previousList) && allKeyed(nextList)) {
+    const byKey = new Map(previousList.map((item, i) => [keyOf(item), { item, node: domList[i] }]));
+    for (const item of nextList) {
+      const match = byKey.get(keyOf(item));
+      if (match && sameTag(match.item.vNode, item.vNode)) {
+        byKey.delete(keyOf(item));
+        patchElement(match.node, match.item.vNode, item.vNode);
+        nextNodes.push(match.node);
+      } else {
+        nextNodes.push(...createNodes(item, doc, namespace));
+      }
+    }
+    for (const { node } of byKey.values()) element.removeChild(node);
+  } else {
+    const common = Math.min(previousList.length, nextList.length);
+    for (let i = 0; i < common; i++) {
+      const nodes = patchChild(element, domList[i], previousList[i], nextList[i]);
+      if (nodes[0] !== domList[i]) element.removeChild(domList[i]);
+      nextNodes.push(...nodes);
+    }
+    for (let i = common; i < domList.length; i++) element.removeChild(domList[i]);
+    for (let i = common; i < nextList.length; i++) {
+      nextNodes.push(...createNodes(nextList[i], doc, namespace));
+    }
+  }
+  placeInOrder(element, nextNodes);
+}
+function patchElement(element, previousVNode, nextVNode) {
+  const previous = readElement(previousVNode);
+  const next = readElement(nextVNode);
+  setAttributes(element, renderedAttributes(previous.props), renderedAttributes(next.props));
+  applyLiveProperties(element, next.props);
+  patchChildren(element, previous.props, next.props, next.tagName);
+}
+function patchRoot(element, previousVNode, nextVNode) {
+  if (!isElementVNode(nextVNode)) {
+    return element;
+  }
+  if (isElementVNode(previousVNode) && element.tagName?.toLowerCase() === Object.keys(nextVNode)[0].toLowerCase()) {
+    patchElement(element, previousVNode, nextVNode);
+    return element;
+  }
+  const replacement = createElement(nextVNode, element.ownerDocument ?? document, namespaceOf(element.parentNode ?? element));
+  element.parentNode?.replaceChild(replacement, element);
+  return replacement;
+}
+
 // src/hydrate.js
+var hydratedContainers = /* @__PURE__ */ new WeakMap();
 function hydrate(component, container, options = {}) {
   if (typeof component !== "function") {
     throw new Error(
@@ -324,21 +704,34 @@ function hydrate(component, container, options = {}) {
       `hydrate() requires a valid DOM element as container, received: ${container === null ? "null" : typeof container}`
     );
   }
+  hydratedContainers.get(container)?.unmount();
   eventDelegation.initialize();
   const {
     initialState: providedState,
-    // eslint-disable-next-line no-restricted-globals -- statically replaced by esbuild `define` at build time
-    detectMismatch: shouldDetectMismatch = true,
     strict = false,
     onMismatch,
     props: additionalProps = {}
   } = options;
+  const shouldDetectMismatch = options.detectMismatch ?? (strict || typeof onMismatch === "function" || isDevelopment());
   let state = providedState ?? extractState(container) ?? {};
-  const eventListeners = [];
-  const registeredHandlerIds = /* @__PURE__ */ new Set();
+  let mounted = true;
+  let root = container;
+  let registeredHandlerIds = /* @__PURE__ */ new Set();
+  let boundAttributes = [];
+  const currentProps = () => ({ ...additionalProps, ...state });
   const componentRef = {
+    component,
+    get state() {
+      return state;
+    },
+    get props() {
+      return currentProps();
+    },
     getState: () => state,
     setState: (newState) => {
+      if (!mounted) {
+        return;
+      }
       if (typeof newState === "function") {
         state = { ...state, ...newState(state) };
       } else {
@@ -347,8 +740,7 @@ function hydrate(component, container, options = {}) {
       doRerender();
     }
   };
-  const componentProps = { ...additionalProps, ...state };
-  let virtualDOM = component(componentProps);
+  let virtualDOM = renderComponent(component, currentProps());
   if (shouldDetectMismatch) {
     const mismatches = detectMismatch(container, virtualDOM);
     if (mismatches.length > 0) {
@@ -362,25 +754,44 @@ function hydrate(component, container, options = {}) {
       }
     }
   }
-  registerEventHandlers(container, virtualDOM, componentRef, registeredHandlerIds);
+  registerEventHandlers(root, virtualDOM, componentRef, registeredHandlerIds, boundAttributes);
   function doRerender() {
-    const newProps = { ...additionalProps, ...state };
-    virtualDOM = component(newProps);
-    patchDOM(container, virtualDOM);
-    registerEventHandlers(container, virtualDOM, componentRef, registeredHandlerIds);
+    if (!mounted) {
+      return;
+    }
+    const previousVirtualDOM = virtualDOM;
+    virtualDOM = renderComponent(component, currentProps());
+    const previousRoot = root;
+    root = patchRoot(root, previousVirtualDOM, virtualDOM);
+    if (root !== previousRoot) {
+      hydratedContainers.delete(previousRoot);
+      hydratedContainers.set(root, controller);
+      root.setAttribute("data-coherent-hydrated", "true");
+    }
+    const previousIds = registeredHandlerIds;
+    const previousAttributes = boundAttributes;
+    registeredHandlerIds = /* @__PURE__ */ new Set();
+    boundAttributes = [];
+    registerEventHandlers(root, virtualDOM, componentRef, registeredHandlerIds, boundAttributes);
+    releaseHandlers(previousIds, previousAttributes);
   }
   function unmount() {
-    for (const handlerId of registeredHandlerIds) {
-      handlerRegistry.unregister(handlerId);
+    if (!mounted) {
+      return;
     }
-    registeredHandlerIds.clear();
-    for (const { element, event, handler, options: options2 } of eventListeners) {
-      element.removeEventListener(event, handler, options2);
+    mounted = false;
+    releaseHandlers(registeredHandlerIds, boundAttributes);
+    registeredHandlerIds = /* @__PURE__ */ new Set();
+    boundAttributes = [];
+    if (hydratedContainers.get(root) === controller) {
+      hydratedContainers.delete(root);
     }
-    eventListeners.length = 0;
-    container.removeAttribute("data-coherent-hydrated");
+    root.removeAttribute("data-coherent-hydrated");
   }
   function rerender(newProps) {
+    if (!mounted) {
+      return;
+    }
     if (newProps) {
       Object.assign(additionalProps, newProps);
     }
@@ -392,1617 +803,72 @@ function hydrate(component, container, options = {}) {
   function setState(newState) {
     componentRef.setState(newState);
   }
-  container.setAttribute("data-coherent-hydrated", "true");
-  return {
+  const controller = {
     unmount,
     rerender,
     getState,
     setState
   };
+  container.setAttribute("data-coherent-hydrated", "true");
+  hydratedContainers.set(container, controller);
+  return controller;
 }
-function registerEventHandlers(domElement, vNode, componentRef, handlerIds) {
-  if (!vNode || typeof vNode !== "object" || Array.isArray(vNode)) {
-    return;
+function isDevelopment() {
+  try {
+    return process.env.NODE_ENV === "development";
+  } catch {
+    return false;
   }
-  const tagName = Object.keys(vNode)[0];
-  const props = vNode[tagName];
-  if (!props || typeof props !== "object") {
+}
+function renderComponent(component, props) {
+  let vNode = component(props);
+  for (let guard = 0; typeof vNode === "function" && vNode.length === 0 && guard < 100; guard++) {
+    vNode = vNode();
+  }
+  return vNode;
+}
+function releaseHandlers(handlerIds, attributes) {
+  for (const handlerId of handlerIds) {
+    handlerRegistry.unregister(handlerId);
+  }
+  for (const { element, name, handlerId } of attributes) {
+    if (element.getAttribute(name) === handlerId) {
+      element.removeAttribute(name);
+    }
+  }
+}
+var EVENT_TYPE_ALIASES = {
+  doubleclick: "dblclick"
+};
+function toEventType(propName) {
+  const type = propName.slice(2).toLowerCase();
+  return EVENT_TYPE_ALIASES[type] ?? type;
+}
+function registerEventHandlers(domElement, vNode, componentRef, handlerIds, boundAttributes) {
+  if (!domElement || !isElementVNode(vNode)) {
     return;
   }
+  const { tagName, props } = readElement(vNode);
   const eventProps = Object.keys(props).filter(
     (key) => key.startsWith("on") && typeof props[key] === "function"
   );
   for (const eventProp of eventProps) {
-    const eventType = eventProp.slice(2).toLowerCase();
+    const eventType = toEventType(eventProp);
     const handler = props[eventProp];
+    eventDelegation.listen(eventType);
     const handlerId = `${tagName}-${eventType}-${Math.random().toString(36).slice(2, 9)}`;
     handlerRegistry.register(handlerId, handler, componentRef);
     handlerIds.add(handlerId);
     const attrName = `data-coherent-${eventType}`;
     if (domElement.setAttribute) {
       domElement.setAttribute(attrName, handlerId);
+      boundAttributes.push({ element: domElement, name: attrName, handlerId });
     }
   }
-  const children = getVNodeChildren2(props);
-  const domChildren = getSignificantDOMChildren2(domElement);
-  children.forEach((child, index) => {
-    if (child && typeof child === "object" && !Array.isArray(child) && domChildren[index]) {
-      registerEventHandlers(domChildren[index], child, componentRef, handlerIds);
-    }
-  });
-}
-function patchDOM(domElement, vNode) {
-  if (!vNode || !domElement) {
-    return;
+  for (const [childVNode, childElement] of pairElementChildren(tagName, props, domElement)) {
+    registerEventHandlers(childElement, childVNode, componentRef, handlerIds, boundAttributes);
   }
-  if (typeof vNode === "string" || typeof vNode === "number") {
-    if (domElement.textContent !== String(vNode)) {
-      domElement.textContent = String(vNode);
-    }
-    return;
-  }
-  if (Array.isArray(vNode)) {
-    return;
-  }
-  if (typeof vNode !== "object") {
-    return;
-  }
-  const tagName = Object.keys(vNode)[0];
-  const props = vNode[tagName] || {};
-  const attributeMap = {
-    className: "class",
-    htmlFor: "for"
-  };
-  for (const [key, value] of Object.entries(props)) {
-    if (key === "children" || key === "text" || key.startsWith("on")) {
-      continue;
-    }
-    const attrName = attributeMap[key] || key;
-    if (value === true) {
-      domElement.setAttribute(attrName, "");
-    } else if (value === false || value === null || value === void 0) {
-      domElement.removeAttribute(attrName);
-    } else if (domElement.getAttribute(attrName) !== String(value)) {
-      domElement.setAttribute(attrName, String(value));
-    }
-  }
-  if (props.text !== void 0) {
-    const textContent = String(props.text);
-    if (domElement.textContent !== textContent) {
-      domElement.textContent = textContent;
-    }
-    return;
-  }
-  const children = getVNodeChildren2(props);
-  const domChildren = getSignificantDOMChildren2(domElement);
-  children.forEach((child, index) => {
-    if (domChildren[index]) {
-      patchDOM(domChildren[index], child);
-    }
-  });
-}
-function getVNodeChildren2(props) {
-  if (!props) return [];
-  if (props.children) {
-    return Array.isArray(props.children) ? props.children : [props.children];
-  }
-  return [];
-}
-function getSignificantDOMChildren2(element) {
-  if (!element || !element.childNodes) return [];
-  return Array.from(element.childNodes).filter((node) => {
-    if (node.nodeType === 1) return true;
-    if (node.nodeType === 3) {
-      return node.textContent && node.textContent.trim().length > 0;
-    }
-    return false;
-  });
-}
-
-// src/hmr/cleanup-tracker.js
-var CleanupTracker = class {
-  constructor() {
-    this.moduleResources = /* @__PURE__ */ new Map();
-  }
-  /**
-   * Create a tracked context for a module
-   *
-   * Returns an object with tracked versions of setTimeout, setInterval,
-   * addEventListener, and fetch that automatically clean up on module disposal.
-   *
-   * @param {string} moduleId - Unique identifier for the module
-   * @returns {Object} Tracked context with setTimeout, setInterval, etc.
-   */
-  createContext(moduleId) {
-    const resources = {
-      timers: /* @__PURE__ */ new Set(),
-      intervals: /* @__PURE__ */ new Set(),
-      listeners: [],
-      abortControllers: /* @__PURE__ */ new Set()
-    };
-    this.moduleResources.set(moduleId, resources);
-    const context = {
-      /**
-       * Tracked setTimeout - auto-removes from tracking on completion
-       * @param {Function} callback - Function to execute
-       * @param {number} delay - Delay in milliseconds
-       * @param {...*} args - Additional arguments to pass to callback
-       * @returns {number} Timer ID
-       */
-      setTimeout: (callback, delay, ...args) => {
-        const id = setTimeout(
-          (...a) => {
-            resources.timers.delete(id);
-            callback(...a);
-          },
-          delay,
-          ...args
-        );
-        resources.timers.add(id);
-        return id;
-      },
-      /**
-       * Tracked setInterval - stores in intervals set until cleared
-       * @param {Function} callback - Function to execute
-       * @param {number} delay - Interval in milliseconds
-       * @param {...*} args - Additional arguments to pass to callback
-       * @returns {number} Interval ID
-       */
-      setInterval: (callback, delay, ...args) => {
-        const id = setInterval(callback, delay, ...args);
-        resources.intervals.add(id);
-        return id;
-      },
-      /**
-       * Clear a tracked timeout
-       * @param {number} id - Timer ID to clear
-       */
-      clearTimeout: (id) => {
-        resources.timers.delete(id);
-        clearTimeout(id);
-      },
-      /**
-       * Clear a tracked interval
-       * @param {number} id - Interval ID to clear
-       */
-      clearInterval: (id) => {
-        resources.intervals.delete(id);
-        clearInterval(id);
-      },
-      /**
-       * Tracked addEventListener - stores listener info for removal on cleanup
-       * @param {EventTarget} target - Element or object to attach listener to
-       * @param {string} event - Event type
-       * @param {Function} handler - Event handler function
-       * @param {Object|boolean} [options] - Listener options
-       */
-      addEventListener: (target, event, handler, options) => {
-        target.addEventListener(event, handler, options);
-        resources.listeners.push({ target, event, handler, options });
-      },
-      /**
-       * Create a tracked AbortController
-       * @returns {AbortController} Tracked AbortController
-       */
-      createAbortController: () => {
-        const controller = new AbortController();
-        resources.abortControllers.add(controller);
-        return controller;
-      },
-      /**
-       * Tracked fetch - creates AbortController automatically, cleans up on completion
-       * @param {string|URL} url - URL to fetch
-       * @param {Object} [options] - Fetch options
-       * @returns {Promise<Response>} Fetch promise
-       */
-      fetch: (url, options = {}) => {
-        const controller = new AbortController();
-        resources.abortControllers.add(controller);
-        const mergedOptions = {
-          ...options,
-          signal: controller.signal
-        };
-        return fetch(url, mergedOptions).finally(() => {
-          resources.abortControllers.delete(controller);
-        });
-      }
-    };
-    return context;
-  }
-  /**
-   * Cleanup all resources for a module
-   *
-   * Called during HMR module disposal. Clears all timers, intervals,
-   * removes all event listeners, and aborts all pending fetch requests.
-   *
-   * @param {string} moduleId - Module identifier to clean up
-   */
-  cleanup(moduleId) {
-    const resources = this.moduleResources.get(moduleId);
-    if (!resources) return;
-    for (const id of resources.timers) {
-      clearTimeout(id);
-    }
-    resources.timers.clear();
-    for (const id of resources.intervals) {
-      clearInterval(id);
-    }
-    resources.intervals.clear();
-    for (const { target, event, handler, options } of resources.listeners) {
-      try {
-        target.removeEventListener(event, handler, options);
-      } catch {
-      }
-    }
-    resources.listeners.length = 0;
-    for (const controller of resources.abortControllers) {
-      try {
-        controller.abort();
-      } catch {
-      }
-    }
-    resources.abortControllers.clear();
-    this.moduleResources.delete(moduleId);
-  }
-  /**
-   * Check for potential resource leaks (for development mode)
-   *
-   * Logs warnings if resources weren't cleaned up before module disposal.
-   * Call this before cleanup() to detect potential leaks.
-   *
-   * @param {string} moduleId - Module identifier to check
-   */
-  checkForLeaks(moduleId) {
-    const resources = this.moduleResources.get(moduleId);
-    if (!resources) return;
-    const warnings = [];
-    if (resources.timers.size > 0) {
-      warnings.push(`${resources.timers.size} timer(s) not cleaned up`);
-    }
-    if (resources.intervals.size > 0) {
-      warnings.push(`${resources.intervals.size} interval(s) not cleaned up`);
-    }
-    if (resources.listeners.length > 0) {
-      warnings.push(`${resources.listeners.length} listener(s) not cleaned up`);
-    }
-    if (resources.abortControllers.size > 0) {
-      warnings.push(
-        `${resources.abortControllers.size} pending fetch(es) not aborted`
-      );
-    }
-    if (warnings.length > 0) {
-      console.warn(`[HMR] Potential leak in module ${moduleId}: ${warnings.join(", ")}`);
-    }
-  }
-  /**
-   * Check if a module has tracked resources
-   * @param {string} moduleId - Module identifier
-   * @returns {boolean} True if module has resources
-   */
-  hasResources(moduleId) {
-    return this.moduleResources.has(moduleId);
-  }
-  /**
-   * Get resource counts for a module (for testing/debugging)
-   * @param {string} moduleId - Module identifier
-   * @returns {Object|null} Resource counts or null if module not tracked
-   */
-  getResourceCounts(moduleId) {
-    const resources = this.moduleResources.get(moduleId);
-    if (!resources) return null;
-    return {
-      timers: resources.timers.size,
-      intervals: resources.intervals.size,
-      listeners: resources.listeners.length,
-      abortControllers: resources.abortControllers.size
-    };
-  }
-};
-var cleanupTracker = new CleanupTracker();
-
-// src/hmr/state-capturer.js
-var StateCapturer = class {
-  constructor() {
-    this.capturedInputs = /* @__PURE__ */ new Map();
-    this.scrollPositions = /* @__PURE__ */ new Map();
-    this.layoutSnapshot = null;
-  }
-  /**
-   * Generate a stable key for an input element
-   *
-   * Uses multiple factors to identify inputs across HMR updates:
-   * 1. ID (most stable)
-   * 2. Name + type
-   * 3. Form context
-   * 4. DOM path (fallback)
-   *
-   * @param {HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement} input - Input element
-   * @returns {string} Stable key for the input
-   */
-  getInputKey(input) {
-    const parts = [];
-    if (input.id) {
-      parts.push(`#${input.id}`);
-      return parts.join(":");
-    }
-    if (input.name) {
-      parts.push(`[name="${input.name}"]`);
-    }
-    if (input.type) {
-      parts.push(`[type="${input.type}"]`);
-    }
-    if (input.form?.id) {
-      parts.push(`form#${input.form.id}`);
-    }
-    if (parts.length === 0) {
-      parts.push(this.getElementPath(input));
-    }
-    return parts.join(":");
-  }
-  /**
-   * Build a CSS-like path for an element
-   *
-   * @param {HTMLElement} element - Element to build path for
-   * @returns {string} CSS-like path (e.g., "form > div:nth-of-type(2) > input")
-   */
-  getElementPath(element) {
-    const path = [];
-    let current = element;
-    while (current && current !== document.body && path.length < 10) {
-      let selector = current.tagName.toLowerCase();
-      if (current.className && typeof current.className === "string") {
-        const classes = current.className.trim().split(/\s+/).slice(0, 2);
-        if (classes.length > 0 && classes[0]) {
-          selector += `.${classes.join(".")}`;
-        }
-      }
-      if (current.parentElement) {
-        const siblings = current.parentElement.querySelectorAll(
-          `:scope > ${current.tagName.toLowerCase()}`
-        );
-        if (siblings.length > 1) {
-          const index = Array.from(siblings).indexOf(current);
-          selector += `:nth-of-type(${index + 1})`;
-        }
-      }
-      path.unshift(selector);
-      current = current.parentElement;
-    }
-    return path.join(" > ");
-  }
-  /**
-   * Capture all form input states
-   *
-   * Iterates through all input, textarea, and select elements,
-   * capturing their values, selection state, and checked state.
-   *
-   * @returns {Map<string, Object>} Map of input keys to their captured state
-   */
-  captureFormState() {
-    this.capturedInputs.clear();
-    const inputs = document.querySelectorAll("input, textarea, select");
-    for (const input of inputs) {
-      const key = this.getInputKey(input);
-      const state = {
-        value: input.value,
-        type: input.type || input.tagName.toLowerCase()
-      };
-      if (typeof input.selectionStart === "number" && (input.type === "text" || input.type === "search" || input.type === "url" || input.type === "tel" || input.type === "password" || input.tagName.toLowerCase() === "textarea")) {
-        state.selectionStart = input.selectionStart;
-        state.selectionEnd = input.selectionEnd;
-      }
-      if (input.type === "checkbox" || input.type === "radio") {
-        state.checked = input.checked;
-      }
-      this.capturedInputs.set(key, state);
-    }
-    return this.capturedInputs;
-  }
-  /**
-   * Restore form input states after HMR update
-   *
-   * Finds inputs by their captured keys and restores their values,
-   * only if the input type matches (to avoid corrupting data).
-   */
-  restoreFormState() {
-    for (const [key, state] of this.capturedInputs) {
-      const inputs = this.findInputsByKey(key);
-      for (const input of inputs) {
-        const currentType = input.type || input.tagName.toLowerCase();
-        if (currentType !== state.type) {
-          continue;
-        }
-        if (state.checked !== void 0) {
-          input.checked = state.checked;
-          continue;
-        }
-        input.value = state.value;
-        if (state.selectionStart !== void 0 && document.activeElement !== input) {
-          try {
-            input.setSelectionRange(state.selectionStart, state.selectionEnd);
-          } catch {
-          }
-        }
-      }
-    }
-  }
-  /**
-   * Find inputs matching a captured key
-   *
-   * @param {string} key - Captured input key
-   * @returns {HTMLElement[]} Array of matching input elements
-   */
-  findInputsByKey(key) {
-    if (key.startsWith("#")) {
-      const id = key.slice(1);
-      const el = document.getElementById(id);
-      return el ? [el] : [];
-    }
-    const nameMatch = key.match(/\[name="([^"]+)"\]/);
-    if (nameMatch) {
-      const name = nameMatch[1];
-      const typeMatch = key.match(/\[type="([^"]+)"\]/);
-      const type = typeMatch ? typeMatch[1] : null;
-      let selector = `[name="${name}"]`;
-      if (type) {
-        selector += `[type="${type}"]`;
-      }
-      return Array.from(document.querySelectorAll(selector));
-    }
-    try {
-      const el = document.querySelector(key);
-      return el ? [el] : [];
-    } catch {
-      return [];
-    }
-  }
-  /**
-   * Capture scroll positions for window and scrollable containers
-   *
-   * Captures scroll positions for:
-   * - Window (scrollX/scrollY)
-   * - Elements with [data-coherent-scroll-preserve] attribute
-   * - Elements with overflow that have actual scrolling
-   */
-  captureScrollPositions() {
-    this.scrollPositions.clear();
-    this.scrollPositions.set("window", {
-      top: window.scrollY,
-      left: window.scrollX
-    });
-    const markedScrollables = document.querySelectorAll(
-      "[data-coherent-scroll-preserve]"
-    );
-    for (const el of markedScrollables) {
-      const key = this.getScrollableKey(el);
-      this.scrollPositions.set(key, {
-        top: el.scrollTop,
-        left: el.scrollLeft
-      });
-    }
-    const overflowElements = document.querySelectorAll(
-      '[style*="overflow"], [class]'
-    );
-    for (const el of overflowElements) {
-      const style = window.getComputedStyle(el);
-      const hasOverflow = style.overflow === "auto" || style.overflow === "scroll" || style.overflowY === "auto" || style.overflowY === "scroll" || style.overflowX === "auto" || style.overflowX === "scroll";
-      if (hasOverflow && (el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth)) {
-        const key = this.getScrollableKey(el);
-        if (!this.scrollPositions.has(key)) {
-          this.scrollPositions.set(key, {
-            top: el.scrollTop,
-            left: el.scrollLeft
-          });
-        }
-      }
-    }
-    return this.scrollPositions;
-  }
-  /**
-   * Generate a stable key for a scrollable element
-   *
-   * @param {HTMLElement} el - Scrollable element
-   * @returns {string} Key for the element
-   */
-  getScrollableKey(el) {
-    if (el.id) {
-      return `#${el.id}`;
-    }
-    const component = el.getAttribute("data-coherent-component");
-    if (component) {
-      return `[data-coherent-component="${component}"]`;
-    }
-    return this.getElementPath(el);
-  }
-  /**
-   * Capture layout snapshot for change detection
-   *
-   * Captures body dimensions and positions of anchor elements
-   * (elements with data-coherent-component attribute).
-   */
-  captureLayout() {
-    this.layoutSnapshot = {
-      bodyHeight: document.body.scrollHeight,
-      bodyWidth: document.body.scrollWidth,
-      anchors: /* @__PURE__ */ new Map()
-    };
-    const components = document.querySelectorAll("[data-coherent-component]");
-    for (const el of components) {
-      const rect = el.getBoundingClientRect();
-      const key = this.getScrollableKey(el);
-      this.layoutSnapshot.anchors.set(key, {
-        top: rect.top,
-        left: rect.left,
-        width: rect.width,
-        height: rect.height
-      });
-    }
-  }
-  /**
-   * Check if layout changed significantly (>50px shift)
-   *
-   * Returns true if:
-   * - Body dimensions changed by more than 50px
-   * - Any anchor element position shifted by more than 50px
-   *
-   * @returns {boolean} True if layout changed significantly
-   */
-  layoutChangedSignificantly() {
-    if (!this.layoutSnapshot) {
-      return false;
-    }
-    const THRESHOLD = 50;
-    const heightDiff = Math.abs(
-      document.body.scrollHeight - this.layoutSnapshot.bodyHeight
-    );
-    const widthDiff = Math.abs(
-      document.body.scrollWidth - this.layoutSnapshot.bodyWidth
-    );
-    if (heightDiff > THRESHOLD || widthDiff > THRESHOLD) {
-      return true;
-    }
-    for (const [key, oldRect] of this.layoutSnapshot.anchors) {
-      const el = this.findElementByKey(key);
-      if (!el) {
-        continue;
-      }
-      const newRect = el.getBoundingClientRect();
-      const topDiff = Math.abs(newRect.top - oldRect.top);
-      const leftDiff = Math.abs(newRect.left - oldRect.left);
-      if (topDiff > THRESHOLD || leftDiff > THRESHOLD) {
-        return true;
-      }
-    }
-    return false;
-  }
-  /**
-   * Find an element by its scrollable key
-   *
-   * @param {string} key - Element key
-   * @returns {HTMLElement|null} Found element or null
-   */
-  findElementByKey(key) {
-    if (key === "window") {
-      return null;
-    }
-    if (key.startsWith("#")) {
-      return document.getElementById(key.slice(1));
-    }
-    try {
-      return document.querySelector(key);
-    } catch {
-      return null;
-    }
-  }
-  /**
-   * Restore scroll positions if layout hasn't changed significantly
-   *
-   * Logs a message if scroll restoration is skipped due to layout changes.
-   */
-  restoreScrollPositions() {
-    if (this.layoutChangedSignificantly()) {
-      console.log("[HMR] Layout changed significantly, not restoring scroll");
-      return;
-    }
-    const windowPos = this.scrollPositions.get("window");
-    if (windowPos) {
-      window.scrollTo(windowPos.left, windowPos.top);
-    }
-    for (const [key, pos] of this.scrollPositions) {
-      if (key === "window") {
-        continue;
-      }
-      const el = this.findElementByKey(key);
-      if (el) {
-        el.scrollTop = pos.top;
-        el.scrollLeft = pos.left;
-      }
-    }
-  }
-  /**
-   * Capture all state (form + scroll + layout)
-   *
-   * Convenience method that calls all capture methods.
-   */
-  captureAll() {
-    this.captureFormState();
-    this.captureScrollPositions();
-    this.captureLayout();
-  }
-  /**
-   * Restore all state (form + scroll)
-   *
-   * Convenience method that calls all restore methods.
-   */
-  restoreAll() {
-    this.restoreFormState();
-    this.restoreScrollPositions();
-  }
-  /**
-   * Clear all captured state
-   */
-  clear() {
-    this.capturedInputs.clear();
-    this.scrollPositions.clear();
-    this.layoutSnapshot = null;
-  }
-};
-var stateCapturer = new StateCapturer();
-
-// src/hmr/overlay.js
-function escapeHtml(str) {
-  return String(str).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-}
-function toPositiveInt(value) {
-  const parsed = Number(value);
-  return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
 }
-function formatCodeFrame(frame, highlightLine, startLine = 1) {
-  if (!frame) return "";
-  const firstLine = toPositiveInt(startLine) ?? 1;
-  const lines = frame.split("\n");
-  return lines.map((content, i) => {
-    const lineNum = firstLine + i;
-    const isHighlight = lineNum === highlightLine;
-    return `<div class="line${isHighlight ? " highlight" : ""}">
-      <span class="line-number">${lineNum}</span>
-      <span class="line-content">${escapeHtml(content)}</span>
-    </div>`;
-  }).join("");
-}
-var EDITOR_URLS = {
-  vscode: (file, line) => `vscode://file/${file}:${line}`,
-  cursor: (file, line) => `cursor://file/${file}:${line}`,
-  "vscode-insiders": (file, line) => `vscode-insiders://file/${file}:${line}`,
-  atom: (file, line) => `atom://core/open/file?filename=${file}&line=${line}`,
-  sublime: (file, line) => `subl://open?url=file://${file}&line=${line}`,
-  webstorm: (file, line) => `webstorm://open?file=${file}&line=${line}`,
-  idea: (file, line) => `idea://open?file=${file}&line=${line}`
-};
-var OVERLAY_STYLES = `
-  :host {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 99999;
-    --bg: #181818;
-    --text: #f8f8f2;
-    --red: #ff5555;
-    --yellow: #f1fa8c;
-    --purple: #bd93f9;
-    --cyan: #8be9fd;
-    --code-bg: #282a36;
-    --line-num: #6272a4;
-  }
-  .backdrop {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.66);
-  }
-  .container {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: min(800px, 90vw);
-    max-height: 90vh;
-    overflow: auto;
-    background: var(--bg);
-    border-radius: 8px;
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
-    font-family: 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
-  }
-  .header {
-    padding: 16px 20px;
-    background: var(--red);
-    color: white;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-radius: 8px 8px 0 0;
-  }
-  .title {
-    font-weight: bold;
-    font-size: 16px;
-  }
-  .close-btn {
-    background: none;
-    border: none;
-    color: white;
-    font-size: 24px;
-    cursor: pointer;
-    padding: 0 8px;
-    line-height: 1;
-  }
-  .close-btn:hover {
-    opacity: 0.8;
-  }
-  .content {
-    padding: 20px;
-    color: var(--text);
-  }
-  .message {
-    font-size: 18px;
-    color: var(--red);
-    margin-bottom: 20px;
-    word-break: break-word;
-  }
-  .file {
-    color: var(--cyan);
-    margin-bottom: 16px;
-    cursor: pointer;
-    text-decoration: underline;
-  }
-  .file:hover {
-    color: var(--purple);
-  }
-  .code-frame {
-    background: var(--code-bg);
-    padding: 16px;
-    border-radius: 4px;
-    overflow-x: auto;
-    font-size: 14px;
-    line-height: 1.5;
-    margin-bottom: 16px;
-  }
-  .line {
-    display: flex;
-  }
-  .line-number {
-    width: 50px;
-    color: var(--line-num);
-    text-align: right;
-    padding-right: 16px;
-    user-select: none;
-    flex-shrink: 0;
-  }
-  .line-content {
-    flex: 1;
-    white-space: pre;
-  }
-  .line.highlight {
-    background: rgba(255, 85, 85, 0.2);
-  }
-  .line.highlight .line-content {
-    color: var(--red);
-  }
-  .stack {
-    margin-top: 20px;
-    font-size: 12px;
-    color: var(--line-num);
-    white-space: pre-wrap;
-    max-height: 200px;
-    overflow-y: auto;
-  }
-  .tip {
-    margin-top: 16px;
-    padding: 12px;
-    background: rgba(189, 147, 249, 0.1);
-    border-left: 3px solid var(--purple);
-    font-size: 13px;
-    color: var(--text);
-  }
-  .tip strong {
-    color: var(--purple);
-  }
-`;
-var ErrorOverlay = class {
-  constructor() {
-    this.overlay = null;
-    this.editor = this._getStoredEditor();
-    this.escapeHandler = null;
-  }
-  /**
-   * Get stored editor preference from localStorage.
-   * @returns {string} Editor name
-   * @private
-   */
-  _getStoredEditor() {
-    try {
-      return localStorage.getItem("coherent-editor") || "vscode";
-    } catch {
-      return "vscode";
-    }
-  }
-  /**
-   * Create the overlay element with Shadow DOM.
-   * @returns {{ host: HTMLElement, shadow: ShadowRoot }} Overlay elements
-   */
-  createOverlay() {
-    if (this.overlay) return this.overlay;
-    const host = document.createElement("div");
-    host.id = "coherent-error-overlay";
-    const shadow = host.attachShadow({ mode: "open" });
-    const style = document.createElement("style");
-    style.textContent = OVERLAY_STYLES;
-    shadow.appendChild(style);
-    this.overlay = { host, shadow };
-    return this.overlay;
-  }
-  /**
-   * Show the error overlay with error details.
-   * @param {Object} error - Error details
-   * @param {string} error.message - Error message
-   * @param {string} [error.file] - File path
-   * @param {number} [error.line] - Line number
-   * @param {number} [error.column] - Column number
-   * @param {string} [error.frame] - Code frame with context
-   * @param {string} [error.stack] - Stack trace
-   */
-  show(error) {
-    const { host, shadow } = this.createOverlay();
-    const existingWrapper = shadow.querySelector(".wrapper");
-    if (existingWrapper) existingWrapper.remove();
-    const line = toPositiveInt(error.line);
-    const column = toPositiveInt(error.column);
-    const frameLines = error.frame ? error.frame.split("\n").length : 0;
-    const startLine = line ? Math.max(1, line - Math.floor(frameLines / 2)) : 1;
-    const wrapper = document.createElement("div");
-    wrapper.className = "wrapper";
-    wrapper.innerHTML = `
-      <div class="backdrop"></div>
-      <div class="container">
-        <div class="header">
-          <span class="title">HMR Error</span>
-          <button class="close-btn" title="Close (Escape)">&times;</button>
-        </div>
-        <div class="content">
-          <div class="message">${escapeHtml(error.message || "Unknown error")}</div>
-          ${error.file ? `
-            <div class="file" data-file="${escapeHtml(error.file)}" data-line="${line || 1}">
-              ${escapeHtml(error.file)}${line ? `:${line}` : ""}${column ? `:${column}` : ""}
-            </div>
-          ` : ""}
-          ${error.frame ? `
-            <div class="code-frame">${formatCodeFrame(error.frame, line, startLine)}</div>
-          ` : ""}
-          ${error.stack ? `
-            <div class="stack">${escapeHtml(error.stack)}</div>
-          ` : ""}
-          <div class="tip">
-            Press <strong>Escape</strong> or click the X to dismiss.
-            ${error.file ? ` Click the file path to open in ${escapeHtml(this.editor)}.` : ""}
-          </div>
-        </div>
-      </div>
-    `;
-    shadow.appendChild(wrapper);
-    const closeBtn = wrapper.querySelector(".close-btn");
-    const backdrop = wrapper.querySelector(".backdrop");
-    const fileLink = wrapper.querySelector(".file");
-    closeBtn?.addEventListener("click", () => this.hide());
-    backdrop?.addEventListener("click", () => this.hide());
-    fileLink?.addEventListener("click", (e) => {
-      const target = e.target;
-      const file = target.dataset.file;
-      const line2 = parseInt(target.dataset.line, 10) || 1;
-      this.openInEditor(file, line2);
-    });
-    this.escapeHandler = (e) => {
-      if (e.key === "Escape") this.hide();
-    };
-    document.addEventListener("keydown", this.escapeHandler);
-    if (!host.parentNode) {
-      document.body.appendChild(host);
-    }
-  }
-  /**
-   * Hide and remove the error overlay.
-   */
-  hide() {
-    if (this.overlay?.host.parentNode) {
-      this.overlay.host.parentNode.removeChild(this.overlay.host);
-    }
-    if (this.escapeHandler) {
-      document.removeEventListener("keydown", this.escapeHandler);
-      this.escapeHandler = null;
-    }
-    this.overlay = null;
-  }
-  /**
-   * Open file in configured editor.
-   * @param {string} file - File path
-   * @param {number} [line=1] - Line number
-   */
-  openInEditor(file, line = 1) {
-    const urlGenerator = EDITOR_URLS[this.editor] || EDITOR_URLS.vscode;
-    const url = urlGenerator(file, line);
-    window.open(url, "_self");
-  }
-  /**
-   * Set preferred editor and store in localStorage.
-   * @param {string} editor - Editor name (vscode, cursor, vscode-insiders, atom, sublime, webstorm, idea)
-   */
-  setEditor(editor) {
-    this.editor = editor;
-    try {
-      localStorage.setItem("coherent-editor", editor);
-    } catch {
-    }
-  }
-};
-var errorOverlay = new ErrorOverlay();
-
-// src/hmr/indicator.js
-var STATUS_COLORS = {
-  connected: "#10b981",
-  // Green
-  disconnected: "#ef4444",
-  // Red
-  reconnecting: "#f59e0b",
-  // Yellow/amber
-  error: "#ef4444"
-  // Red
-};
-var STATUS_TITLES = {
-  connected: "HMR: Connected",
-  disconnected: "HMR: Disconnected",
-  reconnecting: "HMR: Reconnecting...",
-  error: "HMR: Error"
-};
-var DEFAULT_COLOR = "#666";
-var ConnectionIndicator = class {
-  constructor() {
-    this.indicator = null;
-  }
-  /**
-   * Create the indicator element if it doesn't exist.
-   * Uses inline styles to avoid external CSS dependencies.
-   */
-  create() {
-    if (this.indicator) return;
-    const el = document.createElement("div");
-    el.id = "coherent-hmr-indicator";
-    el.style.cssText = `
-      position: fixed;
-      bottom: 8px;
-      right: 8px;
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: ${DEFAULT_COLOR};
-      z-index: 99998;
-      pointer-events: none;
-      transition: background 0.3s ease;
-    `;
-    el.title = "HMR: Initializing";
-    document.body.appendChild(el);
-    this.indicator = el;
-  }
-  /**
-   * Update the indicator status.
-   * Creates the element if it doesn't exist (lazy initialization).
-   *
-   * @param {string} status - Status string: 'connected', 'disconnected', 'reconnecting', or 'error'
-   */
-  update(status) {
-    if (!this.indicator) {
-      this.create();
-    }
-    const color = STATUS_COLORS[status] || STATUS_COLORS.disconnected;
-    const title = STATUS_TITLES[status] || "HMR: Unknown";
-    this.indicator.style.background = color;
-    this.indicator.title = title;
-  }
-  /**
-   * Remove the indicator from the DOM.
-   */
-  destroy() {
-    if (this.indicator?.parentNode) {
-      this.indicator.parentNode.removeChild(this.indicator);
-    }
-    this.indicator = null;
-  }
-};
-var connectionIndicator = new ConnectionIndicator();
-
-// src/hmr/module-tracker.js
-var ModuleTracker = class {
-  constructor() {
-    this.modules = /* @__PURE__ */ new Map();
-    this.socket = null;
-  }
-  /**
-   * Set WebSocket reference for invalidation messages
-   * @param {WebSocket|null} socket - WebSocket connection
-   */
-  setSocket(socket) {
-    this.socket = socket;
-  }
-  /**
-   * Create a hot context for a module (Vite-compatible API)
-   *
-   * Returns an object with:
-   * - data: Persistent object that survives HMR updates
-   * - accept(callback): Register self-update handler
-   * - acceptDeps(deps, callback): Register dependency update handler
-   * - dispose(callback): Register cleanup handler called before replacement
-   * - prune(callback): Register handler for when module is removed
-   * - invalidate(message): Signal that module cannot hot-update
-   *
-   * @param {string} moduleId - Unique identifier for the module
-   * @returns {Object} Hot context object
-   */
-  createHotContext(moduleId) {
-    let moduleData = this.modules.get(moduleId);
-    if (!moduleData) {
-      moduleData = {
-        accept: null,
-        acceptDeps: null,
-        dispose: null,
-        prune: null,
-        data: {}
-      };
-      this.modules.set(moduleId, moduleData);
-    }
-    const tracker = this;
-    return {
-      /**
-       * Persistent data object that survives HMR updates.
-       * Use this to preserve state across module replacements.
-       */
-      get data() {
-        return moduleData.data;
-      },
-      /**
-       * Accept self updates.
-       * Called when this module is updated and can handle its own replacement.
-       *
-       * @param {Function} [callback] - Optional callback receiving the new module
-       */
-      accept(callback) {
-        moduleData.accept = callback || (() => {
-        });
-      },
-      /**
-       * Accept dependency updates.
-       * Called when one of the specified dependencies is updated.
-       *
-       * @param {string|string[]} deps - Dependency module ID(s)
-       * @param {Function} callback - Callback receiving updated dependencies
-       */
-      acceptDeps(deps, callback) {
-        const depsArray = Array.isArray(deps) ? deps : [deps];
-        moduleData.acceptDeps = { deps: depsArray, callback };
-      },
-      /**
-       * Register disposal callback.
-       * Called before the module is replaced, receives the data object
-       * to allow saving state for the next version.
-       *
-       * @param {Function} callback - Cleanup handler, receives data object
-       */
-      dispose(callback) {
-        moduleData.dispose = callback;
-      },
-      /**
-       * Register prune callback.
-       * Called when the module is completely removed from the module graph.
-       *
-       * @param {Function} callback - Prune handler
-       */
-      prune(callback) {
-        moduleData.prune = callback;
-      },
-      /**
-       * Invalidate this module.
-       * Signals that the module cannot be hot-updated and should propagate
-       * the update to its importers.
-       *
-       * @param {string} [message] - Optional message explaining why
-       */
-      invalidate(message) {
-        const WS_OPEN = typeof WebSocket !== "undefined" ? WebSocket.OPEN : 1;
-        if (tracker.socket?.readyState === WS_OPEN) {
-          tracker.socket.send(JSON.stringify({
-            type: "invalidate",
-            moduleId,
-            message
-          }));
-        }
-        console.log(`[HMR] Module ${moduleId} invalidated${message ? `: ${message}` : ""}`);
-      }
-    };
-  }
-  /**
-   * Check if a module can be hot-updated
-   *
-   * Returns true if the module has registered an accept handler.
-   *
-   * @param {string} moduleId - Module identifier
-   * @returns {boolean} True if module accepts HMR updates
-   */
-  canHotUpdate(moduleId) {
-    const moduleData = this.modules.get(moduleId);
-    return !!(moduleData?.accept || moduleData?.acceptDeps);
-  }
-  /**
-   * Check if a module is an HMR boundary
-   *
-   * A module is considered a boundary if:
-   * - It has an accept handler registered
-   * - It exports __hmrBoundary = true
-   * - It is associated with a data-coherent-component element
-   *
-   * @param {string} moduleId - Module identifier
-   * @param {Object} [moduleExports] - Optional module exports to check for __hmrBoundary
-   * @returns {boolean} True if module is an HMR boundary
-   */
-  isHmrBoundary(moduleId, moduleExports) {
-    if (this.canHotUpdate(moduleId)) {
-      return true;
-    }
-    if (moduleExports?.__hmrBoundary === true) {
-      return true;
-    }
-    const componentName = this.extractComponentName(moduleId);
-    if (componentName && typeof document !== "undefined") {
-      const hasComponent = document.querySelector(
-        `[data-coherent-component="${componentName}"]`
-      );
-      if (hasComponent) {
-        return true;
-      }
-    }
-    return false;
-  }
-  /**
-   * Extract a potential component name from module path
-   *
-   * @param {string} moduleId - Module path
-   * @returns {string|null} Component name or null
-   * @private
-   */
-  extractComponentName(moduleId) {
-    const match = moduleId.match(/\/([^/]+?)(?:\.[^.]+)?$/);
-    if (match) {
-      return match[1];
-    }
-    return null;
-  }
-  /**
-   * Execute dispose callback for a module
-   *
-   * Calls the registered dispose handler with the data object,
-   * allowing the module to save state for the next version.
-   *
-   * @param {string} moduleId - Module identifier
-   * @returns {Object|null} The data object (for passing to next version)
-   */
-  executeDispose(moduleId) {
-    const moduleData = this.modules.get(moduleId);
-    if (!moduleData) {
-      return null;
-    }
-    if (typeof moduleData.dispose === "function") {
-      try {
-        moduleData.dispose(moduleData.data);
-      } catch (err) {
-        console.error(`[HMR] Error in dispose handler for ${moduleId}:`, err);
-      }
-    }
-    return moduleData.data;
-  }
-  /**
-   * Execute accept callback for a module
-   *
-   * Calls the registered accept handler with the new module.
-   *
-   * @param {string} moduleId - Module identifier
-   * @param {Object} [newModule] - The newly imported module
-   * @returns {boolean} True if accept handler was called
-   */
-  executeAccept(moduleId, newModule) {
-    const moduleData = this.modules.get(moduleId);
-    if (!moduleData?.accept) {
-      return false;
-    }
-    try {
-      moduleData.accept(newModule);
-      return true;
-    } catch (err) {
-      console.error(`[HMR] Error in accept handler for ${moduleId}:`, err);
-      return false;
-    }
-  }
-  /**
-   * Execute acceptDeps callback for a module
-   *
-   * Calls the registered acceptDeps handler with the updated dependencies.
-   *
-   * @param {string} moduleId - Module identifier
-   * @param {Object} updatedDeps - Map of dependency moduleId -> new module
-   * @returns {boolean} True if acceptDeps handler was called
-   */
-  executeAcceptDeps(moduleId, updatedDeps) {
-    const moduleData = this.modules.get(moduleId);
-    if (!moduleData?.acceptDeps) {
-      return false;
-    }
-    try {
-      const { deps, callback } = moduleData.acceptDeps;
-      const modules = deps.map((dep) => updatedDeps[dep]);
-      callback(modules);
-      return true;
-    } catch (err) {
-      console.error(`[HMR] Error in acceptDeps handler for ${moduleId}:`, err);
-      return false;
-    }
-  }
-  /**
-   * Execute prune callback for a module
-   *
-   * Called when a module is removed from the module graph.
-   *
-   * @param {string} moduleId - Module identifier
-   */
-  executePrune(moduleId) {
-    const moduleData = this.modules.get(moduleId);
-    if (!moduleData?.prune) {
-      return;
-    }
-    try {
-      moduleData.prune();
-    } catch (err) {
-      console.error(`[HMR] Error in prune handler for ${moduleId}:`, err);
-    }
-    this.modules.delete(moduleId);
-  }
-  /**
-   * Check if module is registered
-   *
-   * @param {string} moduleId - Module identifier
-   * @returns {boolean} True if module is registered
-   */
-  hasModule(moduleId) {
-    return this.modules.has(moduleId);
-  }
-  /**
-   * Get module data (for testing/debugging)
-   *
-   * @param {string} moduleId - Module identifier
-   * @returns {Object|null} Module data or null
-   */
-  getModuleData(moduleId) {
-    return this.modules.get(moduleId) || null;
-  }
-  /**
-   * Clear all module registrations (for testing)
-   */
-  clear() {
-    this.modules.clear();
-  }
-};
-var moduleTracker = new ModuleTracker();
-function createHotContext(moduleId) {
-  return moduleTracker.createHotContext(moduleId);
-}
-
-// src/hmr/client.js
-var MAX_STACK_LINE_LENGTH = 1024;
-var MAX_STACK_LINES = 50;
-function parseErrorLocation(error) {
-  const result = { file: null, line: null, column: null };
-  if (!error.stack) {
-    return result;
-  }
-  const patterns = [
-    /at\s[^(]*\(([^()]+):(\d+):(\d+)\)/,
-    // Chrome/Node with parens
-    /at\s+([^\s].*):(\d+):(\d+)/,
-    // Chrome/Node without parens
-    /@([^@]+):(\d+):(\d+)/,
-    // Firefox
-    /^(.+?):(\d+):(\d+)/
-    // Safari
-  ];
-  const lines = error.stack.split("\n", MAX_STACK_LINES);
-  for (const line of lines) {
-    if (line.length > MAX_STACK_LINE_LENGTH) continue;
-    for (const pattern of patterns) {
-      const match = line.match(pattern);
-      if (match) {
-        result.file = match[1];
-        result.line = parseInt(match[2], 10);
-        result.column = parseInt(match[3], 10);
-        return result;
-      }
-    }
-  }
-  return result;
-}
-var HMRClient = class {
-  constructor() {
-    this.socket = null;
-    this.connected = false;
-    this.reconnectAttempts = 0;
-    this.maxReconnectAttempts = 10;
-    this.reconnectDelay = 1e3;
-    this.hadDisconnect = false;
-    this.reconnectTimeout = null;
-    this.initialized = false;
-  }
-  /**
-   * Connect to the dev server WebSocket
-   *
-   * Establishes WebSocket connection with automatic reconnection using
-   * exponential backoff with jitter.
-   *
-   * @returns {void}
-   */
-  connect() {
-    if (typeof window === "undefined") {
-      return;
-    }
-    if (this.reconnectTimeout !== null) {
-      clearTimeout(this.reconnectTimeout);
-      this.reconnectTimeout = null;
-    }
-    try {
-      const protocol = location.protocol === "https:" ? "wss" : "ws";
-      const wsUrl = `${protocol}://${location.host}`;
-      this.socket = new WebSocket(wsUrl);
-      moduleTracker.setSocket(this.socket);
-      this.socket.addEventListener("open", () => {
-        console.log("[HMR] Connected");
-        this.connected = true;
-        this.reconnectAttempts = 0;
-        connectionIndicator.update("connected");
-        this.socket.send(JSON.stringify({ type: "connected" }));
-        if (this.hadDisconnect) {
-          console.log("[HMR] Reconnected after disconnect, reloading page");
-          setTimeout(() => location.reload(), 200);
-          return;
-        }
-      });
-      this.socket.addEventListener("close", () => {
-        this.connected = false;
-        this.hadDisconnect = true;
-        connectionIndicator.update("disconnected");
-        moduleTracker.setSocket(null);
-        this.scheduleReconnect();
-      });
-      this.socket.addEventListener("error", (event) => {
-        console.warn("[HMR] WebSocket error:", event);
-        connectionIndicator.update("error");
-        try {
-          this.socket.close();
-        } catch {
-        }
-      });
-      this.socket.addEventListener("message", (event) => {
-        this.handleMessage(event);
-      });
-    } catch (error) {
-      console.warn("[HMR] Failed to connect:", error);
-      this.scheduleReconnect();
-    }
-  }
-  /**
-   * Schedule a reconnection attempt with exponential backoff
-   *
-   * @private
-   */
-  scheduleReconnect() {
-    if (this.reconnectAttempts >= this.maxReconnectAttempts) {
-      console.warn("[HMR] Max reconnection attempts reached");
-      connectionIndicator.update("disconnected");
-      return;
-    }
-    connectionIndicator.update("reconnecting");
-    const delay = Math.min(
-      this.reconnectDelay * Math.pow(2, this.reconnectAttempts) + Math.random() * 1e3,
-      3e4
-    );
-    this.reconnectAttempts++;
-    console.log(`[HMR] Reconnecting in ${Math.round(delay)}ms (attempt ${this.reconnectAttempts}/${this.maxReconnectAttempts})`);
-    this.reconnectTimeout = setTimeout(() => {
-      this.reconnectTimeout = null;
-      this.connect();
-    }, delay);
-  }
-  /**
-   * Handle incoming WebSocket message
-   *
-   * @param {MessageEvent} event - WebSocket message event
-   * @private
-   */
-  handleMessage(event) {
-    let data;
-    try {
-      data = JSON.parse(event.data);
-    } catch {
-      return;
-    }
-    console.log("[HMR] message", data.type, data.filePath || data.webPath || "");
-    switch (data.type) {
-      case "connected":
-        break;
-      case "hmr-full-reload":
-      case "reload":
-        console.warn("[HMR] Server requested full reload");
-        location.reload();
-        break;
-      case "hmr-component-update":
-      case "hmr-update":
-        this.handleUpdate(data);
-        break;
-      case "hmr-error":
-        this.showError(data.error || data);
-        break;
-      case "preview-update":
-        break;
-      default:
-        break;
-    }
-  }
-  /**
-   * Handle module update
-   *
-   * Orchestrates the full HMR update cycle:
-   * 1. Capture form/scroll state
-   * 2. Execute dispose handlers
-   * 3. Clean up module resources
-   * 4. Re-import module
-   * 5. Execute accept handlers
-   * 6. Restore state
-   *
-   * @param {Object} data - Update message data
-   * @param {string} [data.filePath] - File path that changed
-   * @param {string} [data.webPath] - Web-accessible path
-   * @param {string} [data.updateType] - Type of update (component, style, etc.)
-   */
-  async handleUpdate(data) {
-    const filePath = data.webPath || data.filePath || "";
-    const moduleId = filePath;
-    try {
-      stateCapturer.captureAll();
-      if (moduleTracker.hasModule(moduleId)) {
-        moduleTracker.executeDispose(moduleId);
-      }
-      if (cleanupTracker.hasResources(moduleId)) {
-        cleanupTracker.checkForLeaks(moduleId);
-        cleanupTracker.cleanup(moduleId);
-      }
-      const importPath = filePath.startsWith("/") ? filePath : `/${filePath}`;
-      const newModule = await import(`${importPath}?t=${Date.now()}`);
-      const accepted = moduleTracker.canHotUpdate(moduleId);
-      if (accepted) {
-        moduleTracker.executeAccept(moduleId, newModule);
-      } else {
-        await this.fallbackHydrate();
-      }
-      stateCapturer.restoreAll();
-      errorOverlay.hide();
-      console.log(`[HMR] Updated: ${data.updateType || "module"} ${filePath}`);
-    } catch (error) {
-      this.handleUpdateError(error, filePath);
-    }
-  }
-  /**
-   * Fall back to autoHydrate for non-HMR-aware modules
-   *
-   * @private
-   */
-  async fallbackHydrate() {
-    try {
-      const { autoHydrate } = await import("../hydration.js");
-      if (typeof window !== "undefined" && window.componentRegistry) {
-        autoHydrate(window.componentRegistry);
-      } else {
-        autoHydrate();
-      }
-    } catch {
-      console.warn("[HMR] autoHydrate not available, component may need manual refresh");
-    }
-  }
-  /**
-   * Handle update error
-   *
-   * @param {Error} error - Error that occurred
-   * @param {string} filePath - File that was being updated
-   * @private
-   */
-  handleUpdateError(error, filePath) {
-    console.error("[HMR] Update failed:", error);
-    const location2 = parseErrorLocation(error);
-    const errorDetails = {
-      message: error.message || "Unknown error during HMR update",
-      file: location2.file || filePath,
-      line: location2.line,
-      column: location2.column,
-      stack: error.stack
-    };
-    this.showError(errorDetails);
-  }
-  /**
-   * Show error overlay
-   *
-   * @param {Object} error - Error details
-   */
-  showError(error) {
-    errorOverlay.show(error);
-  }
-  /**
-   * Hide error overlay
-   */
-  hideError() {
-    errorOverlay.hide();
-  }
-  /**
-   * Initialize HMR client
-   *
-   * Guards against double initialization and connects to dev server.
-   *
-   * @returns {void}
-   */
-  initialize() {
-    if (typeof window === "undefined") {
-      return;
-    }
-    if (window.__coherent_hmr_initialized || this.initialized) {
-      return;
-    }
-    window.__coherent_hmr_initialized = true;
-    this.initialized = true;
-    this.connect();
-  }
-  /**
-   * Disconnect and clean up
-   *
-   * @returns {void}
-   */
-  disconnect() {
-    if (this.reconnectTimeout !== null) {
-      clearTimeout(this.reconnectTimeout);
-      this.reconnectTimeout = null;
-    }
-    if (this.socket) {
-      try {
-        this.socket.close();
-      } catch {
-      }
-      this.socket = null;
-    }
-    this.connected = false;
-    moduleTracker.setSocket(null);
-    connectionIndicator.destroy();
-  }
-  /**
-   * Check if client is connected
-   *
-   * @returns {boolean} True if connected
-   */
-  isConnected() {
-    return this.connected;
-  }
-};
-var hmrClient = new HMRClient();
 export {
   CleanupTracker,
   ConnectionIndicator,