npm - why-hydration - Versions diffs - 0.1.5 → 0.3.0 - Mend

why-hydration 0.1.5 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

package/CHANGELOG.md +116 -0
package/README.md +155 -35
package/dist/chunk-CER5NQRR.js +1333 -0
package/dist/chunk-CER5NQRR.js.map +1 -0
package/dist/{chunk-AS5DZZHI.js → chunk-KP4S6CRL.js} +560 -230
package/dist/chunk-KP4S6CRL.js.map +1 -0
package/dist/{chunk-AT6A77X3.cjs → chunk-QFHUKJ5K.cjs} +568 -229
package/dist/chunk-QFHUKJ5K.cjs.map +1 -0
package/dist/chunk-RWMRFTQ4.cjs +1356 -0
package/dist/chunk-RWMRFTQ4.cjs.map +1 -0
package/dist/index.cjs +25 -17
package/dist/index.d.cts +37 -6
package/dist/index.d.ts +37 -6
package/dist/index.js +1 -1
package/dist/next/index.cjs +4 -4
package/dist/next/index.d.cts +1 -1
package/dist/next/index.d.ts +1 -1
package/dist/next/index.js +2 -2
package/dist/react.cjs +4 -4
package/dist/react.d.cts +24 -3
package/dist/react.d.ts +24 -3
package/dist/react.js +2 -2
package/dist/{types-6wTih14e.d.cts → types-C14vcpBO.d.cts} +9 -0
package/dist/{types-6wTih14e.d.ts → types-C14vcpBO.d.ts} +9 -0
package/package.json +22 -4
package/dist/chunk-3I6F4K4L.js +0 -642
package/dist/chunk-3I6F4K4L.js.map +0 -1
package/dist/chunk-AS5DZZHI.js.map +0 -1
package/dist/chunk-AT6A77X3.cjs.map +0 -1
package/dist/chunk-OFVFNPE6.cjs +0 -665
package/dist/chunk-OFVFNPE6.cjs.map +0 -1

package/dist/chunk-3I6F4K4L.js DELETED Viewed

@@ -1,642 +0,0 @@
-import { isDev, ReportCollector, inspectRoot, reportFromMessage, formatConsoleArgs, isHydrationMessage } from './chunk-AS5DZZHI.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/overlay.ts
-var CONTAINER_ID = "why-hydration-overlay";
-var CATEGORY_LABELS = {
-  "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"
-};
-var STYLES = `
-:host {
-  all: initial;
-  /* The "all" shorthand deliberately excludes direction/unicode-bidi (CSS spec),
-     so a host page with <html dir="rtl"> would otherwise leak direction:rtl
-     into this shadow tree and flip flex/grid order + text alignment. Report
-     content is English, so the overlay always renders left-to-right,
-     independent of the host page's directionality. */
-  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-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
-  color: #e5e7eb;
-  background: #0b0f17;
-  border: 1px solid #1f2937;
-  border-radius: 12px;
-  box-shadow: 0 12px 40px rgba(0,0,0,.5);
-  overflow: hidden;
-  direction: ltr;
-  text-align: left;
-}
-.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-left: 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-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-left: auto; font-size: 11px; color: #6b7280; }
-.wh-body { padding: 0 10px 10px; }
-.wh-where { font-size: 11px; color: #9ca3af; word-break: break-all; margin-bottom: 4px; }
-.wh-where code { color: #93c5fd; }
-.wh-comp { color: #f3f4f6; font-weight: 600; }
-.wh-loc { font-size: 11px; color: #7dd3fc; word-break: break-all; margin-bottom: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
-.wh-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
-.wh-side { border-radius: 8px; padding: 6px 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; word-break: break-word; }
-.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-family: inherit; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
-.wh-server .wh-label { color: #fb7185; }
-.wh-client .wh-label { color: #4ade80; }
-.wh-explain { color: #cbd5e1; margin-bottom: 8px; }
-.wh-fix { color: #e5e7eb; background: #111827; border-left: 3px solid #22c55e; border-radius: 4px; padding: 6px 8px; }
-.wh-fix strong { color: #86efac; }
-.wh-docs { display: inline-block; margin-top: 6px; color: #60a5fa; text-decoration: none; font-size: 11px; }
-.wh-docs:hover { text-decoration: underline; }
-.wh-empty-value { color: #6b7280; font-style: italic; }
-.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("/");
-}
-function renderValue(value) {
-  if (value == null || value === "") {
-    return el("span", "wh-empty-value", value === "" ? "(empty)" : "(none)");
-  }
-  const span = document.createElement("span");
-  span.textContent = value;
-  return span;
-}
-function renderCard(report) {
-  const card = el("div", "wh-card");
-  const head = el("div", "wh-card-head");
-  head.appendChild(
-    el("span", "wh-cat", CATEGORY_LABELS[report.cause.category] ?? "Mismatch")
-  );
-  head.appendChild(
-    el("span", "wh-conf", `${Math.round(report.cause.confidence * 100)}%`)
-  );
-  card.appendChild(head);
-  const body = el("div", "wh-body");
-  const where = el("div", "wh-where");
-  if (report.component) {
-    where.appendChild(el("strong", "wh-comp", `<${report.component}>`));
-    where.append(" \xB7 ");
-  } else if (report.node.tagName) {
-    where.append(`<${report.node.tagName.toLowerCase()}> \xB7 `);
-  }
-  const code = el("code");
-  code.textContent = report.node.path;
-  where.appendChild(code);
-  if (report.node.attribute) {
-    where.append(` \xB7 @${report.node.attribute}`);
-  }
-  body.appendChild(where);
-  if (report.location?.file) {
-    const loc = el("div", "wh-loc");
-    const file = shortenPath(report.location.file);
-    loc.textContent = report.location.line ? `${file}:${report.location.line}` : file;
-    body.appendChild(loc);
-  }
-  const diff = el("div", "wh-diff");
-  const server = el("div", "wh-side wh-server");
-  server.appendChild(el("span", "wh-label", "Server"));
-  server.appendChild(renderValue(report.server));
-  const client = el("div", "wh-side wh-client");
-  client.appendChild(el("span", "wh-label", "Client"));
-  client.appendChild(renderValue(report.client));
-  diff.appendChild(server);
-  diff.appendChild(client);
-  body.appendChild(diff);
-  body.appendChild(el("div", "wh-explain", report.cause.explanation));
-  const fix = el("div", "wh-fix");
-  const strong = el("strong");
-  strong.textContent = "Fix: ";
-  fix.appendChild(strong);
-  fix.append(report.cause.suggestion);
-  body.appendChild(fix);
-  if (report.cause.docsUrl && /^https?:\/\//i.test(report.cause.docsUrl)) {
-    const a = el("a", "wh-docs", "Learn more \u2192");
-    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;
-  function ensureMounted() {
-    if (host) return;
-    document.getElementById(CONTAINER_ID)?.remove();
-    host = document.createElement("div");
-    host.id = CONTAINER_ID;
-    host.setAttribute("data-why-hydration", "overlay");
-    host.setAttribute("aria-hidden", "false");
-    host.setAttribute("dir", "ltr");
-    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("role", "dialog");
-    panel.setAttribute("aria-label", "Hydration mismatch diagnostics");
-    const header = el("div", "wh-header");
-    header.appendChild(el("span", "wh-dot"));
-    header.appendChild(el("span", "wh-title", "Hydration mismatch"));
-    countEl = el("span", "wh-count", "0");
-    header.appendChild(countEl);
-    const close = el("button", "wh-btn", "Dismiss");
-    close.setAttribute("aria-label", "Dismiss diagnostics overlay");
-    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", "Dismiss hint");
-    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 = `\u2193 ${count} issues \u2014 scroll to see all`;
-    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));
-    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);
-    }
-  }
-  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 match = /\n?\s*(?:at|in)\s+([A-Za-z0-9_$]+)/.exec(stack);
-  return match?.[1];
-}
-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-3I6F4K4L.js.map
-//# sourceMappingURL=chunk-3I6F4K4L.js.map