why-hydration 0.1.0

package/dist/chunk-EPJM3LH3.cjs

@@ -0,0 +1,717 @@
+'use strict';
+
+var chunkOGQEPU7G_cjs = require('./chunk-OGQEPU7G.cjs');
+
+// src/core/env.ts
+var isDev = typeof process !== "undefined" && process.env != null && process.env.NODE_ENV !== "production";
+
+// src/core/diff.ts
+var IGNORED_ATTRIBUTES = /* @__PURE__ */ new Set(["data-reactroot"]);
+function parseServerHtml(html, rootTagName) {
+  const container = document.createElement(rootTagName || "div");
+  container.innerHTML = html;
+  return container;
+}
+function diffTrees(serverRoot, clientRoot, basePath = tagPath(clientRoot)) {
+  return diffChildren(serverRoot, clientRoot, basePath);
+}
+function diffSnapshotAgainstDom(serverHtml, clientRoot) {
+  const serverRoot = parseServerHtml(serverHtml, clientRoot.tagName);
+  return diffTrees(serverRoot, clientRoot);
+}
+function diffChildren(serverParent, clientParent, parentPath) {
+  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);
+    if (serverNode && !clientNode) {
+      return {
+        kind: "node-removed",
+        path,
+        tagName: elementTag(serverNode),
+        parentTagName: elementTag(clientParent),
+        server: serialize(serverNode),
+        client: null,
+        element: asElement(clientParent)
+      };
+    }
+    if (!serverNode && clientNode) {
+      return {
+        kind: "node-added",
+        path,
+        tagName: elementTag(clientNode),
+        parentTagName: elementTag(clientParent),
+        server: null,
+        client: serialize(clientNode),
+        element: asElement(clientNode)
+      };
+    }
+    if (!serverNode || !clientNode) continue;
+    const divergence = diffNode(
+      serverNode,
+      clientNode,
+      path,
+      elementTag(clientParent)
+    );
+    if (divergence) return divergence;
+  }
+  return null;
+}
+function diffNode(serverNode, clientNode, path, parentTag) {
+  if (serverNode.nodeType !== clientNode.nodeType) {
+    return {
+      kind: "structure",
+      path,
+      tagName: elementTag(clientNode),
+      parentTagName: parentTag,
+      server: serialize(serverNode),
+      client: serialize(clientNode),
+      element: asElement(clientNode)
+    };
+  }
+  if (serverNode.nodeType === Node.TEXT_NODE || serverNode.nodeType === Node.COMMENT_NODE) {
+    const serverText = serverNode.textContent ?? "";
+    const clientText = clientNode.textContent ?? "";
+    if (serverText !== clientText) {
+      return {
+        kind: "text",
+        path,
+        parentTagName: parentTag,
+        server: serverText,
+        client: clientText,
+        element: asElement(clientNode.parentNode)
+      };
+    }
+    return null;
+  }
+  if (serverNode.nodeType === Node.ELEMENT_NODE) {
+    const serverEl = serverNode;
+    const clientEl = clientNode;
+    if (serverEl.tagName !== clientEl.tagName) {
+      return {
+        kind: "structure",
+        path,
+        tagName: clientEl.tagName,
+        parentTagName: parentTag,
+        server: serialize(serverEl),
+        client: serialize(clientEl),
+        element: clientEl
+      };
+    }
+    const attrDivergence = diffAttributes(serverEl, clientEl, path, parentTag);
+    if (attrDivergence) return attrDivergence;
+    return diffChildren(serverEl, clientEl, path);
+  }
+  return null;
+}
+function diffAttributes(serverEl, clientEl, path, parentTag) {
+  const names = /* @__PURE__ */ new Set();
+  for (const a of Array.from(serverEl.attributes)) names.add(a.name);
+  for (const a of Array.from(clientEl.attributes)) names.add(a.name);
+  for (const name of names) {
+    if (IGNORED_ATTRIBUTES.has(name)) continue;
+    const serverValue = serverEl.getAttribute(name);
+    const clientValue = clientEl.getAttribute(name);
+    if (normalizeAttr(name, serverValue) === normalizeAttr(name, clientValue)) {
+      continue;
+    }
+    return {
+      kind: "attribute",
+      path,
+      tagName: clientEl.tagName,
+      parentTagName: parentTag,
+      attribute: name,
+      server: serverValue,
+      client: clientValue,
+      element: clientEl
+    };
+  }
+  return null;
+}
+function normalizeAttr(name, value) {
+  if (value == null) return null;
+  if (name === "class") {
+    return value.trim().split(/\s+/).filter(Boolean).sort().join(" ");
+  }
+  if (name === "style") {
+    return value.split(";").map((s) => s.trim()).filter(Boolean).sort().join(";");
+  }
+  return value;
+}
+var NOISE_TAGS = /* @__PURE__ */ new Set([
+  "SCRIPT",
+  "STYLE",
+  "LINK",
+  "TEMPLATE",
+  "NOSCRIPT"
+]);
+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;
+  return false;
+}
+function meaningfulChildNodes(parent) {
+  const children = Array.from(parent.childNodes);
+  const hasElement = children.some(
+    (n) => n.nodeType === Node.ELEMENT_NODE && !isNoiseElement(n)
+  );
+  return children.filter((node) => {
+    if (isNoiseElement(node)) return false;
+    if (node.nodeType !== Node.TEXT_NODE) return true;
+    const text = node.textContent ?? "";
+    if (text.trim() !== "") return true;
+    return !hasElement;
+  });
+}
+function serialize(node) {
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    return node.outerHTML;
+  }
+  return node.textContent ?? "";
+}
+function asElement(node) {
+  if (!node) return null;
+  return node.nodeType === Node.ELEMENT_NODE ? node : null;
+}
+function elementTag(node) {
+  return node.nodeType === Node.ELEMENT_NODE ? node.tagName : void 0;
+}
+function tagPath(el) {
+  return el.tagName.toLowerCase();
+}
+function childPath(parentPath, node, index) {
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    const tag = node.tagName.toLowerCase();
+    return `${parentPath} > ${tag}:nth-child(${index + 1})`;
+  }
+  if (node.nodeType === Node.COMMENT_NODE) {
+    return `${parentPath} > #comment[${index}]`;
+  }
+  return `${parentPath} > #text[${index}]`;
+}
+
+// src/core/classify/detectors.ts
+var UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+var REACT_ID_RE = /^:[rR][0-9a-z]*:$/;
+var HEX_TOKEN_RE = /^[0-9a-f]{16,}$/i;
+var RANDOM_DECIMAL_RE = /^0?\.\d{6,}$/;
+var NANOID_RE = /^[A-Za-z0-9_-]{10,}$/;
+var ARABIC_INDIC_DIGITS = /[٠-٩۰-۹]/;
+var LATIN_DIGITS = /[0-9]/;
+function isRandomLike(value) {
+  const v = value.trim();
+  if (!v) return false;
+  if (UUID_RE.test(v)) return true;
+  if (REACT_ID_RE.test(v)) return true;
+  if (HEX_TOKEN_RE.test(v)) return true;
+  if (RANDOM_DECIMAL_RE.test(v)) return true;
+  if (NANOID_RE.test(v) && /[A-Za-z]/.test(v) && /[0-9]/.test(v)) return true;
+  return false;
+}
+function looksLikeTime(value) {
+  return /\b\d{1,2}:\d{2}(?::\d{2})?(?:\s?[AaPp][Mm])?\b/.test(value.trim());
+}
+function toTimestamp(value) {
+  const v = value.trim();
+  if (!v) return null;
+  if (/^\d{10,13}$/.test(v)) {
+    const n = Number(v);
+    return v.length === 10 ? n * 1e3 : n;
+  }
+  const parsed = Date.parse(v);
+  if (!Number.isNaN(parsed)) return parsed;
+  if (looksLikeTime(v)) {
+    const anchored = Date.parse(`1970-01-01 ${v}`);
+    if (!Number.isNaN(anchored)) return anchored;
+  }
+  return null;
+}
+function hasArabicIndicDigits(value) {
+  return ARABIC_INDIC_DIGITS.test(value);
+}
+function hasLatinDigits(value) {
+  return LATIN_DIGITS.test(value);
+}
+function isSameNumberDifferentSeparators(a, b) {
+  const digitsOnly = (s) => s.replace(/[^\d]/g, "");
+  const da = digitsOnly(a);
+  const db = digitsOnly(b);
+  if (!da || da !== db) return false;
+  const hasSep = (s) => /[.,\s\u00a0\u2009]/.test(s.trim());
+  return (hasSep(a) || hasSep(b)) && a.trim() !== b.trim();
+}
+function isSameDateDifferentOrder(a, b) {
+  const partsA = a.trim().match(/^(\d{1,4})[/.-](\d{1,2})[/.-](\d{1,4})$/);
+  const partsB = b.trim().match(/^(\d{1,4})[/.-](\d{1,2})[/.-](\d{1,4})$/);
+  if (!partsA || !partsB) return false;
+  const setA = [partsA[1], partsA[2], partsA[3]].sort().join("|");
+  const setB = [partsB[1], partsB[2], partsB[3]].sort().join("|");
+  return setA === setB && a.trim() !== b.trim();
+}
+var EXTENSION_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "cz-shortcut-listen",
+  "data-gramm",
+  "data-gramm_editor",
+  "data-gramm_id",
+  "data-gr-c-s-loaded",
+  "data-lt-installed",
+  "data-new-gr-c-s-check-loaded",
+  "data-new-gr-c-s-loaded",
+  "spellcheck-extension",
+  "bis_register",
+  "__processed_by_react_dev_tools"
+]);
+function isExtensionAttribute(name) {
+  const n = name.toLowerCase();
+  if (EXTENSION_ATTRIBUTES.has(n)) return true;
+  return n.startsWith("data-gr-") || n.startsWith("data-gramm") || n.startsWith("__bis") || n.startsWith("bis_");
+}
+var BLOCK_TAGS = /* @__PURE__ */ new Set([
+  "DIV",
+  "P",
+  "SECTION",
+  "ARTICLE",
+  "UL",
+  "OL",
+  "LI",
+  "TABLE",
+  "HEADER",
+  "FOOTER",
+  "MAIN",
+  "ASIDE",
+  "NAV",
+  "H1",
+  "H2",
+  "H3",
+  "H4",
+  "H5",
+  "H6",
+  "FORM",
+  "BLOCKQUOTE",
+  "PRE",
+  "HR"
+]);
+function isInvalidNesting(parentTag, childTag) {
+  if (!parentTag || !childTag) return false;
+  const p = parentTag.toUpperCase();
+  const c = childTag.toUpperCase();
+  if (p === "P" && BLOCK_TAGS.has(c)) return true;
+  if (p === "A" && c === "A") return true;
+  if (p === "BUTTON" && (c === "BUTTON" || c === "A")) return true;
+  if ((p === "TABLE" || p === "THEAD" || p === "TBODY") && c === "DIV") {
+    return true;
+  }
+  return false;
+}
+function messageIndicatesInvalidNesting(message) {
+  if (!message) return false;
+  return /validateDOMNesting/i.test(message) || /cannot (?:be a|contain).*(?:descendant|child)/i.test(message) || /cannot appear as a (?:child|descendant)/i.test(message);
+}
+
+// src/core/classify/rules.ts
+var DOCS_BASE = "https://github.com/razan-aboushi/why-hydration#cause-";
+function docs(category) {
+  return `${DOCS_BASE}${category}`;
+}
+function bothDiffer(d) {
+  return d.server != null && d.client != null && d.server.trim() !== d.client.trim();
+}
+var nonDeterministic = (d) => {
+  if (d.kind !== "text" && d.kind !== "attribute") return null;
+  if (!bothDiffer(d)) return null;
+  if (!isRandomLike(d.server) || !isRandomLike(d.client)) return null;
+  return {
+    category: "non-deterministic-value",
+    confidence: 0.9,
+    explanation: "The server and client rendered different random-looking values (an id, token, or Math.random() output). Anything non-deterministic in render produces a different value on each side.",
+    suggestion: "Use React `useId()` for ids. For random values, generate them after mount (in `useEffect`) or pass a value down from the server so both sides agree. Never call `Math.random()`/`crypto` during render.",
+    docsUrl: docs("non-deterministic-value")
+  };
+};
+var dateTime = (d) => {
+  if (d.kind !== "text" && d.kind !== "attribute") return null;
+  if (!bothDiffer(d)) return null;
+  const serverTs = toTimestamp(d.server);
+  const clientTs = toTimestamp(d.client);
+  const bothTimes = looksLikeTime(d.server) && looksLikeTime(d.client);
+  if (serverTs == null || clientTs == null) {
+    if (!bothTimes) return null;
+  }
+  const delta = serverTs != null && clientTs != null ? Math.abs(serverTs - clientTs) : 0;
+  const smallDelta = delta > 0 && delta < 24 * 60 * 60 * 1e3;
+  return {
+    category: "date-time",
+    confidence: smallDelta || bothTimes ? 0.85 : 0.7,
+    explanation: "The values are dates/times that differ between server render and client render \u2014 the clock moved (or the timezone differs) between the two environments.",
+    suggestion: "Render the current time after mount, or pass a single server timestamp down and format it identically on both sides. Pin an explicit timezone when formatting.",
+    docsUrl: docs("date-time")
+  };
+};
+var localeFormat = (d) => {
+  if (d.kind !== "text" && d.kind !== "attribute") return null;
+  if (!bothDiffer(d)) return null;
+  const { server, client } = d;
+  const scriptMismatch = hasArabicIndicDigits(server) && hasLatinDigits(client) || hasLatinDigits(server) && hasArabicIndicDigits(client);
+  if (scriptMismatch) {
+    return {
+      category: "locale-format",
+      confidence: 0.92,
+      explanation: "The same value was formatted with different digit scripts (Arabic-Indic \u0660\u0661\u0662 vs Latin 012). The server and client resolved to different locales.",
+      suggestion: "Pass an explicit `locale` (and timezone) to `Intl.NumberFormat` / `toLocaleString` on both server and client, or format the value after mount so only the client locale is ever used.",
+      docsUrl: docs("locale-format")
+    };
+  }
+  if (isSameNumberDifferentSeparators(server, client)) {
+    return {
+      category: "locale-format",
+      confidence: 0.82,
+      explanation: "The same number was formatted with different grouping/decimal separators between server and client (e.g. 1,234.56 vs 1.234,56).",
+      suggestion: "Pass an explicit locale to `Intl.NumberFormat`/`toLocaleString` on both sides so the separators match.",
+      docsUrl: docs("locale-format")
+    };
+  }
+  if (isSameDateDifferentOrder(server, client)) {
+    return {
+      category: "locale-format",
+      confidence: 0.75,
+      explanation: "The same date was rendered in a different field order (MM/DD vs DD/MM) between server and client.",
+      suggestion: "Format dates with an explicit locale and timezone via `Intl` on both sides.",
+      docsUrl: docs("locale-format")
+    };
+  }
+  return null;
+};
+var browserOnlyApi = (d) => {
+  const serverEmpty = d.server == null || d.server.trim() === "";
+  const clientHasContent = d.client != null && d.client.trim() !== "";
+  const shape = (d.kind === "text" || d.kind === "node-added") && serverEmpty && clientHasContent;
+  if (!shape) return null;
+  return {
+    category: "browser-only-api",
+    confidence: 0.75,
+    explanation: "The client rendered content the server left empty \u2014 the signature of reading a browser-only API (`window`, `document`, `localStorage`, `navigator`, `matchMedia`) during render.",
+    suggestion: "Gate browser-only reads behind a mounted flag or `useEffect`, or use `useSyncExternalStore` with a server snapshot so the first client render matches the server.",
+    docsUrl: docs("browser-only-api")
+  };
+};
+var viewportBranching = (d) => {
+  const structural = d.kind === "structure" || d.kind === "node-added" || d.kind === "node-removed";
+  if (!structural) return null;
+  if (isInvalidNesting(d.parentTagName, d.tagName) || messageIndicatesInvalidNesting(d.reactMessage)) {
+    return null;
+  }
+  return {
+    category: "viewport-branching",
+    confidence: 0.6,
+    explanation: "A whole subtree was added, removed, or swapped between server and client \u2014 typically a JavaScript width/viewport check that branches the tree at first render.",
+    suggestion: "Render both branches and switch between them with CSS media queries at first paint instead of branching in JavaScript, or defer the JS-driven branch until after mount.",
+    docsUrl: docs("viewport-branching")
+  };
+};
+var invalidNesting = (d) => {
+  const byMessage = messageIndicatesInvalidNesting(d.reactMessage);
+  const byShape = isInvalidNesting(d.parentTagName, d.tagName);
+  if (!byMessage && !byShape) return null;
+  return {
+    category: "invalid-html-nesting",
+    confidence: byMessage ? 0.9 : 0.72,
+    explanation: "A node was moved or ejected because the markup is invalid HTML (e.g. a `<div>` inside a `<p>`, or nested `<a>`). The browser repairs the server DOM, so it no longer matches what React expects.",
+    suggestion: "Fix the markup validity: block elements cannot live inside `<p>`, anchors cannot nest, etc. Replace the invalid parent with a `<div>` or restructure the tree.",
+    docsUrl: docs("invalid-html-nesting")
+  };
+};
+var whitespaceMinification = (d) => {
+  if (d.kind !== "text") return null;
+  if (d.server == null || d.client == null) return null;
+  if (d.server === d.client) return null;
+  const collapse = (s) => s.replace(/\s+/g, " ").trim();
+  if (collapse(d.server) !== collapse(d.client)) return null;
+  return {
+    category: "whitespace-minification",
+    confidence: 0.7,
+    explanation: "The mismatch is whitespace-only \u2014 the text is identical apart from spaces/newlines. An HTML minifier likely collapsed whitespace around the hydration root differently from React.",
+    suggestion: "Check your HTML minifier settings (e.g. `conservativeCollapse`) around the app root, or avoid minifying whitespace inside hydrated markup.",
+    docsUrl: docs("whitespace-minification")
+  };
+};
+var thirdPartyDomMutation = (d) => {
+  if (d.kind === "attribute" && d.attribute) {
+    if (isExtensionAttribute(d.attribute)) {
+      return {
+        category: "third-party-dom-mutation",
+        confidence: 0.88,
+        explanation: `The attribute \`${d.attribute}\` was injected by a browser extension or third-party script (e.g. Grammarly, ColorZilla) before hydration, so the client DOM no longer matches the server.`,
+        suggestion: "This is usually harmless. Add `suppressHydrationWarning` to the affected element, or defer third-party script init until after hydration.",
+        docsUrl: docs("third-party-dom-mutation")
+      };
+    }
+    const atRoot = /^(html|body)\b/.test(d.path) && d.server == null;
+    if (atRoot) {
+      return {
+        category: "third-party-dom-mutation",
+        confidence: 0.6,
+        explanation: `An attribute (\`${d.attribute}\`) appeared on a root element that the server never sent \u2014 a hallmark of an extension or early third-party script mutating the DOM.`,
+        suggestion: "Add `suppressHydrationWarning` to the root element, or defer the third-party script until after hydration.",
+        docsUrl: docs("third-party-dom-mutation")
+      };
+    }
+  }
+  return null;
+};
+var BUILT_IN_RULES = [
+  nonDeterministic,
+  dateTime,
+  localeFormat,
+  browserOnlyApi,
+  viewportBranching,
+  invalidNesting,
+  whitespaceMinification,
+  thirdPartyDomMutation
+];
+var UNKNOWN_CAUSE = {
+  category: "unknown",
+  confidence: 0,
+  explanation: "A hydration mismatch was detected but could not be matched to a known cause. Inspect the server vs client values above.",
+  suggestion: "Compare the server and client values. Common causes are non-deterministic values, dates/locales, and browser-only APIs used during render.",
+  docsUrl: docs("unknown")
+};
+
+// src/core/classify/index.ts
+var CONFIDENCE_THRESHOLD = 0.5;
+function classify(divergence, options = {}) {
+  const threshold = options.threshold ?? CONFIDENCE_THRESHOLD;
+  const rules = [
+    ...options.extra ?? [],
+    ...BUILT_IN_RULES
+  ];
+  for (const rule of rules) {
+    let result = null;
+    try {
+      result = rule(divergence);
+    } catch {
+      result = null;
+    }
+    if (result && result.confidence >= threshold) {
+      return result;
+    }
+  }
+  return UNKNOWN_CAUSE;
+}
+
+// src/core/report.ts
+var counter = 0;
+function nextId() {
+  counter += 1;
+  return `wh_${Date.now().toString(36)}_${counter}`;
+}
+function truncate(value, max = 300) {
+  if (value == null) return null;
+  return value.length > max ? `${value.slice(0, max)}\u2026` : value;
+}
+function buildReport(divergence, cause, context = {}) {
+  return {
+    id: nextId(),
+    timestamp: Date.now(),
+    component: context.component,
+    componentStack: context.componentStack,
+    location: context.location,
+    node: {
+      path: divergence.path,
+      tagName: divergence.tagName,
+      attribute: divergence.attribute,
+      kind: divergence.kind
+    },
+    server: truncate(divergence.server),
+    client: truncate(divergence.client),
+    cause,
+    raw: context.reactMessage ? { reactMessage: context.reactMessage } : void 0
+  };
+}
+function signatureOf(report) {
+  return [
+    report.node.kind,
+    report.node.path,
+    report.node.attribute ?? "",
+    report.cause.category,
+    report.server ?? "",
+    report.client ?? ""
+  ].join("|");
+}
+var ReportCollector = class {
+  constructor(options = {}) {
+    this.seen = /* @__PURE__ */ new Set();
+    this.sinks = /* @__PURE__ */ new Set();
+    this.reports = [];
+    this.options = options;
+    this.maxReports = options.maxReports ?? 25;
+  }
+  addSink(sink) {
+    this.sinks.add(sink);
+    return () => this.sinks.delete(sink);
+  }
+  getReports() {
+    return this.reports;
+  }
+  get isFull() {
+    return this.reports.length >= this.maxReports;
+  }
+  report(divergence, context = {}) {
+    if (this.isFull) return null;
+    if (this.options.ignore?.(divergence)) return null;
+    const cause = classify(divergence, {
+      extra: this.options.extra,
+      threshold: this.options.threshold
+    });
+    const report = buildReport(divergence, cause, context);
+    const signature = signatureOf(report);
+    if (this.seen.has(signature)) return null;
+    this.seen.add(signature);
+    this.reports.push(report);
+    for (const sink of this.sinks) {
+      try {
+        sink(report);
+      } catch {
+      }
+    }
+    return report;
+  }
+  reset() {
+    this.seen.clear();
+    this.reports.length = 0;
+  }
+};
+
+// 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);
+}
+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();
+  }
+  return args.map((a) => typeof a === "string" ? a : String(a)).join(" ");
+}
+function parseHydrationMessage(message) {
+  if (!isHydrationMessage(message)) return null;
+  const text = /Text content (?:did not match|does not match)[^:]*Server:\s*"?(.*?)"?\s+Client:\s*"?(.*?)"?\s*$/i.exec(
+    message
+  );
+  if (text) {
+    return {
+      kind: "text",
+      path: "body",
+      server: text[1] ?? null,
+      client: text[2] ?? null,
+      reactMessage: message
+    };
+  }
+  const prop = /Prop [`'"]([^`'"]+)[`'"] did not match\.?\s*Server:\s*"?(.*?)"?\s+Client:\s*"?(.*?)"?\s*$/i.exec(
+    message
+  );
+  if (prop) {
+    return {
+      kind: "attribute",
+      path: "body",
+      attribute: prop[1],
+      server: prop[2] ?? null,
+      client: prop[3] ?? null,
+      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
+  );
+  if (expected) {
+    return {
+      kind: "node-added",
+      path: "body",
+      tagName: expected[1]?.toUpperCase(),
+      parentTagName: expected[2]?.toUpperCase(),
+      server: null,
+      client: `<${expected[1]?.toLowerCase()}>`,
+      reactMessage: message
+    };
+  }
+  const notExpected = /Did not expect server HTML to contain(?: the text node)?(?: a)? <?(\w+)>?/i.exec(
+    message
+  );
+  if (notExpected) {
+    return {
+      kind: "node-removed",
+      path: "body",
+      tagName: notExpected[1]?.toUpperCase(),
+      server: `<${notExpected[1]?.toLowerCase()}>`,
+      client: null,
+      reactMessage: message
+    };
+  }
+  return {
+    kind: "structure",
+    path: "body",
+    server: null,
+    client: null,
+    reactMessage: message
+  };
+}
+
+// src/core/inspect.ts
+function inspectRoot(root, collector, context = {}) {
+  const serverHtml = chunkOGQEPU7G_cjs.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;
+  }
+  return collector.report(divergence, context) != null;
+}
+function reportFromMessage(message, collector, context = {}) {
+  const divergence = parseHydrationMessage(message);
+  if (!divergence) return false;
+  return collector.report(divergence, {
+    ...context,
+    reactMessage: message
+  }) != null;
+}
+
+exports.BUILT_IN_RULES = BUILT_IN_RULES;
+exports.CONFIDENCE_THRESHOLD = CONFIDENCE_THRESHOLD;
+exports.ReportCollector = ReportCollector;
+exports.UNKNOWN_CAUSE = UNKNOWN_CAUSE;
+exports.buildReport = buildReport;
+exports.classify = classify;
+exports.diffSnapshotAgainstDom = diffSnapshotAgainstDom;
+exports.diffTrees = diffTrees;
+exports.formatConsoleArgs = formatConsoleArgs;
+exports.inspectRoot = inspectRoot;
+exports.isDev = isDev;
+exports.isHydrationMessage = isHydrationMessage;
+exports.parseHydrationMessage = parseHydrationMessage;
+exports.parseServerHtml = parseServerHtml;
+exports.reportFromMessage = reportFromMessage;
+exports.signatureOf = signatureOf;
+//# sourceMappingURL=chunk-EPJM3LH3.cjs.map
+//# sourceMappingURL=chunk-EPJM3LH3.cjs.map