why-hydration 0.1.4 → 0.2.0

package/dist/chunk-MK3TYHKM.js

@@ -0,0 +1,966 @@
+import { isDev, ReportCollector, inspectRoot, reportFromMessage, isInternalComponent, formatConsoleArgs, isHydrationMessage, EN_MESSAGES, plainText, renderMessage, code, classDetail, param } from './chunk-3OAI2ZHY.js';
+import { getServerHtmlForRoot, readSnapshot, DEFAULT_SNAPSHOT_SELECTORS } from './chunk-XIM33ZGB.js';
+import * as React2 from 'react';
+
+// src/react/console.ts
+function installConsoleInterceptor(onMessage) {
+  if (typeof console === "undefined") return () => {
+  };
+  const original = console.error;
+  const patched = (...args) => {
+    try {
+      const message = formatConsoleArgs(args);
+      if (message && isHydrationMessage(message)) {
+        onMessage(message, args);
+      }
+    } catch {
+    }
+    original.apply(console, args);
+  };
+  console.error = patched;
+  return () => {
+    if (console.error === patched) {
+      console.error = original;
+    }
+  };
+}
+var BADGE = "color:#f59e0b;font-weight:bold";
+var DIM = "color:#9ca3af";
+function createConsoleReporter() {
+  const sink = (report) => {
+    const title = `%c\u2B21 why-hydration%c ${report.cause.category} \u2014 ${report.node.path}`;
+    console.group(title, BADGE, DIM);
+    console.log("%cServer:%c", "color:#fb7185", "", report.server ?? "(none)");
+    console.log("%cClient:%c", "color:#4ade80", "", report.client ?? "(none)");
+    if (report.component) {
+      console.log("%cComponent:%c", DIM, "", `<${report.component}>`);
+    }
+    if (report.location?.file) {
+      const loc = report.location.line ? `${report.location.file}:${report.location.line}` : report.location.file;
+      console.log("%cSource:%c", DIM, "", loc);
+    }
+    console.log("%cWhy:%c", DIM, "", report.cause.explanation);
+    console.log("%cFix:%c", "color:#86efac", "", report.cause.suggestion);
+    if (report.cause.docsUrl) {
+      console.log("%cDocs:%c", DIM, "", report.cause.docsUrl);
+    }
+    if (report.componentStack) {
+      console.log("%cComponent stack:%c", DIM, "", report.componentStack);
+    }
+    console.groupEnd();
+  };
+  return sink;
+}
+
+// src/react/capture.ts
+var MAX_CAPTURED = 50;
+var captured = /* @__PURE__ */ new Set();
+var listeners = /* @__PURE__ */ new Set();
+var uninstall = null;
+function startCapture() {
+  if (uninstall || typeof window === "undefined") return;
+  uninstall = installConsoleInterceptor((message) => {
+    if (captured.has(message) || captured.size >= MAX_CAPTURED) return;
+    captured.add(message);
+    for (const listener of [...listeners]) listener(message);
+  });
+}
+function subscribeCapture(listener) {
+  startCapture();
+  listeners.add(listener);
+  for (const message of [...captured]) listener(message);
+  return () => {
+    if (!listeners.delete(listener)) return;
+    if (listeners.size === 0 && uninstall) {
+      uninstall();
+      uninstall = null;
+    }
+  };
+}
+
+// src/react/i18n.ts
+var EN = {
+  dir: "ltr",
+  title: "Hydration mismatch",
+  dialogLabel: "Hydration mismatch diagnostics",
+  dismiss: "Dismiss",
+  dismissLabel: "Dismiss diagnostics overlay",
+  hintDismissLabel: "Dismiss hint",
+  server: "Server",
+  client: "Client",
+  fix: "Fix:",
+  learnMore: "Learn more \u2192",
+  none: "(none)",
+  empty: "(empty)",
+  fallbackCategory: "Mismatch",
+  categories: {
+    "non-deterministic-value": "Non-deterministic value",
+    "date-time": "Date / time",
+    "locale-format": "Locale formatting",
+    "browser-only-api": "Browser-only API",
+    "viewport-branching": "Viewport branching",
+    "invalid-html-nesting": "Invalid HTML nesting",
+    "whitespace-minification": "Whitespace / minification",
+    "third-party-dom-mutation": "Third-party DOM mutation",
+    "attribute-mismatch": "Attribute mismatch",
+    unknown: "Unknown"
+  },
+  messages: EN_MESSAGES,
+  hint: (count) => `\u2193 ${count} issues \u2014 scroll to see all`
+};
+var AR_MESSAGES = {
+  "non-deterministic-value": {
+    explanation: "\u0639\u0631\u0636 \u0627\u0644\u062E\u0627\u062F\u0645 \u0648\u0627\u0644\u0639\u0645\u064A\u0644 \u0642\u064A\u0645\u062A\u064A\u0646 \u062A\u0628\u062F\u0648\u0627\u0646 \u0639\u0634\u0648\u0627\u0626\u064A\u062A\u064A\u0646 \u0648\u0645\u062E\u062A\u0644\u0641\u062A\u064A\u0646 (\u0645\u0639\u0631\u0651\u0641 \u0623\u0648 \u0631\u0645\u0632 \u0623\u0648 \u0646\u0627\u062A\u062C `Math.random()`). \u0623\u064A \u0634\u064A\u0621 \u063A\u064A\u0631 \u062D\u062A\u0645\u064A \u0623\u062B\u0646\u0627\u0621 \u0627\u0644\u0639\u0631\u0636 \u064A\u0646\u062A\u062C \u0642\u064A\u0645\u0629 \u0645\u062E\u062A\u0644\u0641\u0629 \u0639\u0644\u0649 \u0643\u0644 \u062C\u0627\u0646\u0628.",
+    suggestion: "\u0627\u0633\u062A\u062E\u062F\u0645 `useId()` \u0645\u0646 React \u0644\u0644\u0645\u0639\u0631\u0651\u0641\u0627\u062A. \u0623\u0645\u0627 \u0627\u0644\u0642\u064A\u0645 \u0627\u0644\u0639\u0634\u0648\u0627\u0626\u064A\u0629 \u0641\u0648\u0644\u0651\u062F\u0647\u0627 \u0628\u0639\u062F \u0627\u0644\u062A\u0631\u0643\u064A\u0628 (\u062F\u0627\u062E\u0644 `useEffect`) \u0623\u0648 \u0645\u0631\u0651\u0631\u0647\u0627 \u0645\u0646 \u0627\u0644\u062E\u0627\u062F\u0645 \u0644\u064A\u062A\u0641\u0642 \u0627\u0644\u0637\u0631\u0641\u0627\u0646. \u0644\u0627 \u062A\u0633\u062A\u062F\u0639\u0650 `Math.random()` \u0623\u0648 `crypto` \u0623\u062B\u0646\u0627\u0621 \u0627\u0644\u0639\u0631\u0636 \u0623\u0628\u062F\u064B\u0627."
+  },
+  "date-time": {
+    explanation: "\u0627\u0644\u0642\u064A\u0645\u062A\u0627\u0646 \u062A\u0627\u0631\u064A\u062E\u0627\u0646 \u0623\u0648 \u0648\u0642\u062A\u0627\u0646 \u064A\u062E\u062A\u0644\u0641\u0627\u0646 \u0628\u064A\u0646 \u0639\u0631\u0636 \u0627\u0644\u062E\u0627\u062F\u0645 \u0648\u0639\u0631\u0636 \u0627\u0644\u0639\u0645\u064A\u0644 \u2014 \u062A\u063A\u064A\u0651\u0631\u062A \u0627\u0644\u0633\u0627\u0639\u0629 (\u0623\u0648 \u0627\u062E\u062A\u0644\u0641\u062A \u0627\u0644\u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0632\u0645\u0646\u064A\u0629) \u0628\u064A\u0646 \u0627\u0644\u0628\u064A\u0626\u062A\u064A\u0646.",
+    suggestion: "\u0627\u0639\u0631\u0636 \u0627\u0644\u0648\u0642\u062A \u0627\u0644\u062D\u0627\u0644\u064A \u0628\u0639\u062F \u0627\u0644\u062A\u0631\u0643\u064A\u0628\u060C \u0623\u0648 \u0645\u0631\u0651\u0631 \u0637\u0627\u0628\u0639\u064B\u0627 \u0632\u0645\u0646\u064A\u064B\u0627 \u0648\u0627\u062D\u062F\u064B\u0627 \u0645\u0646 \u0627\u0644\u062E\u0627\u062F\u0645 \u0648\u0646\u0633\u0651\u0642\u0647 \u0628\u0627\u0644\u0637\u0631\u064A\u0642\u0629 \u0646\u0641\u0633\u0647\u0627 \u0639\u0644\u0649 \u0627\u0644\u062C\u0627\u0646\u0628\u064A\u0646. \u0648\u062D\u062F\u0651\u062F \u0645\u0646\u0637\u0642\u0629 \u0632\u0645\u0646\u064A\u0629 \u0635\u0631\u064A\u062D\u0629 \u0639\u0646\u062F \u0627\u0644\u062A\u0646\u0633\u064A\u0642."
+  },
+  "locale-format.bidi": {
+    explanation: "\u0627\u0644\u0642\u064A\u0645\u062A\u0627\u0646 \u0644\u0627 \u062A\u062E\u062A\u0644\u0641\u0627\u0646 \u0625\u0644\u0627 \u0628\u0639\u0644\u0627\u0645\u0627\u062A \u062A\u062D\u0643\u0645 \u062B\u0646\u0627\u0626\u064A\u0629 \u0627\u0644\u0627\u062A\u062C\u0627\u0647 \u063A\u064A\u0631 \u0645\u0631\u0626\u064A\u0629 (`LRM` \u0648`RLM` \u0648\u0639\u0644\u0627\u0645\u0627\u062A \u0627\u0644\u0639\u0632\u0644). \u062A\u0636\u064A\u0641 `Intl` \u0647\u0630\u0647 \u0627\u0644\u0639\u0644\u0627\u0645\u0627\u062A \u062D\u0648\u0644 \u0627\u0644\u0623\u0631\u0642\u0627\u0645 \u0648\u0627\u0644\u062A\u0648\u0627\u0631\u064A\u062E \u0641\u064A \u0627\u0644\u0644\u063A\u0627\u062A \u0627\u0644\u062A\u064A \u062A\u064F\u0643\u062A\u0628 \u0645\u0646 \u0627\u0644\u064A\u0645\u064A\u0646 \u0625\u0644\u0649 \u0627\u0644\u064A\u0633\u0627\u0631\u060C \u0648\u062A\u064F\u0635\u062F\u0631 \u0625\u0635\u062F\u0627\u0631\u0627\u062A ICU \u0627\u0644\u0645\u062E\u062A\u0644\u0641\u0629 \u2014 Node \u0645\u0642\u0627\u0628\u0644 \u0627\u0644\u0645\u062A\u0635\u0641\u062D \u2014 \u0639\u0644\u0627\u0645\u0627\u062A \u0645\u062E\u062A\u0644\u0641\u0629 \u0644\u0644\u0645\u062F\u062E\u0644 \u0646\u0641\u0633\u0647.",
+    suggestion: "\u0646\u0633\u0651\u0642 \u0627\u0644\u0642\u064A\u0645\u0629 \u0641\u064A \u0645\u0643\u0627\u0646 \u0648\u0627\u062D\u062F \u0648\u0645\u0631\u0651\u0631 \u0627\u0644\u0646\u0635 \u0627\u0644\u0646\u0627\u062A\u062C\u060C \u0623\u0648 \u062B\u0628\u0651\u062A \u0627\u0644\u0644\u063A\u0629 \u0648\u0627\u0644\u0645\u0646\u0637\u0642\u0629 \u0627\u0644\u0632\u0645\u0646\u064A\u0629 \u0646\u0641\u0633\u064A\u0647\u0645\u0627 \u0639\u0644\u0649 \u0627\u0644\u062C\u0627\u0646\u0628\u064A\u0646. \u0648\u0625\u0646 \u0643\u0627\u0646\u062A \u0627\u0644\u0639\u0644\u0627\u0645\u0627\u062A \u063A\u064A\u0631 \u0645\u0624\u0630\u064A\u0629 \u0641\u0623\u0636\u0641 `suppressHydrationWarning` \u0625\u0644\u0649 \u0627\u0644\u0639\u0646\u0635\u0631."
+  },
+  "locale-format.script": {
+    explanation: "\u0646\u064F\u0633\u0651\u0642\u062A \u0627\u0644\u0642\u064A\u0645\u0629 \u0646\u0641\u0633\u0647\u0627 \u0628\u0646\u0638\u0627\u0645\u064E\u064A \u0623\u0631\u0642\u0627\u0645 \u0645\u062E\u062A\u0644\u0641\u064A\u0646 (\u0623\u0631\u0642\u0627\u0645 \u0639\u0631\u0628\u064A\u0629 \u0645\u0634\u0631\u0642\u064A\u0629 `\u0660\u0661\u0662` \u0645\u0642\u0627\u0628\u0644 \u0623\u0631\u0642\u0627\u0645 \u0644\u0627\u062A\u064A\u0646\u064A\u0629 `012`). \u0627\u062E\u062A\u0627\u0631 \u0627\u0644\u062E\u0627\u062F\u0645 \u0648\u0627\u0644\u0639\u0645\u064A\u0644 \u0625\u0639\u062F\u0627\u062F\u064A\u0646 \u0645\u062D\u0644\u064A\u064A\u0646 \u0645\u062E\u062A\u0644\u0641\u064A\u0646.",
+    suggestion: "\u0645\u0631\u0651\u0631 `locale` \u0635\u0631\u064A\u062D\u064B\u0627 (\u0648\u0645\u0646\u0637\u0642\u0629 \u0632\u0645\u0646\u064A\u0629) \u0625\u0644\u0649 `Intl.NumberFormat` \u0623\u0648 `toLocaleString` \u0639\u0644\u0649 \u0627\u0644\u062E\u0627\u062F\u0645 \u0648\u0627\u0644\u0639\u0645\u064A\u0644 \u0645\u0639\u064B\u0627\u060C \u0623\u0648 \u0646\u0633\u0651\u0642 \u0627\u0644\u0642\u064A\u0645\u0629 \u0628\u0639\u062F \u0627\u0644\u062A\u0631\u0643\u064A\u0628 \u0644\u064A\u064F\u0633\u062A\u062E\u062F\u0645 \u0625\u0639\u062F\u0627\u062F \u0627\u0644\u0639\u0645\u064A\u0644 \u0648\u062D\u062F\u0647."
+  },
+  "locale-format.separators": {
+    explanation: "\u0646\u064F\u0633\u0651\u0642 \u0627\u0644\u0631\u0642\u0645 \u0646\u0641\u0633\u0647 \u0628\u0641\u0648\u0627\u0635\u0644 \u0622\u0644\u0627\u0641 \u0623\u0648 \u0641\u0648\u0627\u0635\u0644 \u0639\u0634\u0631\u064A\u0629 \u0645\u062E\u062A\u0644\u0641\u0629 \u0628\u064A\u0646 \u0627\u0644\u062E\u0627\u062F\u0645 \u0648\u0627\u0644\u0639\u0645\u064A\u0644 (\u0645\u062B\u0644 `1,234.56` \u0645\u0642\u0627\u0628\u0644 `1.234,56`).",
+    suggestion: "\u0645\u0631\u0651\u0631 \u0625\u0639\u062F\u0627\u062F\u064B\u0627 \u0645\u062D\u0644\u064A\u064B\u0627 \u0635\u0631\u064A\u062D\u064B\u0627 \u0625\u0644\u0649 `Intl.NumberFormat` \u0623\u0648 `toLocaleString` \u0639\u0644\u0649 \u0627\u0644\u062C\u0627\u0646\u0628\u064A\u0646 \u0644\u062A\u062A\u0637\u0627\u0628\u0642 \u0627\u0644\u0641\u0648\u0627\u0635\u0644."
+  },
+  "locale-format.date-order": {
+    explanation: "\u0639\u064F\u0631\u0636 \u0627\u0644\u062A\u0627\u0631\u064A\u062E \u0646\u0641\u0633\u0647 \u0628\u062A\u0631\u062A\u064A\u0628 \u062D\u0642\u0648\u0644 \u0645\u062E\u062A\u0644\u0641 (`MM/DD` \u0645\u0642\u0627\u0628\u0644 `DD/MM`) \u0628\u064A\u0646 \u0627\u0644\u062E\u0627\u062F\u0645 \u0648\u0627\u0644\u0639\u0645\u064A\u0644.",
+    suggestion: "\u0646\u0633\u0651\u0642 \u0627\u0644\u062A\u0648\u0627\u0631\u064A\u062E \u0628\u0625\u0639\u062F\u0627\u062F \u0645\u062D\u0644\u064A \u0648\u0645\u0646\u0637\u0642\u0629 \u0632\u0645\u0646\u064A\u0629 \u0635\u0631\u064A\u062D\u064A\u0646 \u0639\u0628\u0631 `Intl` \u0639\u0644\u0649 \u0627\u0644\u062C\u0627\u0646\u0628\u064A\u0646."
+  },
+  "browser-only-api": {
+    explanation: "\u0639\u0631\u0636 \u0627\u0644\u0639\u0645\u064A\u0644 \u0645\u062D\u062A\u0648\u0649 \u062A\u0631\u0643\u0647 \u0627\u0644\u062E\u0627\u062F\u0645 \u0641\u0627\u0631\u063A\u064B\u0627 \u2014 \u0648\u0647\u0630\u0647 \u0639\u0644\u0627\u0645\u0629 \u0639\u0644\u0649 \u0642\u0631\u0627\u0621\u0629 \u0648\u0627\u062C\u0647\u0629 \u0644\u0627 \u062A\u062A\u0648\u0641\u0631 \u0625\u0644\u0627 \u0641\u064A \u0627\u0644\u0645\u062A\u0635\u0641\u062D (`window` \u0623\u0648 `document` \u0623\u0648 `localStorage` \u0623\u0648 `navigator` \u0623\u0648 `matchMedia`) \u0623\u062B\u0646\u0627\u0621 \u0627\u0644\u0639\u0631\u0636.",
+    suggestion: "\u0627\u062C\u0639\u0644 \u0642\u0631\u0627\u0621\u0627\u062A \u0627\u0644\u0645\u062A\u0635\u0641\u062D \u0645\u0634\u0631\u0648\u0637\u0629 \u0628\u0639\u0644\u0627\u0645\u0629 \u062A\u0631\u0643\u064A\u0628 \u0623\u0648 \u0636\u0639\u0647\u0627 \u062F\u0627\u062E\u0644 `useEffect`\u060C \u0623\u0648 \u0627\u0633\u062A\u062E\u062F\u0645 `useSyncExternalStore` \u0645\u0639 \u0644\u0642\u0637\u0629 \u0644\u0644\u062E\u0627\u062F\u0645 \u0644\u064A\u0637\u0627\u0628\u0642 \u0623\u0648\u0644 \u0639\u0631\u0636 \u0639\u0644\u0649 \u0627\u0644\u0639\u0645\u064A\u0644 \u0645\u0627 \u0639\u0631\u0636\u0647 \u0627\u0644\u062E\u0627\u062F\u0645."
+  },
+  "viewport-branching": {
+    explanation: "\u0623\u064F\u0636\u064A\u0641\u062A \u0634\u062C\u0631\u0629 \u0641\u0631\u0639\u064A\u0629 \u0643\u0627\u0645\u0644\u0629 \u0623\u0648 \u062D\u064F\u0630\u0641\u062A \u0623\u0648 \u0627\u0633\u062A\u064F\u0628\u062F\u0644\u062A \u0628\u064A\u0646 \u0627\u0644\u062E\u0627\u062F\u0645 \u0648\u0627\u0644\u0639\u0645\u064A\u0644 \u2014 \u063A\u0627\u0644\u0628\u064B\u0627 \u0628\u0633\u0628\u0628 \u0641\u062D\u0635 \u0641\u064A JavaScript \u0644\u0639\u0631\u0636 \u0627\u0644\u0634\u0627\u0634\u0629 \u064A\u0641\u0631\u0651\u0639 \u0627\u0644\u0634\u062C\u0631\u0629 \u0641\u064A \u0623\u0648\u0644 \u0639\u0631\u0636.",
+    suggestion: "\u0627\u0639\u0631\u0636 \u0627\u0644\u0641\u0631\u0639\u064A\u0646 \u0648\u0628\u062F\u0651\u0644 \u0628\u064A\u0646\u0647\u0645\u0627 \u0628\u0627\u0633\u062A\u0639\u0644\u0627\u0645\u0627\u062A \u0627\u0644\u0648\u0633\u0627\u0626\u0637 \u0641\u064A CSS \u0639\u0646\u062F \u0623\u0648\u0644 \u0631\u0633\u0645 \u0628\u062F\u0644 \u0627\u0644\u062A\u0641\u0631\u064A\u0639 \u0641\u064A JavaScript\u060C \u0623\u0648 \u0623\u062C\u0651\u0644 \u0627\u0644\u0641\u0631\u0639 \u0627\u0644\u0645\u0639\u062A\u0645\u062F \u0639\u0644\u0649 JavaScript \u0625\u0644\u0649 \u0645\u0627 \u0628\u0639\u062F \u0627\u0644\u062A\u0631\u0643\u064A\u0628."
+  },
+  "invalid-html-nesting": {
+    explanation: "\u0646\u064F\u0642\u0644\u062A \u0639\u0642\u062F\u0629 \u0623\u0648 \u0623\u064F\u062E\u0631\u062C\u062A \u0645\u0646 \u0645\u0643\u0627\u0646\u0647\u0627 \u0644\u0623\u0646 \u062A\u0631\u0645\u064A\u0632 HTML \u063A\u064A\u0631 \u0635\u0627\u0644\u062D (\u0645\u062B\u0644 `<div>` \u062F\u0627\u062E\u0644 `<p>`\u060C \u0623\u0648 `<a>` \u062F\u0627\u062E\u0644 `<a>`). \u064A\u064F\u0635\u0644\u062D \u0627\u0644\u0645\u062A\u0635\u0641\u062D DOM \u0627\u0644\u0642\u0627\u062F\u0645 \u0645\u0646 \u0627\u0644\u062E\u0627\u062F\u0645\u060C \u0641\u0644\u0627 \u064A\u0639\u0648\u062F \u0645\u0637\u0627\u0628\u0642\u064B\u0627 \u0644\u0645\u0627 \u064A\u062A\u0648\u0642\u0639\u0647 React.",
+    suggestion: "\u0635\u062D\u0651\u062D \u0635\u0644\u0627\u062D\u064A\u0629 \u0627\u0644\u062A\u0631\u0645\u064A\u0632: \u0644\u0627 \u064A\u0645\u0643\u0646 \u0648\u0636\u0639 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0643\u062A\u0644\u064A\u0629 \u062F\u0627\u062E\u0644 `<p>`\u060C \u0648\u0644\u0627 \u064A\u0645\u0643\u0646 \u062A\u062F\u0627\u062E\u0644 \u0627\u0644\u0631\u0648\u0627\u0628\u0637. \u0627\u0633\u062A\u0628\u062F\u0644 \u0627\u0644\u0639\u0646\u0635\u0631 \u0627\u0644\u0623\u0628 \u063A\u064A\u0631 \u0627\u0644\u0635\u0627\u0644\u062D \u0628\u0640 `<div>` \u0623\u0648 \u0623\u0639\u062F \u0647\u064A\u0643\u0644\u0629 \u0627\u0644\u0634\u062C\u0631\u0629."
+  },
+  "whitespace-minification": {
+    explanation: "\u0627\u0644\u0627\u062E\u062A\u0644\u0627\u0641 \u0641\u064A \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062A \u0627\u0644\u0628\u064A\u0636\u0627\u0621 \u0641\u0642\u0637 \u2014 \u0627\u0644\u0646\u0635 \u0645\u062A\u0637\u0627\u0628\u0642 \u0628\u0627\u0633\u062A\u062B\u0646\u0627\u0621 \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062A \u0648\u0627\u0644\u0623\u0633\u0637\u0631 \u0627\u0644\u062C\u062F\u064A\u062F\u0629. \u0639\u0644\u0649 \u0627\u0644\u0623\u0631\u062C\u062D \u0636\u063A\u0637 \u0645\u064F\u0635\u063A\u0651\u0631 HTML \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062A \u062D\u0648\u0644 \u062C\u0630\u0631 \u0627\u0644\u0640 Hydration \u0628\u0637\u0631\u064A\u0642\u0629 \u0645\u062E\u062A\u0644\u0641\u0629 \u0639\u0646 React.",
+    suggestion: "\u0631\u0627\u062C\u0639 \u0625\u0639\u062F\u0627\u062F\u0627\u062A \u0645\u064F\u0635\u063A\u0651\u0631 HTML (\u0645\u062B\u0644 `conservativeCollapse`) \u062D\u0648\u0644 \u062C\u0630\u0631 \u0627\u0644\u062A\u0637\u0628\u064A\u0642\u060C \u0623\u0648 \u062A\u062C\u0646\u0651\u0628 \u062A\u0635\u063A\u064A\u0631 \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062A \u062F\u0627\u062E\u0644 \u0627\u0644\u062A\u0631\u0645\u064A\u0632 \u0627\u0644\u0630\u064A \u064A\u0645\u0631 \u0628\u0627\u0644\u0640 Hydration."
+  },
+  "third-party-dom-mutation.extension-attribute": {
+    explanation: "\u062D\u0642\u0646 \u0627\u0645\u062A\u062F\u0627\u062F \u0645\u062A\u0635\u0641\u062D \u0623\u0648 \u0633\u0643\u0631\u0628\u062A \u062E\u0627\u0631\u062C\u064A (\u0645\u062B\u0644 Grammarly \u0623\u0648 ColorZilla) \u0627\u0644\u0633\u0645\u0629 `{attribute}` \u0642\u0628\u0644 \u0627\u0644\u0640 Hydration\u060C \u0641\u0644\u0645 \u064A\u0639\u062F DOM \u0639\u0644\u0649 \u0627\u0644\u0639\u0645\u064A\u0644 \u0645\u0637\u0627\u0628\u0642\u064B\u0627 \u0644\u0644\u062E\u0627\u062F\u0645.",
+    suggestion: "\u063A\u0627\u0644\u0628\u064B\u0627 \u0645\u0627 \u064A\u0643\u0648\u0646 \u0647\u0630\u0627 \u063A\u064A\u0631 \u0645\u0624\u0630\u064D. \u0623\u0636\u0641 `suppressHydrationWarning` \u0625\u0644\u0649 \u0627\u0644\u0639\u0646\u0635\u0631 \u0627\u0644\u0645\u062A\u0623\u062B\u0631\u060C \u0623\u0648 \u0623\u062C\u0651\u0644 \u062A\u0647\u064A\u0626\u0629 \u0627\u0644\u0633\u0643\u0631\u0628\u062A \u0627\u0644\u062E\u0627\u0631\u062C\u064A \u0625\u0644\u0649 \u0645\u0627 \u0628\u0639\u062F \u0627\u0644\u0640 Hydration."
+  },
+  "third-party-dom-mutation.root-attribute": {
+    explanation: "\u0638\u0647\u0631\u062A \u0633\u0645\u0629 (`{attribute}`) \u0639\u0644\u0649 \u0639\u0646\u0635\u0631 \u062C\u0630\u0631\u064A \u0644\u0645 \u064A\u0631\u0633\u0644\u0647\u0627 \u0627\u0644\u062E\u0627\u062F\u0645 \u0623\u0628\u062F\u064B\u0627 \u2014 \u0648\u0647\u064A \u0639\u0644\u0627\u0645\u0629 \u0645\u0645\u064A\u0632\u0629 \u0644\u0627\u0645\u062A\u062F\u0627\u062F \u0623\u0648 \u0633\u0643\u0631\u0628\u062A \u062E\u0627\u0631\u062C\u064A \u0645\u0628\u0643\u0631 \u064A\u0639\u062F\u0651\u0644 DOM.",
+    suggestion: "\u0623\u0636\u0641 `suppressHydrationWarning` \u0625\u0644\u0649 \u0627\u0644\u0639\u0646\u0635\u0631 \u0627\u0644\u062C\u0630\u0631\u064A\u060C \u0623\u0648 \u0623\u062C\u0651\u0644 \u0627\u0644\u0633\u0643\u0631\u0628\u062A \u0627\u0644\u062E\u0627\u0631\u062C\u064A \u0625\u0644\u0649 \u0645\u0627 \u0628\u0639\u062F \u0627\u0644\u0640 Hydration."
+  },
+  "third-party-dom-mutation.injected-node": {
+    explanation: (p) => [
+      "\u062D\u0642\u0646 \u0633\u0643\u0631\u0628\u062A \u062E\u0627\u0631\u062C\u064A \u0623\u0648 \u0627\u0645\u062A\u062F\u0627\u062F \u0645\u062A\u0635\u0641\u062D \u0627\u0644\u0639\u0646\u0635\u0631 ",
+      code(param(p, "tag")),
+      " (\u0625\u0639\u0644\u0627\u0646\u0627\u062A \u0623\u0648 \u0646\u0627\u0641\u0630\u0629 \u0645\u0648\u0627\u0641\u0642\u0629 \u0623\u0648 \u062A\u062D\u0644\u064A\u0644\u0627\u062A \u0623\u0648 \u0645\u062D\u0627\u062F\u062B\u0629) \u0628\u0639\u062F \u0639\u0631\u0636 \u0627\u0644\u062E\u0627\u062F\u0645. \u0644\u064A\u0633 \u0647\u0630\u0627 \u062C\u0632\u0621\u064B\u0627 \u0645\u0646 \u0627\u0644\u0640 Hydration \u0641\u064A \u062A\u0637\u0628\u064A\u0642\u0643\u060C \u0644\u0630\u0627 \u0641\u0647\u0648 \u063A\u0627\u0644\u0628\u064B\u0627 \u0636\u062C\u064A\u062C \u063A\u064A\u0631 \u0645\u0624\u0630\u064D."
+    ],
+    suggestion: '\u0625\u0646 \u062D\u0630\u0651\u0631 React \u0645\u0646\u0647 \u0641\u0623\u0636\u0641 `suppressHydrationWarning` \u0625\u0644\u0649 \u0623\u0642\u0631\u0628 \u063A\u0644\u0627\u0641 \u0639\u064F\u0631\u0636 \u0639\u0644\u0649 \u0627\u0644\u062E\u0627\u062F\u0645\u060C \u0623\u0648 \u062D\u0645\u0651\u0644 \u0627\u0644\u0633\u0643\u0631\u0628\u062A \u0627\u0644\u062E\u0627\u0631\u062C\u064A \u0628\u0639\u062F \u0627\u0644\u0640 Hydration (\u0645\u062B\u0644 `<Script strategy="afterInteractive">` \u0641\u064A Next.js).'
+  },
+  "attribute-mismatch.class": {
+    explanation: (p) => [
+      "\u062A\u062E\u062A\u0644\u0641 ",
+      code("class"),
+      " \u0628\u064A\u0646 \u0627\u0644\u062E\u0627\u062F\u0645 \u0648\u0627\u0644\u0639\u0645\u064A\u0644",
+      ...classDetail(p, {
+        added: "\u0623\u064F\u0636\u064A\u0641 \u0639\u0644\u0649 \u0627\u0644\u0639\u0645\u064A\u0644: ",
+        removed: "\u0623\u064F\u0632\u064A\u0644 \u0639\u0644\u0649 \u0627\u0644\u0639\u0645\u064A\u0644: ",
+        listSeparator: "\u060C ",
+        partSeparator: "\u061B ",
+        open: " (",
+        close: ")"
+      }),
+      ". \u0637\u064F\u0628\u0651\u0642\u062A \u0641\u0626\u0629 CSS \u0628\u0634\u0643\u0644 \u0645\u0634\u0631\u0648\u0637 \u0639\u0644\u0649 \u0627\u0644\u0639\u0645\u064A\u0644 \u2014 \u063A\u0627\u0644\u0628\u064B\u0627 \u0628\u0633\u0628\u0628 \u0641\u062D\u0635 \u0644\u062D\u062C\u0645 \u0627\u0644\u0634\u0627\u0634\u0629 \u0623\u0648 \u0627\u0633\u062A\u0639\u0644\u0627\u0645 \u0648\u0633\u0627\u0626\u0637 \u0623\u0648 \u0633\u0645\u0629 (theme) \u0623\u0648 \u0639\u0644\u0627\u0645\u0629 \u0645\u064A\u0632\u0629 \u064A\u064F\u0646\u0641\u064E\u0651\u0630 \u0623\u062B\u0646\u0627\u0621 \u0623\u0648\u0644 \u0639\u0631\u0636."
+    ],
+    suggestion: "\u0627\u0639\u0631\u0636 \u0642\u064A\u0645\u0629 `className` \u0646\u0641\u0633\u0647\u0627 \u0639\u0644\u0649 \u0627\u0644\u062E\u0627\u062F\u0645 \u0648\u0641\u064A \u0623\u0648\u0644 \u0631\u0633\u0645 \u0639\u0644\u0649 \u0627\u0644\u0639\u0645\u064A\u0644. \u0627\u0646\u0642\u0644 \u0627\u0644\u0634\u0631\u0648\u0637 \u0627\u0644\u062E\u0627\u0635\u0629 \u0628\u0627\u0644\u0639\u0645\u064A\u0644 \u0625\u0644\u0649 `useEffect` \u0623\u0648 \u0639\u0644\u0627\u0645\u0629 \u062A\u0631\u0643\u064A\u0628\u060C \u0623\u0648 \u0646\u0641\u0651\u0630 \u0627\u0644\u062A\u063A\u064A\u064A\u0631 \u0627\u0644\u0628\u0635\u0631\u064A \u0628\u0627\u0633\u062A\u0639\u0644\u0627\u0645\u0627\u062A \u0627\u0644\u0648\u0633\u0627\u0626\u0637 \u0641\u064A CSS \u0628\u062F\u0644 \u062A\u0628\u062F\u064A\u0644 \u0627\u0644\u0641\u0626\u0629 \u0639\u0628\u0631 JavaScript."
+  },
+  "attribute-mismatch.style": {
+    explanation: "\u064A\u062E\u062A\u0644\u0641 `style` \u0627\u0644\u0645\u0636\u0645\u0651\u0646 \u0628\u064A\u0646 \u0627\u0644\u062E\u0627\u062F\u0645 \u0648\u0627\u0644\u0639\u0645\u064A\u0644 \u2014 \u062D\u064F\u0633\u0628 \u0646\u0645\u0637 \u0645\u0636\u0645\u0651\u0646 \u0645\u0646 \u062D\u0627\u0644\u0629 \u062E\u0627\u0635\u0629 \u0628\u0627\u0644\u0639\u0645\u064A\u0644 (\u062D\u062C\u0645 \u0627\u0644\u0634\u0627\u0634\u0629 \u0623\u0648 \u0627\u0644\u0633\u0645\u0629 \u0623\u0648 \u0645\u0648\u0636\u0639 \u0627\u0644\u062A\u0645\u0631\u064A\u0631) \u0623\u062B\u0646\u0627\u0621 \u0627\u0644\u0639\u0631\u0636.",
+    suggestion: "\u0627\u062D\u0633\u0628 \u0627\u0644\u0646\u0645\u0637 \u0628\u0639\u062F \u0627\u0644\u062A\u0631\u0643\u064A\u0628 (`useEffect`) \u0644\u064A\u0637\u0627\u0628\u0642 \u0623\u0648\u0644 \u0639\u0631\u0636 \u0639\u0644\u0649 \u0627\u0644\u0639\u0645\u064A\u0644 \u0645\u0627 \u0639\u0631\u0636\u0647 \u0627\u0644\u062E\u0627\u062F\u0645\u060C \u0623\u0648 \u0627\u0646\u0642\u0644\u0647 \u0625\u0644\u0649 \u0641\u0626\u0629 CSS \u0623\u0648 \u0627\u0633\u062A\u0639\u0644\u0627\u0645 \u0648\u0633\u0627\u0626\u0637."
+  },
+  "attribute-mismatch.generic": {
+    explanation: "\u062A\u062E\u062A\u0644\u0641 \u0627\u0644\u0633\u0645\u0629 `{attribute}` \u0628\u064A\u0646 \u0627\u0644\u062E\u0627\u062F\u0645 (`{server}`) \u0648\u0627\u0644\u0639\u0645\u064A\u0644 (`{client}`) \u2014 \u0627\u0634\u062A\u064F\u0642\u0651\u062A \u0642\u064A\u0645\u062A\u0647\u0627 \u0645\u0646 \u0634\u064A\u0621 \u064A\u062E\u062A\u0644\u0641 \u0628\u064A\u0646 \u0627\u0644\u062E\u0627\u062F\u0645 \u0648\u0623\u0648\u0644 \u0639\u0631\u0636 \u0639\u0644\u0649 \u0627\u0644\u0639\u0645\u064A\u0644.",
+    suggestion: "\u0627\u062C\u0639\u0644 \u0642\u064A\u0645\u0629 \u0627\u0644\u0633\u0645\u0629 \u062D\u062A\u0645\u064A\u0629 \u0639\u0644\u0649 \u0627\u0644\u062E\u0627\u062F\u0645 \u0648\u0627\u0644\u0639\u0645\u064A\u0644\u060C \u0623\u0648 \u0639\u064A\u0651\u0646\u0647\u0627 \u0628\u0639\u062F \u0627\u0644\u062A\u0631\u0643\u064A\u0628 \u0644\u064A\u0637\u0627\u0628\u0642 \u0623\u0648\u0644 \u0639\u0631\u0636 \u0639\u0644\u0649 \u0627\u0644\u0639\u0645\u064A\u0644 HTML \u0627\u0644\u0642\u0627\u062F\u0645 \u0645\u0646 \u0627\u0644\u062E\u0627\u062F\u0645."
+  },
+  unknown: {
+    explanation: "\u0627\u0643\u062A\u064F\u0634\u0641 \u0639\u062F\u0645 \u062A\u0637\u0627\u0628\u0642 \u0641\u064A \u0627\u0644\u0640 Hydration \u0644\u0643\u0646 \u062A\u0639\u0630\u0651\u0631\u062A \u0645\u0637\u0627\u0628\u0642\u062A\u0647 \u0645\u0639 \u0633\u0628\u0628 \u0645\u0639\u0631\u0648\u0641. \u0627\u0641\u062D\u0635 \u0642\u064A\u0645\u062A\u064E\u064A \u0627\u0644\u062E\u0627\u062F\u0645 \u0648\u0627\u0644\u0639\u0645\u064A\u0644 \u0623\u0639\u0644\u0627\u0647.",
+    suggestion: "\u0642\u0627\u0631\u0646 \u0628\u064A\u0646 \u0642\u064A\u0645\u062A\u064E\u064A \u0627\u0644\u062E\u0627\u062F\u0645 \u0648\u0627\u0644\u0639\u0645\u064A\u0644. \u0645\u0646 \u0627\u0644\u0623\u0633\u0628\u0627\u0628 \u0627\u0644\u0634\u0627\u0626\u0639\u0629: \u0627\u0644\u0642\u064A\u0645 \u063A\u064A\u0631 \u0627\u0644\u062D\u062A\u0645\u064A\u0629\u060C \u0648\u0627\u0644\u062A\u0648\u0627\u0631\u064A\u062E \u0648\u0627\u0644\u0625\u0639\u062F\u0627\u062F\u0627\u062A \u0627\u0644\u0645\u062D\u0644\u064A\u0629\u060C \u0648\u0627\u0644\u0648\u0627\u062C\u0647\u0627\u062A \u0627\u0644\u062E\u0627\u0635\u0629 \u0628\u0627\u0644\u0645\u062A\u0635\u0641\u062D \u0627\u0644\u0645\u0633\u062A\u062E\u062F\u0645\u0629 \u0623\u062B\u0646\u0627\u0621 \u0627\u0644\u0639\u0631\u0636."
+  },
+  "unknown.no-location": {
+    explanation: "\u0623\u0628\u0644\u063A React \u0628\u0641\u0634\u0644 \u0627\u0644\u0640 Hydration \u062F\u0648\u0646 \u0623\u0646 \u064A\u062D\u062F\u062F \u0627\u0644\u0639\u0642\u062F\u0629 \u0627\u0644\u0645\u062E\u062A\u0644\u0641\u0629\u060C \u0648\u0644\u0645 \u064A\u062C\u062F \u0641\u062D\u0635 DOM \u0623\u064A \u0627\u062E\u062A\u0644\u0627\u0641 \u064A\u0645\u0643\u0646 \u0627\u0644\u0625\u0634\u0627\u0631\u0629 \u0625\u0644\u064A\u0647.",
+    suggestion: "\u062A\u0623\u0643\u062F \u0645\u0646 \u0648\u062C\u0648\u062F `<HydrationSnapshotScript>` (\u0623\u0648 \u0633\u0643\u0631\u0628\u062A \u0627\u0644\u0644\u0642\u0637\u0629 \u0627\u0644\u064A\u062F\u0648\u064A) \u062F\u0627\u062E\u0644 `<head>` \u0644\u064A\u062A\u0645\u0643\u0646 \u0641\u062D\u0635 DOM \u0645\u0646 \u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0639\u0642\u062F\u0629\u060C \u0648\u0627\u0642\u0631\u0623 \u062A\u062D\u0630\u064A\u0631 React \u0627\u0644\u0643\u0627\u0645\u0644 \u0641\u064A \u0648\u062D\u062F\u0629 \u062A\u062D\u0643\u0645 \u0627\u0644\u0645\u062A\u0635\u0641\u062D."
+  }
+};
+var arPlural;
+function arabicPlural(count) {
+  if (arPlural === void 0) {
+    arPlural = typeof Intl !== "undefined" && typeof Intl.PluralRules === "function" ? new Intl.PluralRules("ar") : null;
+  }
+  return arPlural?.select(count) ?? "other";
+}
+function arabicIssues(count) {
+  switch (arabicPlural(count)) {
+    case "zero":
+      return "\u0644\u0627 \u0645\u0634\u0643\u0644\u0627\u062A";
+    case "one":
+      return "\u0645\u0634\u0643\u0644\u0629 \u0648\u0627\u062D\u062F\u0629";
+    case "two":
+      return "\u0645\u0634\u0643\u0644\u062A\u0627\u0646";
+    case "few":
+      return `${count} \u0645\u0634\u0643\u0644\u0627\u062A`;
+    default:
+      return `${count} \u0645\u0634\u0643\u0644\u0629`;
+  }
+}
+var AR = {
+  dir: "rtl",
+  title: "\u0639\u062F\u0645 \u062A\u0637\u0627\u0628\u0642 \u0641\u064A \u0627\u0644\u0640 Hydration",
+  dialogLabel: "\u062A\u0634\u062E\u064A\u0635 \u0639\u062F\u0645 \u062A\u0637\u0627\u0628\u0642 \u0627\u0644\u0640 Hydration",
+  dismiss: "\u0625\u063A\u0644\u0627\u0642",
+  dismissLabel: "\u0625\u063A\u0644\u0627\u0642 \u0644\u0648\u062D\u0629 \u0627\u0644\u062A\u0634\u062E\u064A\u0635",
+  hintDismissLabel: "\u0625\u062E\u0641\u0627\u0621 \u0627\u0644\u062A\u0644\u0645\u064A\u062D",
+  server: "\u0627\u0644\u062E\u0627\u062F\u0645",
+  client: "\u0627\u0644\u0639\u0645\u064A\u0644",
+  fix: "\u0627\u0644\u062D\u0644:",
+  // The docs are only written in English, so say so rather than surprise.
+  learnMore: "\u0627\u0639\u0631\u0641 \u0627\u0644\u0645\u0632\u064A\u062F (\u0628\u0627\u0644\u0625\u0646\u062C\u0644\u064A\u0632\u064A\u0629) \u2190",
+  none: "(\u0644\u0627 \u0634\u064A\u0621)",
+  empty: "(\u0641\u0627\u0631\u063A)",
+  fallbackCategory: "\u0639\u062F\u0645 \u062A\u0637\u0627\u0628\u0642",
+  categories: {
+    "non-deterministic-value": "\u0642\u064A\u0645\u0629 \u063A\u064A\u0631 \u062D\u062A\u0645\u064A\u0629",
+    "date-time": "\u0627\u0644\u062A\u0627\u0631\u064A\u062E / \u0627\u0644\u0648\u0642\u062A",
+    "locale-format": "\u062A\u0646\u0633\u064A\u0642 \u0627\u0644\u0644\u063A\u0629 \u0648\u0627\u0644\u0645\u0646\u0637\u0642\u0629",
+    "browser-only-api": "\u0648\u0627\u062C\u0647\u0629 \u062E\u0627\u0635\u0629 \u0628\u0627\u0644\u0645\u062A\u0635\u0641\u062D",
+    "viewport-branching": "\u062A\u0641\u0631\u0651\u0639 \u062D\u0633\u0628 \u062D\u062C\u0645 \u0627\u0644\u0634\u0627\u0634\u0629",
+    "invalid-html-nesting": "\u062A\u062F\u0627\u062E\u0644 HTML \u063A\u064A\u0631 \u0635\u0627\u0644\u062D",
+    "whitespace-minification": "\u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062A / \u0627\u0644\u062A\u0635\u063A\u064A\u0631",
+    "third-party-dom-mutation": "\u062A\u0639\u062F\u064A\u0644 DOM \u0645\u0646 \u0637\u0631\u0641 \u062E\u0627\u0631\u062C\u064A",
+    "attribute-mismatch": "\u0627\u062E\u062A\u0644\u0627\u0641 \u0641\u064A \u0627\u0644\u0633\u0645\u0629",
+    unknown: "\u063A\u064A\u0631 \u0645\u0639\u0631\u0648\u0641"
+  },
+  messages: AR_MESSAGES,
+  hint: (count) => `\u2193 ${arabicIssues(count)} \u2014 \u0645\u0631\u0651\u0631 \u0644\u0631\u0624\u064A\u0629 \u0627\u0644\u0643\u0644`
+};
+var OVERLAY_STRINGS = {
+  en: EN,
+  ar: AR
+};
+var ARABIC_LANG = /^(?:ar|arb|arz|ary|arq|aeb|apc|ajp|acm|afb|ars|acw|ayl|apd)(?:-|$)/i;
+function resolveLocale(preference) {
+  if (preference === "en" || preference === "ar") return preference;
+  if (preference != null && preference !== "auto") return "en";
+  if (typeof document === "undefined") return "en";
+  const lang = document.documentElement.getAttribute("lang") ?? "";
+  return ARABIC_LANG.test(lang.trim()) ? "ar" : "en";
+}
+
+// src/react/overlay.ts
+var CONTAINER_ID = "why-hydration-overlay";
+var ARABIC_FACES = 'Tahoma, "Noto Sans Arabic", "Geeza Pro", "Segoe UI"';
+var UI_FONT = `ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, ${ARABIC_FACES}, sans-serif`;
+var MONO_FONT = "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+var STYLES = `
+:host {
+  all: initial;
+  /* The "all" shorthand deliberately excludes direction/unicode-bidi (CSS
+     spec), so these are set explicitly: the host page's own dir must never
+     leak in. The panel below then takes its direction from the overlay's
+     language, set inside this shadow root where no page style can reach it. */
+  direction: ltr;
+  unicode-bidi: isolate;
+}
+* { box-sizing: border-box; }
+.wh-panel {
+  position: fixed;
+  z-index: 2147483647;
+  width: min(420px, calc(100vw - 32px));
+  max-height: min(70vh, 640px);
+  display: flex;
+  flex-direction: column;
+  font: 13px/1.5 ${UI_FONT};
+  color: #e5e7eb;
+  background: #0b0f17;
+  border: 1px solid #1f2937;
+  border-radius: 12px;
+  box-shadow: 0 12px 40px rgba(0,0,0,.5);
+  overflow: hidden;
+  text-align: start;
+}
+.wh-panel[dir="ltr"] { direction: ltr; }
+/* Arabic reads poorly at Latin sizes, and letter-spacing or uppercasing breaks
+   the joining between its letters, so the right-to-left panel resets both. */
+.wh-panel[dir="rtl"] { direction: rtl; font-size: 14px; line-height: 1.7; }
+.wh-panel[dir="rtl"] .wh-side .wh-label { text-transform: none; letter-spacing: 0; font-size: 11px; }
+.wh-bottom-right { bottom: 16px; right: 16px; }
+.wh-bottom-left  { bottom: 16px; left: 16px; }
+.wh-top-right    { top: 16px; right: 16px; }
+.wh-top-left     { top: 16px; left: 16px; }
+.wh-header {
+  display: flex; align-items: center; gap: 8px;
+  padding: 10px 12px;
+  background: linear-gradient(180deg, #151b26, #0d1220);
+  border-bottom: 1px solid #1f2937;
+}
+.wh-dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; flex: none; }
+.wh-title { font-weight: 600; color: #f3f4f6; }
+.wh-count {
+  margin-inline-start: auto; font-size: 11px; color: #9ca3af;
+  background: #111827; border: 1px solid #1f2937; border-radius: 999px;
+  padding: 1px 8px;
+}
+.wh-btn {
+  appearance: none; border: 1px solid #1f2937; background: #111827;
+  color: #9ca3af; border-radius: 6px; cursor: pointer;
+  font: inherit; font-size: 12px; padding: 3px 8px;
+}
+.wh-btn:hover { color: #f3f4f6; border-color: #374151; }
+.wh-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
+.wh-card { flex: 0 0 auto; border: 1px solid #1f2937; border-radius: 10px; background: #0f1521; overflow: hidden; }
+.wh-card-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
+.wh-cat { font-weight: 600; color: #fbbf24; font-size: 12px; }
+.wh-conf { margin-inline-start: auto; font-size: 11px; color: #6b7280; unicode-bidi: isolate; }
+.wh-body { padding: 0 10px 10px; }
+.wh-where { font-size: 11px; color: #9ca3af; overflow-wrap: anywhere; margin-bottom: 4px; }
+/* Selectors, component names, file paths and attribute names are code: they
+   stay left-to-right and isolated, or an RTL line mirrors their brackets and
+   reorders their segments. */
+.wh-where code, .wh-comp, .wh-attr { unicode-bidi: isolate; font-family: ${MONO_FONT}; }
+.wh-where code { color: #93c5fd; }
+.wh-comp { color: #f3f4f6; font-weight: 600; }
+.wh-attr { color: #c4b5fd; }
+.wh-loc { font-size: 11px; color: #7dd3fc; overflow-wrap: anywhere; margin-bottom: 8px; font-family: ${MONO_FONT}; unicode-bidi: isolate; text-align: start; }
+.wh-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
+.wh-side { border-radius: 8px; padding: 6px 8px; font-size: 11px; min-width: 0; }
+.wh-server { background: rgba(244,63,94,.08); border: 1px solid rgba(244,63,94,.35); }
+.wh-client { background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.35); }
+.wh-side .wh-label { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
+.wh-server .wh-label { color: #fb7185; }
+.wh-client .wh-label { color: #4ade80; }
+/* A value is page data in any script. Each line takes its direction from its
+   own first strong character, so Arabic values read right-to-left with their
+   punctuation at the end even inside the English panel, and English values
+   stay left-to-right inside the Arabic one. Whitespace is preserved: a diff
+   viewer that collapses spaces hides whitespace-only mismatches. */
+.wh-value {
+  display: block; unicode-bidi: plaintext; text-align: start;
+  white-space: pre-wrap; overflow-wrap: anywhere;
+  font-family: ${MONO_FONT};
+}
+.wh-value.wh-prose { font-family: ${UI_FONT}; font-size: 12px; }
+.wh-empty-value { color: #6b7280; font-style: italic; font-family: ${UI_FONT}; }
+.wh-invisible {
+  display: inline-block; margin: 0 1px; padding: 0 3px; border-radius: 3px;
+  font: 600 8px/1.6 ${MONO_FONT}; letter-spacing: .02em; vertical-align: 1px;
+  color: #fde68a; background: rgba(245,158,11,.18); border: 1px solid rgba(245,158,11,.45);
+  unicode-bidi: isolate; direction: ltr;
+}
+.wh-explain { color: #cbd5e1; margin-bottom: 8px; }
+.wh-fix { color: #e5e7eb; background: #111827; border-inline-start: 3px solid #22c55e; border-radius: 4px; padding: 6px 8px; }
+.wh-fix strong { color: #86efac; }
+.wh-code {
+  font-family: ${MONO_FONT}; font-size: .92em; color: #e2e8f0;
+  background: rgba(148,163,184,.14); border-radius: 4px; padding: 0 3px;
+  unicode-bidi: isolate; overflow-wrap: anywhere;
+}
+.wh-param { unicode-bidi: isolate; color: #f8fafc; }
+.wh-docs { display: inline-block; margin-top: 6px; color: #60a5fa; text-decoration: none; font-size: 11px; }
+.wh-docs:hover { text-decoration: underline; }
+.wh-hint {
+  display: none; align-items: center; gap: 8px;
+  padding: 7px 12px; font-size: 11px; color: #cbd5e1;
+  background: #0d1220; border-top: 1px solid #1f2937;
+  animation: wh-fade .2s ease;
+}
+.wh-hint.wh-show { display: flex; }
+.wh-hint-text { flex: 1; }
+.wh-hint-x {
+  appearance: none; border: 0; background: transparent; cursor: pointer;
+  color: #9ca3af; font-size: 14px; line-height: 1; padding: 2px 4px;
+}
+.wh-hint-x:hover { color: #f3f4f6; }
+@keyframes wh-fade { from { opacity: 0 } to { opacity: 1 } }
+@media (max-width: 420px) {
+  .wh-panel { width: auto; max-height: min(80vh, 640px); }
+  .wh-bottom-right, .wh-bottom-left { left: 8px; right: 8px; }
+  .wh-top-right, .wh-top-left { left: 8px; right: 8px; }
+  .wh-diff { grid-template-columns: 1fr; }
+}
+`;
+function el(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
+function shortenPath(file) {
+  const normalized = file.replace(/\\/g, "/");
+  const marker = normalized.match(/(?:^|\/)(?:src|app|pages|components)\//);
+  if (marker && marker.index != null) {
+    return normalized.slice(marker.index).replace(/^\//, "");
+  }
+  const parts = normalized.split("/");
+  return parts.slice(-2).join("/");
+}
+var INVISIBLE = {
+  "\u200B": "ZWSP",
+  "\u200E": "LRM",
+  "\u200F": "RLM",
+  "\u061C": "ALM",
+  "\u202A": "LRE",
+  "\u202B": "RLE",
+  "\u202C": "PDF",
+  "\u202D": "LRO",
+  "\u202E": "RLO",
+  "\u2066": "LRI",
+  "\u2067": "RLI",
+  "\u2068": "FSI",
+  "\u2069": "PDI",
+  "\uFEFF": "BOM"
+};
+var INVISIBLE_RE = /[\u200b\u200e\u200f\u061c\u202a-\u202e\u2066-\u2069\ufeff]/;
+var INVISIBLE_SPLIT = /([\u200b\u200e\u200f\u061c\u202a-\u202e\u2066-\u2069\ufeff])/;
+var RTL_SCRIPT = /[֐-ࣿיִ-﷿ﹰ-ﻼ]/;
+function renderValue(value, strings) {
+  if (value == null || value === "") {
+    return el(
+      "span",
+      "wh-empty-value",
+      value === "" ? strings.empty : strings.none
+    );
+  }
+  const block = el("div", "wh-value");
+  block.dir = "auto";
+  if (RTL_SCRIPT.test(value)) block.classList.add("wh-prose");
+  if (!INVISIBLE_RE.test(value)) {
+    block.textContent = value;
+    return block;
+  }
+  for (const part of value.split(INVISIBLE_SPLIT)) {
+    if (!part) continue;
+    const name = INVISIBLE[part];
+    if (!name) {
+      block.append(part);
+      continue;
+    }
+    const badge = el("span", "wh-invisible", name);
+    const cp = part.codePointAt(0).toString(16).toUpperCase().padStart(4, "0");
+    badge.title = `U+${cp} ${name}`;
+    block.appendChild(badge);
+  }
+  return block;
+}
+function renderSegments(segments) {
+  const out = document.createDocumentFragment();
+  for (const s of segments) {
+    if (typeof s === "string") {
+      out.append(s);
+    } else if ("code" in s) {
+      const c = el("code", "wh-code", s.code);
+      c.dir = "auto";
+      out.appendChild(c);
+    } else {
+      const v = el("bdi", "wh-param", s.value);
+      out.appendChild(v);
+    }
+  }
+  return out;
+}
+function splitCode(text) {
+  return text.split("`").map((part, i) => i % 2 === 1 ? { code: part } : part).filter((s) => s !== "");
+}
+function causeText(cause, field, strings) {
+  const id = cause.messageId;
+  const params = cause.params ?? {};
+  if (id && Object.prototype.hasOwnProperty.call(EN_MESSAGES, id)) {
+    const english = plainText(renderMessage(EN_MESSAGES[id][field], params));
+    if (english === cause[field]) {
+      return {
+        segments: renderMessage(strings.messages[id][field], params),
+        translated: true
+      };
+    }
+  }
+  return { segments: splitCode(cause[field]), translated: false };
+}
+function renderCard(report, strings) {
+  const card = el("div", "wh-card");
+  const head = el("div", "wh-card-head");
+  head.appendChild(
+    el(
+      "span",
+      "wh-cat",
+      strings.categories[report.cause.category] ?? strings.fallbackCategory
+    )
+  );
+  const conf = el(
+    "span",
+    "wh-conf",
+    `${Math.round(report.cause.confidence * 100)}%`
+  );
+  conf.dir = "ltr";
+  head.appendChild(conf);
+  card.appendChild(head);
+  const body = el("div", "wh-body");
+  const where = el("div", "wh-where");
+  const name = report.component ?? report.node.tagName?.toLowerCase();
+  if (name) {
+    const comp = el(
+      "bdi",
+      report.component ? "wh-comp" : "wh-attr",
+      `<${name}>`
+    );
+    comp.dir = "ltr";
+    where.append(comp, " \xB7 ");
+  }
+  const path = el("code", void 0, report.node.path);
+  path.dir = "ltr";
+  where.appendChild(path);
+  if (report.node.attribute) {
+    const attr = el("bdi", "wh-attr", `@${report.node.attribute}`);
+    attr.dir = "ltr";
+    where.append(" \xB7 ", attr);
+  }
+  body.appendChild(where);
+  if (report.location?.file) {
+    const file = shortenPath(report.location.file);
+    const loc = el(
+      "div",
+      "wh-loc",
+      report.location.line ? `${file}:${report.location.line}` : file
+    );
+    loc.dir = "ltr";
+    body.appendChild(loc);
+  }
+  const diff = el("div", "wh-diff");
+  const server = el("div", "wh-side wh-server");
+  server.appendChild(el("span", "wh-label", strings.server));
+  server.appendChild(renderValue(report.server, strings));
+  const client = el("div", "wh-side wh-client");
+  client.appendChild(el("span", "wh-label", strings.client));
+  client.appendChild(renderValue(report.client, strings));
+  diff.appendChild(server);
+  diff.appendChild(client);
+  body.appendChild(diff);
+  const explanation = causeText(report.cause, "explanation", strings);
+  const explain = el("div", "wh-explain");
+  explain.dir = explanation.translated ? strings.dir : "auto";
+  explain.appendChild(renderSegments(explanation.segments));
+  body.appendChild(explain);
+  const suggestion = causeText(report.cause, "suggestion", strings);
+  const fix = el("div", "wh-fix");
+  fix.appendChild(el("strong", void 0, strings.fix));
+  fix.append(" ");
+  const fixText = el("span");
+  fixText.dir = suggestion.translated ? strings.dir : "auto";
+  fixText.appendChild(renderSegments(suggestion.segments));
+  fix.appendChild(fixText);
+  body.appendChild(fix);
+  if (report.cause.docsUrl && /^https?:\/\//i.test(report.cause.docsUrl)) {
+    const a = el("a", "wh-docs", strings.learnMore);
+    a.href = report.cause.docsUrl;
+    a.target = "_blank";
+    a.rel = "noreferrer noopener";
+    body.appendChild(a);
+  }
+  card.appendChild(body);
+  return card;
+}
+function createOverlay(options = {}) {
+  const position = options.position ?? "bottom-right";
+  let host = null;
+  let listEl = null;
+  let countEl = null;
+  let hintEl = null;
+  let hintTextEl = null;
+  let hintCheckTimer = null;
+  let hintDismissed = false;
+  let count = 0;
+  let strings = OVERLAY_STRINGS.en;
+  function ensureMounted() {
+    if (host) return;
+    document.getElementById(CONTAINER_ID)?.remove();
+    const locale = resolveLocale(options.locale);
+    strings = OVERLAY_STRINGS[locale];
+    host = document.createElement("div");
+    host.id = CONTAINER_ID;
+    host.setAttribute("data-why-hydration", "overlay");
+    host.setAttribute("aria-hidden", "false");
+    host.setAttribute("dir", strings.dir);
+    host.setAttribute("lang", locale);
+    const shadow = host.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = STYLES;
+    shadow.appendChild(style);
+    const panel = el("div", `wh-panel wh-${position}`);
+    panel.setAttribute("dir", strings.dir);
+    panel.setAttribute("lang", locale);
+    panel.setAttribute("role", "dialog");
+    panel.setAttribute("aria-label", strings.dialogLabel);
+    const header = el("div", "wh-header");
+    header.appendChild(el("span", "wh-dot"));
+    header.appendChild(el("span", "wh-title", strings.title));
+    countEl = el("span", "wh-count", "0");
+    countEl.dir = "ltr";
+    header.appendChild(countEl);
+    const close = el("button", "wh-btn", strings.dismiss);
+    close.setAttribute("aria-label", strings.dismissLabel);
+    close.addEventListener("click", () => destroy());
+    header.appendChild(close);
+    panel.appendChild(header);
+    listEl = el("div", "wh-list");
+    panel.appendChild(listEl);
+    hintEl = el("div", "wh-hint");
+    hintTextEl = el("span", "wh-hint-text");
+    hintEl.appendChild(hintTextEl);
+    const hintX = el("button", "wh-hint-x", "\u2715");
+    hintX.setAttribute("aria-label", strings.hintDismissLabel);
+    hintX.addEventListener("click", () => dismissHint());
+    hintEl.appendChild(hintX);
+    panel.appendChild(hintEl);
+    shadow.appendChild(panel);
+    document.body.appendChild(host);
+    host.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") destroy();
+    });
+  }
+  function dismissHint() {
+    hintDismissed = true;
+    hintEl?.classList.remove("wh-show");
+  }
+  function updateHint() {
+    if (!hintEl || !hintTextEl || hintDismissed) return;
+    hintTextEl.textContent = strings.hint(count);
+    if (count >= 4) hintEl.classList.add("wh-show");
+  }
+  function destroy() {
+    if (hintCheckTimer) clearTimeout(hintCheckTimer);
+    hintCheckTimer = null;
+    host?.remove();
+    host = null;
+    listEl = null;
+    countEl = null;
+    hintEl = null;
+    hintTextEl = null;
+    count = 0;
+    hintDismissed = false;
+  }
+  function push(report) {
+    ensureMounted();
+    count += 1;
+    if (countEl) countEl.textContent = String(count);
+    listEl?.appendChild(renderCard(report, strings));
+    if (hintCheckTimer) clearTimeout(hintCheckTimer);
+    hintCheckTimer = setTimeout(updateHint, 400);
+  }
+  return { push, destroy };
+}
+
+// src/react/fiber.ts
+function getFiber(node) {
+  for (const key in node) {
+    if (key.startsWith("__reactFiber$") || key.startsWith("__reactInternalInstance$")) {
+      return node[key] ?? null;
+    }
+  }
+  return null;
+}
+function componentName(type) {
+  if (!type || typeof type === "string") return void 0;
+  if (typeof type === "function") {
+    const fn = type;
+    return fn.displayName || fn.name || void 0;
+  }
+  if (typeof type === "object") {
+    const obj = type;
+    if (obj.displayName) return obj.displayName;
+    if (obj.render) return obj.render.displayName || obj.render.name;
+    if (obj.type) return componentName(obj.type);
+  }
+  return void 0;
+}
+function resolveReactSource(node) {
+  if (!node) return {};
+  try {
+    let fiber = getFiber(node);
+    let component;
+    let location;
+    let hops = 0;
+    while (fiber && hops < 80) {
+      if (!component) {
+        const name = componentName(fiber.type);
+        if (name && !/^[a-z]/.test(name)) component = name;
+      }
+      if (!location && fiber._debugSource?.fileName) {
+        location = {
+          file: fiber._debugSource.fileName,
+          line: fiber._debugSource.lineNumber,
+          column: fiber._debugSource.columnNumber
+        };
+      }
+      if (component && location) break;
+      fiber = fiber.return ?? null;
+      hops += 1;
+    }
+    const result = {};
+    if (component) result.component = component;
+    if (location) result.location = location;
+    return result;
+  } catch {
+    return {};
+  }
+}
+
+// src/react/controller.ts
+var INSPECT_FALLBACK_MS = 50;
+function buildIgnore(ignore) {
+  if (!ignore || ignore.length === 0) return void 0;
+  return (divergence) => {
+    const node = divergence.element ?? null;
+    for (const rule of ignore) {
+      if (typeof rule === "function") {
+        if (node && rule(node)) return true;
+      } else if (node) {
+        try {
+          if (node.matches(rule) || node.closest(rule)) return true;
+        } catch {
+        }
+      }
+    }
+    return false;
+  };
+}
+var InspectorController = class {
+  constructor(options = {}) {
+    this.cleanups = [];
+    this.started = false;
+    this.pendingContext = {};
+    this.messages = /* @__PURE__ */ new Set();
+    this.warnedRoots = /* @__PURE__ */ new Set();
+    this.settlingTimers = [];
+    this.inspectScheduled = false;
+    this.inspectTimer = null;
+    this.onRecoverableError = (error, info) => {
+      if (!isDev) return;
+      const message = error instanceof Error ? error.message : String(error);
+      this.rememberMessage(message);
+      this.mergeContext({
+        componentStack: info?.componentStack,
+        component: firstComponentFromStack(info?.componentStack),
+        reactMessage: message
+      });
+      this.scheduleInspect();
+    };
+    this.options = options;
+    this.collector = new ReportCollector({
+      maxReports: options.maxReports,
+      extra: options.classify,
+      ignore: buildIgnore(options?.ignore)
+    });
+  }
+  start() {
+    if (this.started || !isDev || typeof window === "undefined") return;
+    this.started = true;
+    if (this.options.onReport) {
+      this.cleanups.push(this.collector.addSink(this.options.onReport));
+    }
+    this.cleanups.push(this.collector.addSink(createConsoleReporter()));
+    if (this.options.overlay !== false) {
+      const overlayOpts = typeof this.options.overlay === "object" ? this.options.overlay : {};
+      const handle = createOverlay(overlayOpts);
+      this.cleanups.push(
+        this.collector.addSink(handle.push, { replay: true }),
+        () => handle.destroy()
+      );
+    }
+    this.cleanups.push(
+      subscribeCapture((message) => {
+        this.rememberMessage(message);
+        this.mergeContext({ reactMessage: message });
+        this.scheduleInspect();
+      })
+    );
+    this.scheduleSettlingInspections();
+  }
+  // React applies client values to mismatched subtrees via a client re-render a
+  // few hundred ms after the initial hydration commit. We diff once per frame
+  // and then across this short "settling window" to catch that, deduped. This
+  // is a bounded, one-shot window — NOT a standing observer — so DOM changes
+  // from later app state are never mistaken for hydration mismatches.
+  scheduleSettlingInspections() {
+    this.scheduleInspect();
+    for (const delay of [80, 250, 700, 1500]) {
+      const timer = setTimeout(() => this.inspectAllRoots(), delay);
+      this.settlingTimers.push(timer);
+    }
+  }
+  rememberMessage(message) {
+    if (this.messages.size >= MAX_CAPTURED && !this.messages.has(message)) {
+      return;
+    }
+    this.messages.add(message);
+  }
+  mergeContext(ctx) {
+    this.pendingContext = {
+      componentStack: ctx.componentStack ?? this.pendingContext.componentStack,
+      component: ctx.component ?? this.pendingContext.component,
+      location: ctx.location ?? this.pendingContext.location,
+      reactMessage: ctx.reactMessage ?? this.pendingContext.reactMessage
+    };
+  }
+  domContext() {
+    return {
+      componentStack: this.pendingContext.componentStack,
+      component: this.pendingContext.component,
+      location: this.pendingContext.location
+    };
+  }
+  stop() {
+    for (const timer of this.settlingTimers.splice(0)) clearTimeout(timer);
+    this.clearScheduledInspect();
+    for (const cleanup of this.cleanups.splice(0)) cleanup();
+    this.started = false;
+  }
+  getReports() {
+    return this.collector.getReports();
+  }
+  inspectNow(context = {}) {
+    this.mergeContext(context);
+    this.inspectAllRoots();
+  }
+  inspectAllRoots() {
+    if (!this.started || typeof document === "undefined" || this.collector.isFull) {
+      return;
+    }
+    const configured = this.options.roots;
+    const selectors = configured ?? snapshotSelectors();
+    const context = this.domContext();
+    const seen = /* @__PURE__ */ new Set();
+    for (const selector of selectors) {
+      let root = null;
+      try {
+        root = document.querySelector(selector);
+      } catch {
+        this.warnRoot(selector, `"${selector}" is not a valid CSS selector.`);
+        continue;
+      }
+      if (!root || seen.has(root)) continue;
+      seen.add(root);
+      if (configured && getServerHtmlForRoot(root) == null) {
+        this.warnRoot(
+          selector,
+          `no server HTML was captured for "${selector}". Add it to the \`selectors\` prop of <HydrationSnapshotScript> so the server markup for that root is snapshotted.`
+        );
+        continue;
+      }
+      inspectRoot(
+        root,
+        this.collector,
+        context,
+        (divergence) => resolveReactSource(divergence.element ?? null)
+      );
+    }
+    for (const message of this.messages) {
+      reportFromMessage(message, this.collector, this.pendingContext, {
+        locationless: "skip"
+      });
+    }
+    const concrete = this.collector.getReports().some((r) => r.cause.messageId !== "unknown.no-location");
+    if (!concrete) {
+      for (const message of this.messages) {
+        reportFromMessage(message, this.collector, this.pendingContext, {
+          locationless: "only"
+        });
+      }
+    }
+  }
+  warnRoot(selector, detail) {
+    if (this.warnedRoots.has(selector)) return;
+    this.warnedRoots.add(selector);
+    console.warn(`[why-hydration] Skipping root: ${detail}`);
+  }
+  scheduleInspect() {
+    if (this.inspectScheduled) return;
+    this.inspectScheduled = true;
+    const run = () => {
+      if (!this.inspectScheduled) return;
+      this.clearScheduledInspect();
+      this.inspectAllRoots();
+    };
+    if (typeof requestAnimationFrame === "function") requestAnimationFrame(run);
+    this.inspectTimer = setTimeout(run, INSPECT_FALLBACK_MS);
+  }
+  clearScheduledInspect() {
+    this.inspectScheduled = false;
+    if (this.inspectTimer != null) {
+      clearTimeout(this.inspectTimer);
+      this.inspectTimer = null;
+    }
+  }
+};
+function snapshotSelectors() {
+  const snapshot = readSnapshot();
+  const keys = snapshot ? Object.keys(snapshot.roots) : [];
+  return keys.length > 0 ? keys : [...DEFAULT_SNAPSHOT_SELECTORS];
+}
+function firstComponentFromStack(stack) {
+  if (!stack) return void 0;
+  const frame = /(?:^|\n)\s*(?:at|in)\s+([A-Za-z0-9_$]+)/g;
+  for (const match of stack.matchAll(frame)) {
+    const name = match[1];
+    if (/^[A-Z]/.test(name) && !isInternalComponent(name)) return name;
+  }
+  return void 0;
+}
+function InspectorImpl(props) {
+  const { children, overlay, onReport, ignore, classify, maxReports } = props;
+  startCapture();
+  const optionsRef = React2.useRef({});
+  optionsRef.current = { overlay, onReport, ignore, classify, maxReports };
+  React2.useEffect(() => {
+    const controller = new InspectorController(optionsRef.current);
+    controller.start();
+    return () => controller.stop();
+  }, []);
+  return React2.createElement(React2.Fragment, null, children);
+}
+
+// src/react/index.tsx
+function PassThrough(props) {
+  return React2.createElement(React2.Fragment, null, props.children);
+}
+var HydrationInspector = process.env.NODE_ENV !== "production" ? InspectorImpl : PassThrough;
+function createHydrationInspector(options = {}) {
+  if (process.env.NODE_ENV === "production") {
+    return {
+      onRecoverableError: () => {
+      },
+      Provider: PassThrough
+    };
+  }
+  const controller = new InspectorController(options);
+  controller.start();
+  function Provider(props) {
+    React2.useEffect(() => {
+      controller.start();
+      return () => controller.stop();
+    }, []);
+    return React2.createElement(React2.Fragment, null, props.children);
+  }
+  return {
+    onRecoverableError: controller.onRecoverableError,
+    Provider
+  };
+}
+
+export { HydrationInspector, createHydrationInspector };
+//# sourceMappingURL=chunk-MK3TYHKM.js.map
+//# sourceMappingURL=chunk-MK3TYHKM.js.map