why-hydration 0.1.1 → 0.1.3

package/dist/{chunk-WJ3ZOW4D.js → chunk-WQLUD25W.js}

@@ -10,57 +10,84 @@ function parseServerHtml(html, rootTagName) {
   container.innerHTML = html;
   return container;
 }
-function diffTrees(serverRoot, clientRoot, basePath = tagPath(clientRoot)) {
-  return diffChildren(serverRoot, clientRoot, basePath);
+function collectDivergences(serverRoot, clientRoot, limit = 60) {
+  const out = [];
+  collectChildren(serverRoot, clientRoot, tagPath(clientRoot), out, limit);
+  return out;
 }
-function diffSnapshotAgainstDom(serverHtml, clientRoot) {
+function collectSnapshotAgainstDom(serverHtml, clientRoot, limit = 60) {
   const serverRoot = parseServerHtml(serverHtml, clientRoot.tagName);
-  return diffTrees(serverRoot, clientRoot);
+  return collectDivergences(serverRoot, clientRoot, limit);
+}
+function diffTrees(serverRoot, clientRoot) {
+  return collectDivergences(serverRoot, clientRoot, 1)[0] ?? null;
 }
-function diffChildren(serverParent, clientParent, parentPath) {
+function diffSnapshotAgainstDom(serverHtml, clientRoot) {
+  return collectSnapshotAgainstDom(serverHtml, clientRoot, 1)[0] ?? null;
+}
+function collectChildren(serverParent, clientParent, parentPath, out, limit) {
+  if (out.length >= limit) return;
   const serverChildren = meaningfulChildNodes(serverParent);
   const clientChildren = meaningfulChildNodes(clientParent);
-  const max = Math.max(serverChildren.length, clientChildren.length);
-  for (let i = 0; i < max; i++) {
-    const serverNode = serverChildren[i] ?? null;
-    const clientNode = clientChildren[i] ?? null;
-    const path = childPath(parentPath, clientNode ?? serverNode, i);
+  const parentPending = hasPendingSuspense(serverParent);
+  const parentTag = elementTag(clientParent);
+  const pairs = alignChildren(serverChildren, clientChildren);
+  let index = 0;
+  for (let k = 0; k < pairs.length; k++) {
+    if (out.length >= limit) return;
+    const [serverNode, clientNode] = pairs[k];
+    if (serverNode && !clientNode && k + 1 < pairs.length) {
+      const [nextServer, nextClient] = pairs[k + 1];
+      if (!nextServer && nextClient && !isInjectedContainer(nextClient)) {
+        const path2 = childPath(parentPath, nextClient, index);
+        index += 1;
+        k += 1;
+        out.push({
+          kind: "structure",
+          path: path2,
+          tagName: elementTag(nextClient),
+          parentTagName: parentTag,
+          server: serialize(serverNode),
+          client: serialize(nextClient),
+          element: asElement(nextClient)
+        });
+        continue;
+      }
+    }
+    const anchor = clientNode ?? serverNode;
+    if (!anchor) continue;
+    const path = childPath(parentPath, anchor, index);
+    index += 1;
     if (serverNode && !clientNode) {
-      return {
+      out.push({
         kind: "node-removed",
         path,
         tagName: elementTag(serverNode),
-        parentTagName: elementTag(clientParent),
+        parentTagName: parentTag,
         server: serialize(serverNode),
         client: null,
         element: asElement(clientParent)
-      };
-    }
-    if (!serverNode && clientNode) {
-      return {
+      });
+    } else if (!serverNode && clientNode) {
+      if (isInjectedContainer(clientNode)) continue;
+      if (clientNode.nodeType === Node.ELEMENT_NODE && parentPending) continue;
+      out.push({
         kind: "node-added",
         path,
         tagName: elementTag(clientNode),
-        parentTagName: elementTag(clientParent),
+        parentTagName: parentTag,
         server: null,
         client: serialize(clientNode),
         element: asElement(clientNode)
-      };
+      });
+    } else if (serverNode && clientNode) {
+      collectNode(serverNode, clientNode, path, parentTag, out, limit);
     }
-    if (!serverNode || !clientNode) continue;
-    const divergence = diffNode(
-      serverNode,
-      clientNode,
-      path,
-      elementTag(clientParent)
-    );
-    if (divergence) return divergence;
   }
-  return null;
 }
-function diffNode(serverNode, clientNode, path, parentTag) {
+function collectNode(serverNode, clientNode, path, parentTag, out, limit) {
   if (serverNode.nodeType !== clientNode.nodeType) {
-    return {
+    out.push({
       kind: "structure",
       path,
       tagName: elementTag(clientNode),
@@ -68,28 +95,29 @@ function diffNode(serverNode, clientNode, path, parentTag) {
       server: serialize(serverNode),
       client: serialize(clientNode),
       element: asElement(clientNode)
-    };
+    });
+    return;
   }
   if (serverNode.nodeType === Node.TEXT_NODE || serverNode.nodeType === Node.COMMENT_NODE) {
     const serverText = serverNode.textContent ?? "";
     const clientText = clientNode.textContent ?? "";
     if (serverText !== clientText) {
-      return {
+      out.push({
         kind: "text",
         path,
         parentTagName: parentTag,
         server: serverText,
         client: clientText,
         element: asElement(clientNode.parentNode)
-      };
+      });
     }
-    return null;
+    return;
   }
   if (serverNode.nodeType === Node.ELEMENT_NODE) {
     const serverEl = serverNode;
     const clientEl = clientNode;
     if (serverEl.tagName !== clientEl.tagName) {
-      return {
+      out.push({
         kind: "structure",
         path,
         tagName: clientEl.tagName,
@@ -97,13 +125,13 @@ function diffNode(serverNode, clientNode, path, parentTag) {
         server: serialize(serverEl),
         client: serialize(clientEl),
         element: clientEl
-      };
+      });
+      return;
     }
     const attrDivergence = diffAttributes(serverEl, clientEl, path, parentTag);
-    if (attrDivergence) return attrDivergence;
-    return diffChildren(serverEl, clientEl, path);
+    if (attrDivergence) out.push(attrDivergence);
+    collectChildren(serverEl, clientEl, path, out, limit);
   }
-  return null;
 }
 function diffAttributes(serverEl, clientEl, path, parentTag) {
   const names = /* @__PURE__ */ new Set();
@@ -155,6 +183,56 @@ function normalizeStyle(value) {
   }
   return value.split(";").map((s) => s.trim()).filter(Boolean).sort().join(";");
 }
+function nodeKey(node) {
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    const el = node;
+    return el.id ? `${el.tagName}#${el.id}` : el.tagName;
+  }
+  if (node.nodeType === Node.TEXT_NODE) return "#text";
+  return "#other";
+}
+function alignChildren(server, client) {
+  const m = server.length;
+  const n = client.length;
+  if (m === 0 || n === 0 || m > 200 || n > 200 || m * n > 1e4) {
+    const pairs2 = [];
+    const max = Math.max(m, n);
+    for (let i2 = 0; i2 < max; i2++) {
+      pairs2.push([server[i2] ?? null, client[i2] ?? null]);
+    }
+    return pairs2;
+  }
+  const sk = server.map(nodeKey);
+  const ck = client.map(nodeKey);
+  const dp = Array.from(
+    { length: m + 1 },
+    () => new Array(n + 1).fill(0)
+  );
+  for (let i2 = m - 1; i2 >= 0; i2--) {
+    for (let j2 = n - 1; j2 >= 0; j2--) {
+      dp[i2][j2] = sk[i2] === ck[j2] ? dp[i2 + 1][j2 + 1] + 1 : Math.max(dp[i2 + 1][j2], dp[i2][j2 + 1]);
+    }
+  }
+  const pairs = [];
+  let i = 0;
+  let j = 0;
+  while (i < m && j < n) {
+    if (sk[i] === ck[j]) {
+      pairs.push([server[i], client[j]]);
+      i++;
+      j++;
+    } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+      pairs.push([server[i], null]);
+      i++;
+    } else {
+      pairs.push([null, client[j]]);
+      j++;
+    }
+  }
+  while (i < m) pairs.push([server[i++], null]);
+  while (j < n) pairs.push([null, client[j++]]);
+  return pairs;
+}
 var NOISE_TAGS = /* @__PURE__ */ new Set([
   "SCRIPT",
   "STYLE",
@@ -162,27 +240,79 @@ var NOISE_TAGS = /* @__PURE__ */ new Set([
   "TEMPLATE",
   "NOSCRIPT"
 ]);
+var TRACKER_MARKER = /googlefc|adsbygoogle|google_ads|googletag|__tcfapi|onetrust|optanon|cookiebot|usercentrics|didomi|quantcast|grammarly|gtm|hotjar|fullstory|intercom|drift|zendesk|livechat|tawk|hubspot|turnstile|recaptcha/i;
+var INJECTED_MARKER = /toastify|toast|modal|portal|overlay|backdrop|drawer|dialog|popover|popper|tooltip|snackbar|notification|consent|gdpr|cookie-?(?:banner|consent)|intercom|drift|crisp|tawk|zendesk|onetrust|usercentrics/i;
+function isThirdPartyNoiseElement(el) {
+  const identity = `${el.getAttribute("name") ?? ""} ${el.id} ${typeof el.className === "string" ? el.className : ""}`;
+  if (TRACKER_MARKER.test(identity)) return true;
+  if (el.tagName === "IFRAME") {
+    const src = el.getAttribute("src") ?? "";
+    const style = (el.getAttribute("style") ?? "").toLowerCase();
+    const hidden = /display\s*:\s*none/.test(style) || /visibility\s*:\s*hidden/.test(style) || /(?:left|top)\s*:\s*-\d{3,}px/.test(style) || /(?:width|height)\s*:\s*0(?:px)?\b/.test(style) || el.hasAttribute("hidden") || el.getAttribute("aria-hidden") === "true";
+    if (src === "about:blank" || hidden) return true;
+  }
+  return false;
+}
+function isInjectedContainer(node) {
+  if (node.nodeType !== Node.ELEMENT_NODE) return false;
+  const el = node;
+  if (isNoiseElement(el)) return true;
+  const cls = typeof el.className === "string" ? el.className : "";
+  if (INJECTED_MARKER.test(`${el.id} ${cls}`)) return true;
+  if (el.hasAttribute("aria-live")) return true;
+  const role = el.getAttribute("role");
+  if (role && /^(dialog|alertdialog|tooltip|status|alert)$/.test(role.trim())) {
+    return true;
+  }
+  if (el.tagName.includes("-PORTAL") || el.tagName.includes("-OVERLAY")) {
+    return true;
+  }
+  for (const attr of Array.from(el.attributes)) {
+    if (/portal|radix|headlessui|floating-ui/i.test(attr.name)) return true;
+  }
+  return false;
+}
 function isNoiseElement(node) {
   if (node.nodeType !== Node.ELEMENT_NODE) return false;
   const el = node;
   if (el.hasAttribute("data-why-hydration")) return true;
   if (NOISE_TAGS.has(el.tagName)) return true;
   if (el.tagName.includes("-ROUTE-ANNOUNCER")) return true;
+  if (isThirdPartyNoiseElement(el)) return true;
+  return false;
+}
+function hasPendingSuspense(parent) {
+  for (const n of Array.from(parent.childNodes)) {
+    if (n.nodeType === Node.COMMENT_NODE && (n.nodeValue ?? "").startsWith("$?")) {
+      return true;
+    }
+  }
   return false;
 }
 function meaningfulChildNodes(parent) {
-  const children = Array.from(parent.childNodes);
-  const hasElement = children.some(
+  const raw = Array.from(parent.childNodes);
+  const hasElement = raw.some(
     (n) => n.nodeType === Node.ELEMENT_NODE && !isNoiseElement(n)
   );
-  return children.filter((node) => {
-    if (isNoiseElement(node)) return false;
-    if (node.nodeType === Node.COMMENT_NODE) return false;
-    if (node.nodeType !== Node.TEXT_NODE) return true;
+  const result = [];
+  const boundaryStack = [];
+  for (const node of raw) {
+    if (node.nodeType === Node.COMMENT_NODE) {
+      const data = node.nodeValue ?? "";
+      if (data === "$?" || data === "$" || data === "$!") boundaryStack.push(data);
+      else if (data === "/$") boundaryStack.pop();
+      continue;
+    }
+    if (boundaryStack.includes("$?")) continue;
+    if (isNoiseElement(node)) continue;
+    if (node.nodeType !== Node.TEXT_NODE) {
+      result.push(node);
+      continue;
+    }
     const text = node.textContent ?? "";
-    if (text.trim() !== "") return true;
-    return !hasElement;
-  });
+    if (text.trim() !== "" || !hasElement) result.push(node);
+  }
+  return result;
 }
 function serialize(node) {
   if (node.nodeType === Node.ELEMENT_NODE) {
@@ -202,8 +332,10 @@ function tagPath(el) {
 }
 function childPath(parentPath, node, index) {
   if (node.nodeType === Node.ELEMENT_NODE) {
-    const tag = node.tagName.toLowerCase();
-    return `${parentPath} > ${tag}:nth-child(${index + 1})`;
+    const el = node;
+    const tag = el.tagName.toLowerCase();
+    const id = el.id ? `#${el.id}` : "";
+    return `${parentPath} > ${tag}${id}:nth-child(${index + 1})`;
   }
   if (node.nodeType === Node.COMMENT_NODE) {
     return `${parentPath} > #comment[${index}]`;
@@ -253,13 +385,39 @@ function hasArabicIndicDigits(value) {
 function hasLatinDigits(value) {
   return LATIN_DIGITS.test(value);
 }
+var NUMERIC_LIKE = /^[+-]?[\d.,\s\u00a0\u2009]+$/;
 function isSameNumberDifferentSeparators(a, b) {
-  const digitsOnly = (s) => s.replace(/[^\d]/g, "");
-  const da = digitsOnly(a);
-  const db = digitsOnly(b);
+  const at = a.trim();
+  const bt = b.trim();
+  if (!NUMERIC_LIKE.test(at) || !NUMERIC_LIKE.test(bt)) return false;
+  const digitsOnly = (s) => s.replace(/\D/g, "");
+  const da = digitsOnly(at);
+  const db = digitsOnly(bt);
   if (!da || da !== db) return false;
-  const hasSep = (s) => /[.,\s\u00a0\u2009]/.test(s.trim());
-  return (hasSep(a) || hasSep(b)) && a.trim() !== b.trim();
+  const hasSep = (s) => /[.,\s\u00a0\u2009]/.test(s);
+  return (hasSep(at) || hasSep(bt)) && at !== bt;
+}
+var CONTENT_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "value",
+  "placeholder",
+  "title",
+  "alt",
+  "label",
+  "aria-label",
+  "aria-valuetext",
+  "content",
+  "datetime"
+]);
+function isContentAttribute(name) {
+  return CONTENT_ATTRIBUTES.has(name.toLowerCase());
+}
+var THIRD_PARTY_MARKERS = /googlefc|adsbygoogle|google_ads|googletag|__tcfapi|onetrust|optanon|cookiebot|usercentrics|iubenda|didomi|quantcast|grammarly|data-gramm|gtm-|_hjsettings|hotjar|fullstory|intercom|drift|zendesk|livechat|tawk|hubspot|turnstile|recaptcha/i;
+function looksLikeThirdPartyNode(html, tagName) {
+  const tag = (tagName ?? "").toUpperCase();
+  if (tag === "IFRAME" || tag === "EMBED" || tag === "OBJECT") return true;
+  const h = (html ?? "").toLowerCase();
+  if (!h) return false;
+  return THIRD_PARTY_MARKERS.test(h) || h.includes("about:blank");
 }
 function isSameDateDifferentOrder(a, b) {
   const partsA = a.trim().match(/^(\d{1,4})[/.-](\d{1,2})[/.-](\d{1,4})$/);
@@ -337,8 +495,15 @@ function docs(category) {
 function bothDiffer(d) {
   return d.server != null && d.client != null && d.server.trim() !== d.client.trim();
 }
+function isValueDivergence(d) {
+  if (d.kind === "text") return true;
+  if (d.kind === "attribute" && d.attribute) {
+    return isContentAttribute(d.attribute);
+  }
+  return false;
+}
 var nonDeterministic = (d) => {
-  if (d.kind !== "text" && d.kind !== "attribute") return null;
+  if (!isValueDivergence(d)) return null;
   if (!bothDiffer(d)) return null;
   if (!isRandomLike(d.server) || !isRandomLike(d.client)) return null;
   return {
@@ -350,7 +515,7 @@ var nonDeterministic = (d) => {
   };
 };
 var dateTime = (d) => {
-  if (d.kind !== "text" && d.kind !== "attribute") return null;
+  if (!isValueDivergence(d)) return null;
   if (!bothDiffer(d)) return null;
   const serverTs = toTimestamp(d.server);
   const clientTs = toTimestamp(d.client);
@@ -369,7 +534,7 @@ var dateTime = (d) => {
   };
 };
 var localeFormat = (d) => {
-  if (d.kind !== "text" && d.kind !== "attribute") return null;
+  if (!isValueDivergence(d)) return null;
   if (!bothDiffer(d)) return null;
   const { server, client } = d;
   const scriptMismatch = hasArabicIndicDigits(server) && hasLatinDigits(client) || hasLatinDigits(server) && hasArabicIndicDigits(client);
@@ -477,17 +642,71 @@ var thirdPartyDomMutation = (d) => {
       };
     }
   }
+  if ((d.kind === "node-added" || d.kind === "node-removed") && looksLikeThirdPartyNode(d.client ?? d.server, d.tagName)) {
+    const tag = (d.tagName ?? "element").toLowerCase();
+    return {
+      category: "third-party-dom-mutation",
+      confidence: 0.7,
+      explanation: `A <${tag}> was injected by a third-party script or browser extension (ads, consent, analytics, chat) after the server render. It is not part of your app's hydration, so this is usually harmless noise.`,
+      suggestion: 'If React warns about it, add `suppressHydrationWarning` to the nearest server-rendered wrapper, or load the third-party script after hydration (e.g. Next.js `<Script strategy="afterInteractive">`).',
+      docsUrl: docs("third-party-dom-mutation")
+    };
+  }
   return null;
 };
+var attributeMismatch = (d) => {
+  if (d.kind !== "attribute" || !d.attribute) return null;
+  const attr = d.attribute.toLowerCase();
+  const server = d.server ?? "";
+  const client = d.client ?? "";
+  if (attr === "class" || attr === "classname") {
+    const serverSet = new Set(server.split(/\s+/).filter(Boolean));
+    const clientSet = new Set(client.split(/\s+/).filter(Boolean));
+    const added = [...clientSet].filter((c) => !serverSet.has(c));
+    const removed = [...serverSet].filter((c) => !clientSet.has(c));
+    const parts = [];
+    if (added.length) parts.push(`added on client: ${added.join(", ")}`);
+    if (removed.length) parts.push(`removed on client: ${removed.join(", ")}`);
+    const detail = parts.length ? ` (${parts.join("; ")})` : "";
+    return {
+      category: "attribute-mismatch",
+      confidence: 0.8,
+      explanation: `The \`class\` differs between server and client${detail}. A class was applied conditionally on the client \u2014 commonly a viewport, media-query, theme, or feature-flag check that runs during the first render.`,
+      suggestion: "Render the same className on the server and the first client paint. Move client-only conditions into `useEffect`/a mounted flag, or drive the visual change with CSS media queries instead of a JS class toggle.",
+      docsUrl: docs("attribute-mismatch")
+    };
+  }
+  if (attr === "style") {
+    return {
+      category: "attribute-mismatch",
+      confidence: 0.75,
+      explanation: "The inline `style` differs between server and client \u2014 an inline style was computed from client-only state (viewport size, theme, scroll position) during render.",
+      suggestion: "Compute the style after mount (`useEffect`) so the first client render matches the server, or move it to a CSS class / media query.",
+      docsUrl: docs("attribute-mismatch")
+    };
+  }
+  return {
+    category: "attribute-mismatch",
+    confidence: 0.6,
+    explanation: `The \`${d.attribute}\` attribute differs between server (\`${server}\`) and client (\`${client}\`) \u2014 its value was derived from something that differs between the server and the first client render.`,
+    suggestion: "Make the attribute deterministic across server and client, or set it after mount so the first client render matches the server HTML.",
+    docsUrl: docs("attribute-mismatch")
+  };
+};
 var BUILT_IN_RULES = [
   nonDeterministic,
   dateTime,
   localeFormat,
+  // Third-party runs before browser-only/viewport so an injected iframe is
+  // labelled correctly instead of "browser-only API" or "viewport branching".
+  thirdPartyDomMutation,
   browserOnlyApi,
   viewportBranching,
   invalidNesting,
   whitespaceMinification,
-  thirdPartyDomMutation
+  // Catch-all for class/style/generic attribute diffs — after the specific
+  // rules so extension attributes and content values are handled first.
+  attributeMismatch
 ];
 var UNKNOWN_CAUSE = {
   category: "unknown",
@@ -551,7 +770,6 @@ function buildReport(divergence, cause, context = {}) {
 function signatureOf(report) {
   return [
     report.node.kind,
-    report.node.path,
     report.node.attribute ?? "",
     report.cause.category,
     report.server ?? "",
@@ -604,19 +822,107 @@ var ReportCollector = class {
 
 // src/core/react-message.ts
 function isHydrationMessage(message) {
-  return /hydrat/i.test(message) || /did not match/i.test(message) || /server (?:HTML|rendered)/i.test(message) || /validateDOMNesting/i.test(message) || /Text content does not match/i.test(message);
+  return /hydrat/i.test(message) || /did(?:n't| not) match/i.test(message) || /won't be patched up/i.test(message) || /hydration-mismatch/i.test(message) || /server (?:HTML|rendered)/i.test(message) || /validateDOMNesting/i.test(message) || /Text content does not match/i.test(message);
+}
+function stringify(v) {
+  return typeof v === "string" ? v : String(v);
 }
 function formatConsoleArgs(args) {
   if (args.length === 0) return "";
   const [first, ...rest] = args;
   if (typeof first === "string" && /%[sco]/.test(first)) {
     let i = 0;
-    return first.replace(/%[sco]/g, () => String(rest[i++] ?? "")).trim();
+    const expanded = first.replace(/%[sco]/g, () => stringify(rest[i++] ?? ""));
+    const leftover = rest.slice(i).map(stringify).filter(Boolean);
+    return [expanded, ...leftover].join("\n").trim();
   }
-  return args.map((a) => typeof a === "string" ? a : String(a)).join(" ");
+  return args.map(stringify).join(" ");
+}
+function isInternalComponent(name) {
+  return /^(Inner|Outer|Segment|Client|Server|Redirect|Error|Loading|HTTPAccess|RenderFrom|ScrollAndFocus|Metadata|Outlet|ViewTransition|NotFound|Hot|DevRoot|App)$/.test(
+    name
+  ) || /^(Inner|Outer|Segment|Client|Server|Redirect|Error|Loading|HTTPAccess|RenderFrom|ScrollAndFocus|Metadata|Outlet|ViewTransition|NotFound|Hot|DevRoot)[A-Z]/.test(
+    name
+  ) || /(Boundary|Router|Handler|Provider|Context|Root|Node)$/.test(name) || name === "Fragment" || name === "Suspense";
+}
+function extractComponentFromMessage(message) {
+  const names = [];
+  const re = /<([A-Z][A-Za-z0-9_]*)\b/g;
+  let m;
+  while ((m = re.exec(message)) !== null) {
+    const name = m[1];
+    if (name && !isInternalComponent(name)) names.push(name);
+  }
+  return names.length ? names[names.length - 1] : void 0;
+}
+var ATTR_RE = /^([\w:-]+)=(?:"([\s\S]*)"|\{([\s\S]*)\})$/;
+function parseModernDiff(message) {
+  const plus = [];
+  const minus = [];
+  for (const raw of message.split("\n")) {
+    const line = raw.trim();
+    const p = /^\+\s+(.+)$/.exec(line);
+    const mn = /^-\s+(.+)$/.exec(line);
+    if (p && p[1]) plus.push(p[1].trim());
+    else if (mn && mn[1]) minus.push(mn[1].trim());
+  }
+  if (plus.length === 0 && minus.length === 0) return null;
+  for (const p of plus) {
+    const pm = ATTR_RE.exec(p);
+    if (!pm) continue;
+    const name = pm[1];
+    const clientValue = pm[2] ?? pm[3] ?? "";
+    const matched = minus.find((mm) => {
+      const parsed = ATTR_RE.exec(mm);
+      return parsed && parsed[1] === name;
+    });
+    if (matched) {
+      const parsed = ATTR_RE.exec(matched);
+      const serverValue = parsed ? parsed[2] ?? parsed[3] ?? "" : "";
+      return {
+        kind: "attribute",
+        path: "body",
+        attribute: name,
+        server: serverValue,
+        client: clientValue,
+        reactMessage: message
+      };
+    }
+  }
+  const client = plus.find((p) => !ATTR_RE.test(p)) ?? null;
+  const server = minus.find((m) => !ATTR_RE.test(m)) ?? null;
+  if (client !== null || server !== null) {
+    return {
+      kind: "text",
+      path: "body",
+      server,
+      client,
+      reactMessage: message
+    };
+  }
+  return null;
 }
 function parseHydrationMessage(message) {
   if (!isHydrationMessage(message)) return null;
+  const nesting = /<(\w+)>\s*cannot (?:appear as a|be a|contain a) (?:child|descendant)/i.exec(
+    message
+  );
+  if (nesting || /validateDOMNesting/i.test(message)) {
+    const pair = /<(\w+)>\s*cannot (?:appear as a|be a) (?:child|descendant) of <?(\w+)>?/i.exec(
+      message
+    );
+    return {
+      kind: "structure",
+      path: "body",
+      tagName: pair ? pair[1]?.toUpperCase() : void 0,
+      parentTagName: pair ? pair[2]?.toUpperCase() : void 0,
+      server: null,
+      client: null,
+      reactMessage: message
+    };
+  }
+  const modern = parseModernDiff(message);
+  if (modern) return modern;
   const text = /Text content (?:did not match|does not match)[^:]*Server:\s*"?(.*?)"?\s+Client:\s*"?(.*?)"?\s*$/i.exec(
     message
   );
@@ -642,20 +948,6 @@ function parseHydrationMessage(message) {
       reactMessage: message
     };
   }
-  const nesting = /<(\w+)>\s*cannot (?:appear as a|be a) (?:child|descendant) of <?(\w+)>?/i.exec(
-    message
-  );
-  if (nesting || /validateDOMNesting/i.test(message)) {
-    return {
-      kind: "structure",
-      path: "body",
-      tagName: nesting ? nesting[1]?.toUpperCase() : void 0,
-      parentTagName: nesting ? nesting[2]?.toUpperCase() : void 0,
-      server: null,
-      client: null,
-      reactMessage: message
-    };
-  }
   const expected = /Expected server HTML to contain a matching <(\w+)>(?: in <(\w+)>)?/i.exec(
     message
   );
@@ -691,27 +983,89 @@ function parseHydrationMessage(message) {
     reactMessage: message
   };
 }
+function parseAllHydrationDivergences(message) {
+  if (!isHydrationMessage(message)) return [];
+  const plus = [];
+  const minus = [];
+  for (const raw of message.split("\n")) {
+    const line = raw.trim();
+    const p = /^\+\s+(.+)$/.exec(line);
+    const mn = /^-\s+(.+)$/.exec(line);
+    if (p && p[1]) plus.push(p[1].trim());
+    else if (mn && mn[1]) minus.push(mn[1].trim());
+  }
+  if (plus.length === 0 && minus.length === 0) {
+    const single = parseHydrationMessage(message);
+    return single ? [single] : [];
+  }
+  const out = [];
+  const attrMinus = minus.filter((m) => ATTR_RE.test(m));
+  const usedMinus = /* @__PURE__ */ new Set();
+  for (const p of plus) {
+    const pm = ATTR_RE.exec(p);
+    if (!pm) continue;
+    const name = pm[1];
+    const clientValue = pm[2] ?? pm[3] ?? "";
+    const idx = attrMinus.findIndex((m, k) => {
+      if (usedMinus.has(k)) return false;
+      const parsed = ATTR_RE.exec(m);
+      return parsed?.[1] === name;
+    });
+    if (idx >= 0) {
+      usedMinus.add(idx);
+      const parsed = ATTR_RE.exec(attrMinus[idx]);
+      out.push({
+        kind: "attribute",
+        path: "body",
+        attribute: name,
+        server: parsed ? parsed[2] ?? parsed[3] ?? "" : "",
+        client: clientValue,
+        reactMessage: message
+      });
+    }
+  }
+  const textPlus = plus.filter((p) => !ATTR_RE.test(p));
+  const textMinus = minus.filter((m) => !ATTR_RE.test(m));
+  const len = Math.max(textPlus.length, textMinus.length);
+  for (let i = 0; i < len; i++) {
+    const client = textPlus[i] ?? null;
+    const server = textMinus[i] ?? null;
+    if (client !== null || server !== null) {
+      out.push({ kind: "text", path: "body", server, client, reactMessage: message });
+    }
+  }
+  return out.length ? out : parseHydrationMessage(message) ? [parseHydrationMessage(message)] : [];
+}
 
 // src/core/inspect.ts
-function inspectRoot(root, collector, context = {}) {
+function inspectRoot(root, collector, context = {}, enrich) {
   const serverHtml = getServerHtmlForRoot(root);
-  if (serverHtml == null) return false;
-  const divergence = diffSnapshotAgainstDom(serverHtml, root);
-  if (!divergence) return false;
-  if (context.reactMessage && !divergence.reactMessage) {
-    divergence.reactMessage = context.reactMessage;
+  if (serverHtml == null) return 0;
+  const divergences = collectSnapshotAgainstDom(serverHtml, root);
+  let reported = 0;
+  for (const divergence of divergences) {
+    if (context.reactMessage && !divergence.reactMessage) {
+      divergence.reactMessage = context.reactMessage;
+    }
+    const enriched = enrich ? enrich(divergence) : {};
+    if (collector.report(divergence, { ...context, ...enriched }) != null) {
+      reported += 1;
+    }
   }
-  return collector.report(divergence, context) != null;
+  return reported;
 }
 function reportFromMessage(message, collector, context = {}) {
-  const divergence = parseHydrationMessage(message);
-  if (!divergence) return false;
-  return collector.report(divergence, {
-    ...context,
-    reactMessage: message
-  }) != null;
+  const divergences = parseAllHydrationDivergences(message);
+  const component = extractComponentFromMessage(message) ?? context.component;
+  let reported = 0;
+  for (const divergence of divergences) {
+    if (collector.report(divergence, { ...context, component, reactMessage: message }) != null) {
+      reported += 1;
+    }
+  }
+  return reported;
 }
 
 export { BUILT_IN_RULES, CONFIDENCE_THRESHOLD, ReportCollector, UNKNOWN_CAUSE, buildReport, classify, diffSnapshotAgainstDom, diffTrees, formatConsoleArgs, inspectRoot, isDev, isHydrationMessage, parseHydrationMessage, parseServerHtml, reportFromMessage, signatureOf };
-//# sourceMappingURL=chunk-WJ3ZOW4D.js.map
-//# sourceMappingURL=chunk-WJ3ZOW4D.js.map
+//# sourceMappingURL=chunk-WQLUD25W.js.map
+//# sourceMappingURL=chunk-WQLUD25W.js.map