rerender-lens 0.2.0 → 0.3.0

package/dist/setup.js

@@ -0,0 +1,1508 @@
+// src/types.ts
+var MARKER = "rerenderLens";
+
+// src/diff.ts
+var REACT_ELEMENT = /* @__PURE__ */ Symbol.for("react.element");
+var REACT_TRANSITIONAL_ELEMENT = /* @__PURE__ */ Symbol.for("react.transitional.element");
+function isReactElement(v) {
+  if (typeof v !== "object" || v === null) return false;
+  const t = v.$$typeof;
+  return t === REACT_ELEMENT || t === REACT_TRANSITIONAL_ELEMENT;
+}
+function isPlainObject(v) {
+  if (typeof v !== "object" || v === null) return false;
+  const proto = Object.getPrototypeOf(v);
+  return proto === Object.prototype || proto === null;
+}
+function remember(seen, a, b) {
+  let set = seen.get(a);
+  if (!set) {
+    set = /* @__PURE__ */ new Set();
+    seen.set(a, set);
+  }
+  if (set.has(b)) return true;
+  set.add(b);
+  return false;
+}
+function deepEqual(a, b, seen = /* @__PURE__ */ new Map()) {
+  if (Object.is(a, b)) return true;
+  if (typeof a !== typeof b) return false;
+  if (typeof a !== "object" || a === null || b === null) return false;
+  const objA = a;
+  const objB = b;
+  if (remember(seen, objA, objB)) return true;
+  if (a instanceof Date) return b instanceof Date && a.getTime() === b.getTime();
+  if (a instanceof RegExp) return b instanceof RegExp && a.source === b.source && a.flags === b.flags;
+  if (Array.isArray(a)) {
+    if (!Array.isArray(b) || a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) if (!deepEqual(a[i], b[i], seen)) return false;
+    return true;
+  }
+  if (Array.isArray(b)) return false;
+  if (ArrayBuffer.isView(a)) {
+    if (!ArrayBuffer.isView(b) || a.constructor !== b.constructor) return false;
+    const ta = a;
+    const tb = b;
+    if (ta.length !== tb.length) return false;
+    for (let i = 0; i < ta.length; i++) if (ta[i] !== tb[i]) return false;
+    return true;
+  }
+  if (a instanceof Map) {
+    if (!(b instanceof Map) || a.size !== b.size) return false;
+    for (const [k, v] of a) {
+      if (!b.has(k) || !deepEqual(v, b.get(k), seen)) return false;
+    }
+    return true;
+  }
+  if (a instanceof Set) {
+    if (!(b instanceof Set) || a.size !== b.size) return false;
+    outer: for (const v of a) {
+      if (b.has(v)) continue;
+      for (const w of b) if (deepEqual(v, w, seen)) continue outer;
+      return false;
+    }
+    return true;
+  }
+  if (isReactElement(a)) {
+    if (!isReactElement(b)) return false;
+    return a.type === b.type && a.key === b.key && deepEqual(a.props, b.props, seen);
+  }
+  if (isPlainObject(a) && isPlainObject(b)) {
+    const ka = Object.keys(a);
+    const kb = Object.keys(b);
+    if (ka.length !== kb.length) return false;
+    for (const k of ka) {
+      if (!Object.prototype.hasOwnProperty.call(b, k)) return false;
+      if (!deepEqual(a[k], b[k], seen)) return false;
+    }
+    return true;
+  }
+  return false;
+}
+function classify(prev, next) {
+  if (typeof prev === "function" && typeof next === "function") {
+    return prev.name === next.name && prev.toString() === next.toString() ? "function" : "different";
+  }
+  if (isReactElement(prev) && isReactElement(next)) {
+    return deepEqual(prev, next) ? "element" : "different";
+  }
+  return deepEqual(prev, next) ? "deep-equal" : "different";
+}
+function joinPath(base, key) {
+  if (typeof key === "number") return `${base}[${key}]`;
+  if (base === "") return key;
+  return /^[A-Za-z_$][\w$]*$/.test(key) ? `${base}.${key}` : `${base}[${JSON.stringify(key)}]`;
+}
+function diffRecords(prev, next, basePath = "") {
+  const p = prev ?? {};
+  const n = next ?? {};
+  const changes = [];
+  const keys = /* @__PURE__ */ new Set([...Object.keys(p), ...Object.keys(n)]);
+  for (const key of keys) {
+    const inPrev = Object.prototype.hasOwnProperty.call(p, key);
+    const inNext = Object.prototype.hasOwnProperty.call(n, key);
+    const path = joinPath(basePath, key);
+    if (inPrev && !inNext) {
+      changes.push({ path, kind: "removed", prev: p[key], next: void 0 });
+      continue;
+    }
+    if (!inPrev && inNext) {
+      changes.push({ path, kind: "added", prev: void 0, next: n[key] });
+      continue;
+    }
+    const a = p[key];
+    const b = n[key];
+    if (Object.is(a, b)) continue;
+    const kind = classify(a, b);
+    if (kind === "different") {
+      changes.push({ path: firstDifferentPath(a, b, path), kind, prev: a, next: b });
+    } else {
+      changes.push({ path, kind, prev: a, next: b });
+    }
+  }
+  return changes;
+}
+function firstDifferentPath(a, b, path, depth = 0) {
+  if (depth > 8) return path;
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return `${path}.length`;
+    for (let i = 0; i < a.length; i++) {
+      if (!deepEqual(a[i], b[i])) return firstDifferentPath(a[i], b[i], joinPath(path, i), depth + 1);
+    }
+    return path;
+  }
+  if (isPlainObject(a) && isPlainObject(b)) {
+    const keys = /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(b)]);
+    for (const k of keys) {
+      if (!deepEqual(a[k], b[k])) return firstDifferentPath(a[k], b[k], joinPath(path, k), depth + 1);
+    }
+    return path;
+  }
+  return path;
+}
+
+// src/report.ts
+var now = () => typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
+var hookLabel = (c) => c.custom && c.custom.length ? `${c.custom.join(" \u203A ")} \u203A ${c.hook}#${c.index}` : `${c.hook} #${c.index}`;
+function storeAdvice(custom) {
+  const chain = custom ?? [];
+  if (chain.some((n) => /^useSelector$/.test(n)))
+    return "the Redux selector returns a new object on every call: return a stored slice, pass shallowEqual as the equality function, or memoize it with createSelector";
+  if (chain.some((n) => /^useAppSelector$/.test(n)))
+    return "the selector returns a new object on every call: return a stored slice, pass shallowEqual, or memoize it with createSelector";
+  if (chain.some((n) => /^use[A-Z]\w*Store$/.test(n) || n === "useStore" || n === "useBoundStore"))
+    return "the store selector returns a new object on every call: select a primitive, or wrap the selector with useShallow (Zustand) / an equality function";
+  return "getSnapshot returns a new reference with the same contents: cache the snapshot in the store and return the same object while the data is unchanged";
+}
+var isGenuine = (c) => c.kind === "different" || c.kind === "added" || c.kind === "removed";
+var isChildren = (change) => change.path === "children";
+function fixFor(change) {
+  if (isChildren(change) && (change.kind === "element" || change.kind === "deep-equal")) {
+    return `lift the children out of the parent's render: memoize them with useMemo, hoist static elements to module scope, or render them from a component that does not re-render`;
+  }
+  switch (change.kind) {
+    case "function":
+      return `wrap it in useCallback (or hoist it out of the parent's render)`;
+    case "element":
+      return `memoize the element with useMemo, or pass it as children from a stable parent`;
+    case "deep-equal":
+      return Array.isArray(change.next) ? `memoize the array with useMemo (same items, new reference)` : `memoize the object with useMemo, or hoist it to module scope if it is constant`;
+    default:
+      return "";
+  }
+}
+function describe(change) {
+  if (isChildren(change) && (change.kind === "element" || change.kind === "deep-equal")) {
+    return `children are new React elements with the same types and props on every render of the parent`;
+  }
+  switch (change.kind) {
+    case "deep-equal":
+      return `prop "${change.path}" is a new reference but deep-equal to the previous value`;
+    case "function":
+      return `prop "${change.path}" is a new function instance on every render`;
+    case "element":
+      return `prop "${change.path}" is a new React element with the same type and props`;
+    case "different":
+      return `prop "${change.path}" changed`;
+    case "added":
+      return `prop "${change.path}" was added`;
+    case "removed":
+      return `prop "${change.path}" was removed`;
+  }
+}
+function buildReport(input) {
+  const stateChanges = input.stateChanges ?? [];
+  const hookChanges = input.hookChanges ?? [];
+  const isStateHook = (h) => h.hook === "useState" || h.hook === "useReducer";
+  const genuineProps = input.propChanges.some(isGenuine);
+  const genuineState = stateChanges.some(isGenuine) || hookChanges.some((h) => isStateHook(h) && isGenuine(h));
+  const genuineHooks = hookChanges.some((h) => !isStateHook(h) && isGenuine(h));
+  const causes = [genuineProps && "props", genuineState && "state", genuineHooks && "hooks"].filter(Boolean);
+  let trigger;
+  if (causes.length === 0) trigger = "parent";
+  else if (causes.length === 1) trigger = causes[0];
+  else trigger = "mixed";
+  const avoidable = trigger === "parent";
+  const reasons = [];
+  if (avoidable && input.propChanges.length === 0 && stateChanges.length === 0 && hookChanges.length === 0) {
+    const who = input.parent ? `<${input.parent.name}> re-rendered (${describeTrigger(input.parent.trigger)})` : "its parent re-rendered";
+    reasons.push(`re-rendered with identical props because ${who}. Wrap "${input.component}" in React.memo (or extend PureComponent).`);
+  } else if (avoidable && input.parent) {
+    reasons.push(`caused by <${input.parent.name}> re-rendering (${describeTrigger(input.parent.trigger)}).`);
+  }
+  for (const c of input.propChanges) {
+    const fix = fixFor(c);
+    reasons.push(fix ? `${describe(c)}: ${fix}.` : `${describe(c)}.`);
+  }
+  const memoized = input.memoized !== false;
+  if (avoidable && !memoized && input.propChanges.length > 0) {
+    reasons.push(
+      `"${input.component}" is not memoized, so fixing the props alone will not stop this re-render: also wrap it in React.memo (or extend PureComponent).`
+    );
+  }
+  for (const c of stateChanges) {
+    if (isGenuine(c)) reasons.push(`state "${c.path}" changed.`);
+    else reasons.push(`setState was called with a value deep-equal to the current "${c.path}" (new reference, same contents).`);
+  }
+  for (const c of hookChanges) {
+    if (c.hook === "useContext" && isGenuine(c)) {
+      const where = c.provider && c.provider.component ? ` (provided by <${c.provider.component}>)` : "";
+      const keys = c.changedKeys && typeof c.totalKeys === "number" && c.changedKeys.length > 0 && c.changedKeys.length < c.totalKeys ? `: only ${c.changedKeys.map((k) => `"${k}"`).join(", ")} of ${c.totalKeys} keys changed, yet every consumer re-renders. Split the context or memoize the slices consumers read` : "";
+      reasons.push(`${c.path} changed${where}${keys}.`);
+    } else if (isGenuine(c)) reasons.push(`${hookLabel(c)} changed.`);
+    else if (isStateHook(c))
+      reasons.push(`${hookLabel(c)} was set to a value deep-equal to the current one (new reference, same contents): reuse the existing object or bail out before calling the setter.`);
+    else if (c.hook === "useSyncExternalStore") reasons.push(`${hookLabel(c)} returned a new reference that is deep-equal to the previous value: ${storeAdvice(c.custom)}.`);
+    else reasons.push(`${hookLabel(c)} returned a new reference that is deep-equal to the previous value: memoize the context/store value where it is produced.`);
+  }
+  if (input.commitCause === "effect-after-commit") {
+    const who = input.updaters && input.updaters.length ? input.updaters.map((u) => `<${u}>`).join(", ") : "a component that rendered in it";
+    reasons.push(`this commit was scheduled right after commit #${input.afterCommit ?? "?"} by ${who}: an effect there set state (effect \u2192 setState loop). Derive the value during render or compute it before setting state.`);
+  } else if (input.commitCause === "suspense-resolved") {
+    reasons.push("this commit shows content that was suspended (a Suspense boundary resolved).");
+  }
+  const report = {
+    component: input.component,
+    instanceId: input.instanceId ?? 0,
+    commitId: input.commitId ?? 0,
+    renderCount: input.renderCount,
+    trigger,
+    avoidable,
+    memoized,
+    props: { prev: input.prevProps, next: input.nextProps },
+    propChanges: input.propChanges,
+    stateChanges,
+    hookChanges,
+    parent: input.parent ?? null,
+    owner: input.owner ?? null,
+    path: input.path ?? [],
+    reasons,
+    time: now()
+  };
+  if (input.selfDuration !== void 0) report.selfDuration = input.selfDuration;
+  if (input.treeDuration !== void 0) report.treeDuration = input.treeDuration;
+  if (input.commitPriority) report.commitPriority = input.commitPriority;
+  if (input.source) report.source = input.source;
+  if (input.hookState) report.hookState = input.hookState;
+  if (input.contexts) report.contexts = input.contexts;
+  if (input.state) report.state = input.state;
+  if (input.updaters && input.updaters.length) report.updaters = input.updaters;
+  if (input.commitCause) report.commitCause = input.commitCause;
+  if (input.afterCommit !== void 0) report.afterCommit = input.afterCommit;
+  if (input.key !== void 0) report.key = input.key;
+  return report;
+}
+function describeTrigger(t) {
+  switch (t) {
+    case "props":
+      return "its props changed";
+    case "state":
+      return "its state changed";
+    case "hooks":
+      return "a context or store it reads changed";
+    case "mixed":
+      return "its props and state changed";
+    default:
+      return "its own parent re-rendered";
+  }
+}
+var KIND_LABEL = {
+  "deep-equal": "equal by value",
+  function: "new function",
+  element: "equal element",
+  different: "changed",
+  added: "added",
+  removed: "removed"
+};
+function summarize(report) {
+  const counts2 = /* @__PURE__ */ new Map();
+  for (const c of [...report.propChanges, ...report.stateChanges, ...report.hookChanges]) {
+    counts2.set(c.kind, (counts2.get(c.kind) ?? 0) + 1);
+  }
+  const parts = [...counts2].map(([kind, n]) => `${n} ${KIND_LABEL[kind]}`);
+  if (parts.length === 0) parts.push("no changes");
+  return parts.join(", ");
+}
+function printReport(report, options) {
+  const c = options.console ?? console;
+  const open = options.collapse === false ? c.group : c.groupCollapsed;
+  const verdict = report.avoidable ? "avoidable re-render" : `re-render (${report.trigger})`;
+  open.call(c, `[rerender-lens] <${report.component}> ${verdict}: ${summarize(report)}`);
+  for (const r of report.reasons) c.log(`- ${r}`);
+  if (report.path.length) c.log(`at ${[...report.path, report.component].join(" > ")}`);
+  for (const ch of [...report.propChanges, ...report.stateChanges, ...report.hookChanges]) {
+    c.log(`${ch.path} (${KIND_LABEL[ch.kind]})`, { prev: ch.prev, next: ch.next });
+  }
+  c.log("props", report.props);
+  if (report.hookState && report.hookState.length) c.log("hooks", Object.fromEntries(report.hookState.map((h) => [h.path, h.value])));
+  if (report.contexts && report.contexts.length) c.log("contexts", Object.fromEntries(report.contexts.map((x) => [x.name, x.value])));
+  if (report.state) c.log("state", report.state);
+  c.groupEnd();
+}
+
+// src/state.ts
+var KEY = /* @__PURE__ */ Symbol.for("rerender-lens.state");
+function getState() {
+  const g = globalThis;
+  let s = g[KEY];
+  if (!s) {
+    s = { options: {}, enabled: false, printed: /* @__PURE__ */ new Map(), detach: null, nextInstanceId: 1, nextCommitId: 1, warnedOnce: /* @__PURE__ */ new Set(), scheduled: 0, commits: 0, overheadMs: 0, maxCommitMs: 0 };
+    g[KEY] = s;
+  }
+  return s;
+}
+function warnOnce(key, message) {
+  const s = getState();
+  if (s.warnedOnce.has(key)) return;
+  s.warnedOnce.add(key);
+  (s.options.console ?? console).warn(`[rerender-lens] ${message}`);
+}
+function dispatch(report, override) {
+  const s = getState();
+  const options = s.options;
+  if (!options.silent && (report.avoidable || options.logAll)) {
+    const max = options.maxReportsPerComponent ?? 0;
+    const n = (s.printed.get(report.component) ?? 0) + 1;
+    s.printed.set(report.component, n);
+    if (max <= 0 || n <= max) {
+      printReport(report, options);
+    } else if (n === max + 1) {
+      (options.console ?? console).log(
+        `[rerender-lens] <${report.component}> reached maxReportsPerComponent (${max}); further reports are not printed.`
+      );
+    }
+  }
+  if (options.notifier) {
+    try {
+      options.notifier(report);
+    } catch (err) {
+      (options.console ?? console).warn("[rerender-lens] notifier threw", err);
+    }
+  }
+}
+
+// src/hookNames.ts
+var noop = () => {
+};
+function customHooksFromStack(stack, componentName, marker) {
+  const names = [];
+  let past = false;
+  for (const line of stack.split("\n")) {
+    const m = /^\s*at\s+(?:async\s+)?([^\s(]+)|^([^@\s]+)@/.exec(line);
+    const name = m ? (m[1] || m[2] || "").replace(/^Object\./, "").replace(/^Proxy\./, "") : "";
+    if (!name) continue;
+    if (!past) {
+      if (name.includes(marker)) past = true;
+      continue;
+    }
+    if (name === componentName || name.endsWith("." + componentName)) break;
+    if (/^use[A-Z0-9_]/.test(name)) names.push(name);
+    if (names.length > 8) break;
+  }
+  return names;
+}
+var cache = /* @__PURE__ */ new WeakMap();
+function makeDispatcher(fiber, componentName, out, marker) {
+  let node = fiber.memoizedState;
+  let index = 0;
+  const take = (count) => {
+    const first = node;
+    for (let i = 0; i < count && node; i++) node = node.next;
+    index += count;
+    return first;
+  };
+  const record = (primitive, count) => {
+    const stack = new Error().stack || "";
+    const chain = customHooksFromStack(stack, componentName, marker);
+    const start = index;
+    const first = take(count);
+    if (chain.length) for (let i = 0; i < count; i++) out.set(start + i, chain);
+    return first;
+  };
+  const memoized = (n) => n ? n.memoizedState : void 0;
+  const dispatcher = {};
+  const define = (name, impl) => {
+    const fn = { [marker + name]: (...a) => impl(...a) }[marker + name];
+    dispatcher[name] = fn;
+  };
+  define("useState", () => {
+    const n = record("useState", 1);
+    return [memoized(n), noop];
+  });
+  define("useReducer", () => {
+    const n = record("useReducer", 1);
+    return [memoized(n), noop];
+  });
+  define("useRef", (init2) => {
+    const n = record("useRef", 1);
+    return n ? n.memoizedState : { current: init2 };
+  });
+  define("useMemo", (fn) => {
+    const n = record("useMemo", 1);
+    const s = memoized(n);
+    return Array.isArray(s) ? s[0] : typeof fn === "function" ? fn() : void 0;
+  });
+  define("useCallback", (fn) => {
+    const n = record("useCallback", 1);
+    const s = memoized(n);
+    return Array.isArray(s) ? s[0] : fn;
+  });
+  for (const effect of ["useEffect", "useLayoutEffect", "useInsertionEffect", "useImperativeHandle"]) define(effect, () => void record(effect, 1));
+  define("useContext", (ctx) => {
+    record("useContext", 0);
+    const c = ctx;
+    return c ? c._currentValue : void 0;
+  });
+  define("useDebugValue", () => void record("useDebugValue", 0));
+  define("useSyncExternalStore", (_subscribe, getSnapshot) => {
+    const n = record("useSyncExternalStore", 2);
+    return n ? n.memoizedState : typeof getSnapshot === "function" ? getSnapshot() : void 0;
+  });
+  define("useTransition", () => {
+    record("useTransition", 2);
+    return [false, noop];
+  });
+  define("useDeferredValue", (v) => {
+    const n = record("useDeferredValue", 1);
+    return n ? n.memoizedState : v;
+  });
+  define("useId", () => {
+    const n = record("useId", 1);
+    return n ? n.memoizedState : "id";
+  });
+  define("useOptimistic", (v) => {
+    const n = record("useOptimistic", 1);
+    return [n ? n.memoizedState : v, noop];
+  });
+  for (const action of ["useActionState", "useFormState"]) {
+    define(action, (_fn, init2) => {
+      const n = record(action, 3);
+      return [n ? n.memoizedState : init2, noop, false];
+    });
+  }
+  define("useEffectEvent", (fn) => {
+    record("useEffectEvent", 1);
+    return fn;
+  });
+  define("useCacheRefresh", () => {
+    record("useCacheRefresh", 1);
+    return noop;
+  });
+  define("useHostTransitionStatus", () => ({ pending: false, data: null, method: null, action: null }));
+  define("useMemoCache", (size) => new Array(Number(size) || 0).fill(/* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")));
+  define("use", (usable) => {
+    record("use", 0);
+    const u = usable;
+    if (u && typeof u.then === "function") {
+      if (u.status === "fulfilled") return u.value;
+      throw new Error("rerender-lens: cannot replay use() on a pending promise");
+    }
+    return u ? u._currentValue : void 0;
+  });
+  define("readContext", (ctx) => ctx?._currentValue);
+  return { dispatcher, nodesConsumed: () => index };
+}
+function renderFunctionOf(type) {
+  let t = type;
+  while (t && typeof t === "object" && t.type) t = t.type;
+  if (t && typeof t === "object" && typeof t.render === "function") return { fn: t.render, name: t.render.name || t.displayName || "Component" };
+  if (typeof t === "function") return { fn: t, name: t.name || "Component" };
+  return { fn: null, name: "Component" };
+}
+function resolveHookNames(fiber, ref) {
+  const type = fiber.type;
+  if (!type || !ref) return /* @__PURE__ */ new Map();
+  const cached = cache.get(type);
+  if (cached) return cached.byNode;
+  const result = { byNode: /* @__PURE__ */ new Map(), ok: false };
+  cache.set(type, result);
+  const { fn, name } = renderFunctionOf(type);
+  if (!fn) return result.byNode;
+  const useH = "H" in ref;
+  const marker = "__rl_";
+  const previous = useH ? ref.H : ref.current;
+  const { dispatcher, nodesConsumed } = makeDispatcher(fiber, name, result.byNode, marker);
+  const proxy = new Proxy(dispatcher, {
+    get(target, key) {
+      if (key in target) return target[key];
+      return () => void 0;
+    }
+  });
+  let total = 0;
+  for (let n = fiber.memoizedState; n && typeof n === "object" && "next" in n; n = n.next) total++;
+  try {
+    if (useH) ref.H = proxy;
+    else ref.current = proxy;
+    const secondArg = fiber.tag === 11 ? fiber.stateNode?.ref ?? null : void 0;
+    fn(fiber.memoizedProps ?? {}, secondArg);
+    result.ok = nodesConsumed() === total;
+    if (!result.ok) result.byNode.clear();
+  } catch {
+    result.byNode.clear();
+  } finally {
+    if (useH) ref.H = previous;
+    else ref.current = previous;
+  }
+  return result.byNode;
+}
+
+// src/fiber.ts
+var FunctionComponent = 0;
+var ClassComponent = 1;
+var HostRoot = 3;
+var HostComponent = 5;
+var ContextProvider = 10;
+var ForwardRef = 11;
+var SuspenseComponent = 13;
+var MemoComponent = 14;
+var SimpleMemoComponent = 15;
+var PerformedWork = 1;
+var HOOK = "__REACT_DEVTOOLS_GLOBAL_HOOK__";
+var nowMs = () => typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
+function ensureDevtoolsHook() {
+  const g = globalThis;
+  let hook = g[HOOK];
+  if (!hook) {
+    let nextId = 0;
+    const renderers = /* @__PURE__ */ new Map();
+    hook = {
+      renderers,
+      supportsFiber: true,
+      inject(renderer) {
+        const id = ++nextId;
+        renderers.set(id, renderer);
+        return id;
+      },
+      onCommitFiberRoot() {
+      },
+      onCommitFiberUnmount() {
+      },
+      onScheduleFiberRoot() {
+      },
+      onPostCommitFiberRoot() {
+      }
+    };
+    g[HOOK] = hook;
+  }
+  return hook;
+}
+var capturedRenderers = /* @__PURE__ */ new Map();
+var dispatcherRefs = /* @__PURE__ */ new Map();
+var INJECT_WRAPPED = /* @__PURE__ */ Symbol.for("rerender-lens.injectWrapped");
+var ATTACHED = /* @__PURE__ */ Symbol.for("rerender-lens.attached");
+function pickRenderer(r) {
+  const info = r ?? {};
+  return { version: info.version, bundleType: info.bundleType, rendererPackageName: info.rendererPackageName };
+}
+function wrapInject(hook) {
+  const h = hook;
+  if (h[INJECT_WRAPPED] || typeof hook.inject !== "function") return;
+  const original = hook.inject;
+  hook.inject = function(renderer) {
+    const id = original.call(this, renderer);
+    const key = typeof id === "number" ? id : capturedRenderers.size + 1;
+    capturedRenderers.set(key, pickRenderer(renderer));
+    const ref = renderer?.currentDispatcherRef;
+    if (ref && typeof ref === "object") dispatcherRefs.set(key, ref);
+    return id;
+  };
+  h[INJECT_WRAPPED] = true;
+}
+function getDispatcherRef() {
+  for (const ref of dispatcherRefs.values()) return ref;
+  const g = globalThis;
+  const hook = g[HOOK];
+  let found = null;
+  if (hook && hook.renderers && typeof hook.renderers.forEach === "function") {
+    hook.renderers.forEach((r) => {
+      const ref = r?.currentDispatcherRef;
+      if (!found && ref && typeof ref === "object") found = ref;
+    });
+  }
+  return found;
+}
+function attach() {
+  const hook = ensureDevtoolsHook();
+  wrapInject(hook);
+  if (hook[ATTACHED]) return () => {
+  };
+  hook[ATTACHED] = true;
+  const previous = hook.onCommitFiberRoot;
+  const patched = function(id, root, priority, didError) {
+    const started = nowMs();
+    try {
+      onCommit(root, priorityLabel(priority));
+    } catch (err) {
+      warnOnce("commit", `failed to inspect a commit: ${String(err)}`);
+    } finally {
+      const spent = nowMs() - started;
+      const s = getState();
+      s.overheadMs += spent;
+      if (spent > s.maxCommitMs) s.maxCommitMs = spent;
+    }
+    if (typeof previous === "function") return previous.call(this, id, root, priority, didError);
+  };
+  hook.onCommitFiberRoot = patched;
+  const previousSchedule = hook.onScheduleFiberRoot;
+  const patchedSchedule = function(id, root, children) {
+    getState().scheduled++;
+    if (typeof previousSchedule === "function") return previousSchedule.call(this, id, root, children);
+  };
+  hook.onScheduleFiberRoot = patchedSchedule;
+  return () => {
+    hook[ATTACHED] = false;
+    if (hook.onCommitFiberRoot === patched) hook.onCommitFiberRoot = previous;
+    if (hook.onScheduleFiberRoot === patchedSchedule) hook.onScheduleFiberRoot = previousSchedule;
+  };
+}
+function priorityLabel(priority) {
+  switch (priority) {
+    case 1:
+      return "immediate";
+    case 2:
+      return "user-blocking";
+    case 3:
+      return "normal";
+    case 4:
+      return "low";
+    case 5:
+      return "idle";
+    default:
+      return void 0;
+  }
+}
+function getRenderers() {
+  const g = globalThis;
+  const hook = g[HOOK];
+  const byId = new Map(capturedRenderers);
+  if (hook && hook.renderers && typeof hook.renderers.forEach === "function") {
+    hook.renderers.forEach((r, id) => {
+      if (!byId.has(id)) byId.set(id, pickRenderer(r));
+    });
+  }
+  return [...byId.values()];
+}
+function isProductionReact() {
+  const renderers = getRenderers();
+  return renderers.length > 0 && renderers.every((r) => r.bundleType === 0);
+}
+var flagsOf = (f) => f.flags ?? f.effectTag ?? 0;
+var isComponentTag = (tag) => tag === FunctionComponent || tag === ClassComponent || tag === ForwardRef || tag === MemoComponent || tag === SimpleMemoComponent;
+function isMemoizedFiber(fiber) {
+  if (fiber.tag === MemoComponent || fiber.tag === SimpleMemoComponent) return true;
+  if (fiber.tag === ClassComponent) {
+    const inst = fiber.stateNode;
+    return !!(inst && inst.isPureReactComponent);
+  }
+  return false;
+}
+function durationsOf(fiber) {
+  if (typeof fiber.actualDuration !== "number") return null;
+  const tree = fiber.actualDuration;
+  let children = 0;
+  for (let c = fiber.child; c; c = c.sibling) if (typeof c.actualDuration === "number") children += c.actualDuration;
+  return { self: Math.max(0, tree - children), tree };
+}
+function fiberType(fiber) {
+  return fiber.elementType ?? fiber.type;
+}
+function fiberName(fiber) {
+  return getDisplayName(fiberType(fiber));
+}
+function didRender(fiber) {
+  return (flagsOf(fiber) & PerformedWork) !== 0;
+}
+function isHotSwapped(fiber, alt) {
+  return fiber.type !== alt.type;
+}
+var counts = /* @__PURE__ */ new WeakMap();
+var ids = /* @__PURE__ */ new WeakMap();
+var fibersById = /* @__PURE__ */ new Map();
+var hasWeakRef = typeof WeakRef === "function";
+function remember2(id, fiber) {
+  if (!hasWeakRef) return;
+  fibersById.set(id, new WeakRef(fiber));
+  if (fibersById.size > 5e3) {
+    for (const [k, ref] of fibersById) if (!ref.deref()) fibersById.delete(k);
+  }
+}
+function instanceIdOf(fiber) {
+  return ids.get(fiber) ?? (fiber.alternate ? ids.get(fiber.alternate) : void 0);
+}
+function fiberById(id) {
+  const f = fibersById.get(id)?.deref() ?? null;
+  if (!f) return null;
+  const alt = f.alternate;
+  if (alt && counts.get(alt) !== void 0 && (counts.get(alt) ?? 0) > (counts.get(f) ?? 0)) return alt;
+  return f;
+}
+function instanceId(fiber) {
+  const existing = instanceIdOf(fiber);
+  if (existing !== void 0) {
+    ids.set(fiber, existing);
+    remember2(existing, fiber);
+    return existing;
+  }
+  const s = getState();
+  const id = s.nextInstanceId++;
+  ids.set(fiber, id);
+  remember2(id, fiber);
+  return id;
+}
+function hostNodesOf(fiber, limit = 50) {
+  const out = [];
+  const stack = [];
+  for (let c = fiber.child; c; c = c.sibling) stack.push(c);
+  while (stack.length && out.length < limit) {
+    const f = stack.pop();
+    if (f.tag === HostComponent) {
+      if (typeof Element !== "undefined" && f.stateNode instanceof Element) out.push(f.stateNode);
+      continue;
+    }
+    for (let c = f.child; c; c = c.sibling) stack.push(c);
+  }
+  return out;
+}
+function fiberForNode(node) {
+  if (!node || typeof node !== "object") return null;
+  const key = Object.keys(node).find((k) => k.startsWith("__reactFiber$") || k.startsWith("__reactInternalInstance$"));
+  return key ? node[key] ?? null : null;
+}
+function nearestComponent(fiber) {
+  let f = fiber;
+  while (f && f.tag !== HostRoot) {
+    if (isComponentTag(f.tag)) return f;
+    f = f.return;
+  }
+  return null;
+}
+var INTERNAL_FRAME = /react-dom|react_jsx|jsx-(dev-)?runtime|\/react\/|node_modules\/react|react-stack-bottom-frame|react_stack_bottom_frame|scheduler/;
+function parseStackLocation(stack) {
+  for (const line of stack.split("\n")) {
+    const m = /(?:at\s+(?:.*?\s+)?\(?|@)?((?:https?|file|webpack|vite|blob):[^\s()]+?):(\d+):(\d+)\)?\s*$/.exec(line.trim());
+    if (!m || !m[1] || INTERNAL_FRAME.test(m[1])) continue;
+    return { fileName: m[1], lineNumber: Number(m[2]), columnNumber: Number(m[3]) };
+  }
+  return void 0;
+}
+function sourceOf(fiber) {
+  const src = fiber._debugSource;
+  if (src && typeof src.fileName === "string") {
+    const out = { fileName: src.fileName };
+    if (typeof src.lineNumber === "number") out.lineNumber = src.lineNumber;
+    if (typeof src.columnNumber === "number") out.columnNumber = src.columnNumber;
+    return out;
+  }
+  const st = fiber._debugStack;
+  const text = typeof st === "string" ? st : st && typeof st.stack === "string" ? st.stack : null;
+  return text ? parseStackLocation(text) : void 0;
+}
+function bumpCount(fiber) {
+  const prev = counts.get(fiber) ?? (fiber.alternate ? counts.get(fiber.alternate) : void 0) ?? 0;
+  const n = prev + 1;
+  counts.set(fiber, n);
+  return n;
+}
+function componentPath(fiber) {
+  const path = [];
+  let f = fiber.return;
+  while (f && f.tag !== HostRoot) {
+    if (isComponentTag(f.tag)) path.unshift(fiberName(f));
+    f = f.return;
+  }
+  return path;
+}
+function ownerName(fiber) {
+  const owner = fiber._debugOwner;
+  if (!owner) return null;
+  if (owner.type !== void 0) return getDisplayName(owner.type);
+  return typeof owner.name === "string" ? owner.name : null;
+}
+var isStateNode = (n) => !!n.queue && typeof n.queue.lastRenderedReducer === "function";
+var isStoreNode = (n) => !!n.queue && typeof n.queue.getSnapshot === "function";
+function hookLabel2(node) {
+  if (isStoreNode(node)) return "useSyncExternalStore";
+  if (isStateNode(node)) {
+    const r = node.queue.lastRenderedReducer;
+    return r.name === "basicStateReducer" ? "useState" : "useReducer";
+  }
+  return "state";
+}
+var NODELESS_HOOKS = /* @__PURE__ */ new Set(["useContext", "useDebugValue", "use"]);
+function hookLabelsFor(fiber, first) {
+  const types = fiber._debugHookTypes?.filter((t) => !NODELESS_HOOKS.has(t));
+  let nodeCount = 0;
+  for (let n = first; n; n = n.next) nodeCount++;
+  return types && types.length === nodeCount ? types : null;
+}
+var isHookList = (v) => !!v && typeof v === "object" && "next" in v;
+function snapshotHooks(fiber) {
+  const out = [];
+  if (fiber.tag === ClassComponent) return out;
+  const first = fiber.memoizedState;
+  if (!isHookList(first)) return out;
+  const labels = hookLabelsFor(fiber, first);
+  let i = 0;
+  for (let n = first; n; n = n.next, i++) {
+    if (!isStateNode(n) && !isStoreNode(n)) continue;
+    const hook = labels?.[i] ?? hookLabel2(n);
+    out.push({ path: `${hook}#${i}`, hook, index: i, value: n.memoizedState });
+  }
+  return out;
+}
+function snapshotContexts(fiber) {
+  const out = [];
+  for (let d = fiber.dependencies?.firstContext ?? null; d; d = d.next) out.push({ name: d.context.displayName ?? "Context", value: d.memoizedValue });
+  return out;
+}
+function diffHooks(fiber, alt) {
+  const out = [];
+  if (fiber.tag === ClassComponent) return out;
+  let a = alt.memoizedState;
+  let b = fiber.memoizedState;
+  if (!a || !b || typeof b !== "object" || !("next" in b)) return out;
+  const labels = hookLabelsFor(fiber, b);
+  let i = 0;
+  while (a && b) {
+    if ((isStateNode(b) || isStoreNode(b)) && !Object.is(a.memoizedState, b.memoizedState)) {
+      const hook = labels?.[i] ?? hookLabel2(b);
+      out.push({
+        path: `${hook}#${i}`,
+        hook,
+        index: i,
+        kind: classify(a.memoizedState, b.memoizedState),
+        prev: a.memoizedState,
+        next: b.memoizedState
+      });
+    }
+    a = a.next;
+    b = b.next;
+    i++;
+  }
+  return out;
+}
+function findProvider(fiber, context) {
+  let f = fiber.return;
+  while (f && f.tag !== HostRoot) {
+    if (f.tag === ContextProvider) {
+      const t = f.type;
+      if (t === context || t && typeof t === "object" && t._context === context) return f;
+    }
+    f = f.return;
+  }
+  return null;
+}
+var isPlainObject2 = (v) => typeof v === "object" && v !== null && !Array.isArray(v) && Object.getPrototypeOf(v) === Object.prototype;
+function diffContexts(fiber, alt) {
+  const out = [];
+  let a = alt.dependencies?.firstContext ?? null;
+  let b = fiber.dependencies?.firstContext ?? null;
+  let i = 0;
+  while (a && b) {
+    if (a.context === b.context && !Object.is(a.memoizedValue, b.memoizedValue)) {
+      const name = b.context.displayName ?? "Context";
+      const change = {
+        path: `useContext(${name})`,
+        hook: "useContext",
+        index: i,
+        kind: classify(a.memoizedValue, b.memoizedValue),
+        prev: a.memoizedValue,
+        next: b.memoizedValue
+      };
+      const provider = findProvider(fiber, b.context);
+      if (provider) {
+        const path = componentPath(provider);
+        change.provider = { component: path[path.length - 1] ?? null, path };
+      }
+      if (isPlainObject2(a.memoizedValue) && isPlainObject2(b.memoizedValue)) {
+        const prev = a.memoizedValue;
+        const next = b.memoizedValue;
+        const keys = /* @__PURE__ */ new Set([...Object.keys(prev), ...Object.keys(next)]);
+        change.changedKeys = [...keys].filter((k) => !Object.is(prev[k], next[k]));
+        change.totalKeys = keys.size;
+      }
+      out.push(change);
+    }
+    a = a.next;
+    b = b.next;
+    i++;
+  }
+  return out;
+}
+var isGenuine2 = (c) => c.kind === "different" || c.kind === "added" || c.kind === "removed";
+function analyze(fiber, alt, trackHooks) {
+  const prevProps = alt.memoizedProps ?? {};
+  const nextProps = fiber.memoizedProps ?? {};
+  const propChanges = prevProps === nextProps ? [] : diffRecords(prevProps, nextProps);
+  let stateChanges = [];
+  let hookChanges = [];
+  if (fiber.tag === ClassComponent) {
+    if (alt.memoizedState !== fiber.memoizedState) {
+      stateChanges = diffRecords(
+        alt.memoizedState ?? {},
+        fiber.memoizedState ?? {}
+      );
+    }
+  } else if (trackHooks) {
+    hookChanges = [...diffHooks(fiber, alt), ...diffContexts(fiber, alt)];
+  }
+  const isStateHook = (h) => h.hook !== "useContext" && h.hook !== "useSyncExternalStore";
+  const causes = [];
+  if (propChanges.some(isGenuine2)) causes.push("props");
+  if (stateChanges.some(isGenuine2) || hookChanges.some((h) => isStateHook(h) && isGenuine2(h))) causes.push("state");
+  if (hookChanges.some((h) => !isStateHook(h) && isGenuine2(h))) causes.push("hooks");
+  const trigger = causes.length === 0 ? "parent" : causes.length === 1 ? causes[0] : "mixed";
+  return { propChanges, stateChanges, hookChanges, trigger };
+}
+function nearestRenderedAncestor(fiber, cache2, trackHooks) {
+  let f = fiber.return;
+  while (f && f.tag !== HostRoot) {
+    if (isComponentTag(f.tag) && f.alternate && didRender(f)) {
+      let info = cache2.get(f);
+      if (info === void 0) {
+        info = { name: fiberName(f), trigger: analyze(f, f.alternate, trackHooks).trigger };
+        cache2.set(f, info);
+      }
+      return info;
+    }
+    f = f.return;
+  }
+  return null;
+}
+function updatersOf(root) {
+  const set = root.memoizedUpdaters;
+  if (!set || typeof set.forEach !== "function") return [];
+  const names = [];
+  set.forEach((f) => {
+    const comp = nearestComponent(f);
+    if (comp) {
+      const name = fiberName(comp);
+      if (!names.includes(name)) names.push(name);
+    }
+  });
+  return names;
+}
+var lastCommit = null;
+var EFFECT_LOOP_WINDOW_MS = 50;
+function onCommit(root, commitPriority) {
+  const s = getState();
+  if (!s.enabled) return;
+  s.commits++;
+  const o = s.options;
+  const trackHooks = o.trackHooks !== false;
+  const rendered = [];
+  const renderedNames = /* @__PURE__ */ new Set();
+  let hot = false;
+  let suspenseResolved = false;
+  const stack = [root.current];
+  while (stack.length) {
+    const fiber = stack.pop();
+    const alt = fiber.alternate;
+    if (alt && isComponentTag(fiber.tag) && didRender(fiber)) {
+      if (isHotSwapped(fiber, alt)) hot = true;
+      renderedNames.add(fiberName(fiber));
+      if (shouldTrack(fiberType(fiber), o)) rendered.push(fiber);
+    }
+    if (fiber.tag === SuspenseComponent && alt && alt.memoizedState !== null && fiber.memoizedState === null) suspenseResolved = true;
+    if (!alt || fiber.child !== alt.child) {
+      for (let c = fiber.child; c; c = c.sibling) stack.push(c);
+    }
+  }
+  if (hot && o.ignoreHotReload !== false) return;
+  rendered.reverse();
+  const at = nowMs();
+  const updaters = updatersOf(root);
+  let commitCause;
+  let afterCommit;
+  if (lastCommit && at - lastCommit.at < EFFECT_LOOP_WINDOW_MS && updaters.some((u) => lastCommit.rendered.has(u))) {
+    commitCause = "effect-after-commit";
+    afterCommit = lastCommit.id;
+  } else if (suspenseResolved) commitCause = "suspense-resolved";
+  if (rendered.length === 0) {
+    lastCommit = { id: s.nextCommitId, at, rendered: renderedNames };
+    return;
+  }
+  const commitId = s.nextCommitId++;
+  lastCommit = { id: commitId, at, rendered: renderedNames };
+  const dispatcherRef = o.resolveHookNames ? getDispatcherRef() : null;
+  const parentCache = /* @__PURE__ */ new Map();
+  for (const fiber of rendered) {
+    const alt = fiber.alternate;
+    const a = analyze(fiber, alt, trackHooks);
+    const durations = durationsOf(fiber);
+    let hookState = o.includeState !== false && trackHooks ? snapshotHooks(fiber) : void 0;
+    if (dispatcherRef && fiber.tag !== ClassComponent && (a.hookChanges.length || hookState && hookState.length)) {
+      const names = resolveHookNames(fiber, dispatcherRef);
+      if (names.size) {
+        for (const c of a.hookChanges) if (c.hook !== "useContext" && names.has(c.index)) c.custom = names.get(c.index);
+        if (hookState) hookState = hookState.map((h) => names.has(h.index) ? { ...h, custom: names.get(h.index) } : h);
+      }
+    }
+    const report = buildReport({
+      component: fiberName(fiber),
+      instanceId: instanceId(fiber),
+      renderCount: bumpCount(fiber),
+      prevProps: alt.memoizedProps ?? {},
+      nextProps: fiber.memoizedProps ?? {},
+      propChanges: a.propChanges,
+      stateChanges: a.stateChanges,
+      hookChanges: a.hookChanges,
+      ...o.includeState !== false ? {
+        hookState,
+        contexts: trackHooks ? snapshotContexts(fiber) : void 0,
+        state: fiber.tag === ClassComponent && fiber.memoizedState && typeof fiber.memoizedState === "object" ? fiber.memoizedState : void 0
+      } : {},
+      updaters,
+      commitCause,
+      afterCommit,
+      key: fiber.key === null || fiber.key === void 0 ? null : String(fiber.key),
+      parent: a.trigger === "parent" ? nearestRenderedAncestor(fiber, parentCache, trackHooks) : null,
+      owner: ownerName(fiber),
+      path: componentPath(fiber),
+      memoized: isMemoizedFiber(fiber),
+      selfDuration: durations ? durations.self : void 0,
+      treeDuration: durations ? durations.tree : void 0,
+      commitId,
+      commitPriority,
+      source: sourceOf(fiber)
+    });
+    dispatch(report);
+  }
+}
+
+// src/tracker.ts
+var MEMO = /* @__PURE__ */ Symbol.for("react.memo");
+var FORWARD_REF = /* @__PURE__ */ Symbol.for("react.forward_ref");
+var isMemo = (t) => typeof t === "object" && t !== null && t.$$typeof === MEMO;
+var isForwardRef = (t) => typeof t === "object" && t !== null && t.$$typeof === FORWARD_REF;
+var isClass = (t) => typeof t === "function" && !!t.prototype?.isReactComponent;
+var isPureClass = (t) => isClass(t) && !!t.prototype.isPureReactComponent;
+var isComponentLike = (t) => typeof t === "function" || isMemo(t) || isForwardRef(t);
+function getDisplayName(type) {
+  if (typeof type === "string") return type;
+  if (isMemo(type)) return type.displayName ?? getDisplayName(type.type);
+  if (isForwardRef(type)) return type.displayName ?? getDisplayName(type.render);
+  if (typeof type === "function") {
+    const t = type;
+    return t.displayName ?? (t.name || "Anonymous");
+  }
+  return "Anonymous";
+}
+function hasMarker(type) {
+  if (type === null || typeof type !== "function" && typeof type !== "object") return false;
+  if (type[MARKER] === true) return true;
+  if (isMemo(type)) return hasMarker(type.type);
+  if (isForwardRef(type)) return hasMarker(type.render);
+  return false;
+}
+function matches(m, name) {
+  if (typeof m === "string") return m === name;
+  if (m instanceof RegExp) return m.test(name);
+  return m(name);
+}
+function shouldTrack(type, o) {
+  if (!isComponentLike(type)) return false;
+  const name = getDisplayName(type);
+  if (o.exclude?.some((m) => matches(m, name))) return false;
+  if (hasMarker(type)) return true;
+  if (o.include?.some((m) => matches(m, name))) return true;
+  if (o.trackAllComponents) return true;
+  if (o.trackAllMemoized) return isMemo(type) || isPureClass(type);
+  return false;
+}
+function init(options = {}) {
+  const s = getState();
+  s.options = { ...options };
+  s.printed.clear();
+  if (!s.enabled) {
+    s.detach = attach();
+    s.enabled = true;
+  }
+  return disable;
+}
+function configure(options) {
+  const s = getState();
+  s.options = { ...s.options, ...options };
+}
+function disable() {
+  const s = getState();
+  if (!s.enabled) return;
+  s.detach?.();
+  s.detach = null;
+  s.enabled = false;
+}
+function isEnabled() {
+  return getState().enabled;
+}
+
+// src/overlay.ts
+var ROOT_ID = "rerender-lens-overlay";
+var layer = null;
+function ensureLayer() {
+  if (typeof document === "undefined" || !document.body) return null;
+  if (layer && layer.root.isConnected) return layer;
+  let root = document.getElementById(ROOT_ID);
+  if (!root) {
+    root = document.createElement("div");
+    root.id = ROOT_ID;
+    root.setAttribute("aria-hidden", "true");
+    Object.assign(root.style, {
+      position: "fixed",
+      inset: "0",
+      pointerEvents: "none",
+      zIndex: "2147483647",
+      overflow: "visible"
+    });
+    document.body.appendChild(root);
+  }
+  layer = { root, sticky: [] };
+  return layer;
+}
+function box(rect, color, fill, label) {
+  const b = document.createElement("div");
+  Object.assign(b.style, {
+    position: "absolute",
+    left: `${rect.left}px`,
+    top: `${rect.top}px`,
+    width: `${Math.max(rect.width, 2)}px`,
+    height: `${Math.max(rect.height, 2)}px`,
+    boxSizing: "border-box",
+    border: `2px solid ${color}`,
+    background: fill,
+    borderRadius: "2px"
+  });
+  if (label) {
+    const tag = document.createElement("span");
+    tag.textContent = label;
+    Object.assign(tag.style, {
+      position: "absolute",
+      left: "-2px",
+      top: rect.top > 20 ? "-20px" : "100%",
+      font: "11px/16px system-ui, sans-serif",
+      color: "#fff",
+      background: color,
+      padding: "1px 5px",
+      borderRadius: "2px",
+      whiteSpace: "nowrap"
+    });
+    b.appendChild(tag);
+  }
+  return b;
+}
+function highlight(target) {
+  const l = ensureLayer();
+  if (!l) return;
+  for (const s of l.sticky) s.remove();
+  l.sticky = [];
+  if (!target) return;
+  for (const node of target.nodes) {
+    const rect = node.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) continue;
+    const b = box(rect, "#1a73e8", "rgba(26, 115, 232, 0.12)", target.label);
+    l.root.appendChild(b);
+    l.sticky.push(b);
+  }
+}
+function clearHighlight() {
+  highlight(null);
+}
+function flash(target, duration = 500) {
+  const l = ensureLayer();
+  if (!l) return;
+  for (const node of target.nodes) {
+    const rect = node.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) continue;
+    const b = box(rect, "#d93025", "rgba(217, 48, 37, 0.15)");
+    b.style.transition = `opacity ${duration}ms ease-out`;
+    l.root.appendChild(b);
+    requestAnimationFrame(() => {
+      b.style.opacity = "0";
+    });
+    setTimeout(() => b.remove(), duration + 50);
+  }
+}
+
+// src/version.ts
+var VERSION = "0.3.0" ;
+
+// src/devtools.ts
+var DEVTOOLS_MARKER = "__rerenderLens";
+var PROTOCOL_VERSION = 2;
+var DEFAULT_CHANNEL = "rerender-lens";
+function serialize(value, maxDepth = 6, seen = /* @__PURE__ */ new WeakSet(), depth = 0) {
+  if (value === null || value === void 0) return value;
+  const t = typeof value;
+  if (t === "string" || t === "boolean") return value;
+  if (t === "number") return Number.isFinite(value) ? value : String(value);
+  if (t === "bigint") return `${String(value)}n`;
+  if (t === "symbol") return String(value);
+  if (t === "function") return `\u0192 ${value.name || "anonymous"}`;
+  const obj = value;
+  if (seen.has(obj)) return "[Circular]";
+  if (depth >= maxDepth) return "[\u2026]";
+  seen.add(obj);
+  try {
+    if (isReactElement(obj)) {
+      const out2 = { $type: "element", name: getDisplayName(obj.type) };
+      if (obj.key !== null && obj.key !== void 0) out2.key = String(obj.key);
+      out2.props = serialize(obj.props, maxDepth, seen, depth + 1);
+      return out2;
+    }
+    if (obj instanceof Date) return { $type: "Date", value: obj.toISOString() };
+    if (obj instanceof RegExp) return { $type: "RegExp", value: String(obj) };
+    if (obj instanceof Map) {
+      return { $type: "Map", entries: [...obj].map(([k, v]) => [serialize(k, maxDepth, seen, depth + 1), serialize(v, maxDepth, seen, depth + 1)]) };
+    }
+    if (obj instanceof Set) return { $type: "Set", values: [...obj].map((v) => serialize(v, maxDepth, seen, depth + 1)) };
+    if (Array.isArray(obj)) return obj.map((v) => serialize(v, maxDepth, seen, depth + 1));
+    if (typeof Element !== "undefined" && obj instanceof Element) return `<${obj.tagName.toLowerCase()}>`;
+    const out = {};
+    for (const k of Object.keys(obj)) out[k] = serialize(obj[k], maxDepth, seen, depth + 1);
+    const proto = Object.getPrototypeOf(obj);
+    if (proto && proto !== Object.prototype && proto.constructor?.name) out.$type = proto.constructor.name;
+    return out;
+  } finally {
+    seen.delete(obj);
+  }
+}
+var matcherToString = (m) => typeof m === "string" ? m : m instanceof RegExp ? String(m) : null;
+var stringToMatcher = (s) => {
+  const m = /^\/(.+)\/([a-z]*)$/.exec(s);
+  if (m && m[1] !== void 0) {
+    try {
+      return new RegExp(m[1], m[2]);
+    } catch {
+      return s;
+    }
+  }
+  return s;
+};
+function serializeOptions(o) {
+  const out = {};
+  const bools = ["trackAllMemoized", "trackAllComponents", "trackHooks", "includeState", "resolveHookNames", "logAll", "silent", "collapse", "ignoreHotReload"];
+  for (const k of bools) if (typeof o[k] === "boolean") out[k] = o[k];
+  if (typeof o.maxReportsPerComponent === "number") out.maxReportsPerComponent = o.maxReportsPerComponent;
+  if (o.include) out.include = o.include.map(matcherToString).filter((x) => x !== null);
+  if (o.exclude) out.exclude = o.exclude.map(matcherToString).filter((x) => x !== null);
+  return out;
+}
+function deserializeOptions(o) {
+  const out = {};
+  const bools = ["trackAllMemoized", "trackAllComponents", "trackHooks", "includeState", "resolveHookNames", "logAll", "silent", "collapse", "ignoreHotReload"];
+  for (const k of bools) if (typeof o[k] === "boolean") out[k] = o[k];
+  if (typeof o.maxReportsPerComponent === "number") out.maxReportsPerComponent = o.maxReportsPerComponent;
+  if (Array.isArray(o.include)) out.include = o.include.filter((s) => typeof s === "string" && s).map(stringToMatcher);
+  if (Array.isArray(o.exclude)) out.exclude = o.exclude.filter((s) => typeof s === "string" && s).map(stringToMatcher);
+  return out;
+}
+function createDevtoolsNotifier(options = {}) {
+  const bufferSize = options.bufferSize ?? 300;
+  const maxDepth = options.maxDepth ?? 6;
+  const target = options.target ?? (typeof window !== "undefined" ? window : void 0);
+  const buffer = [];
+  let seq = 0;
+  let flashOn = options.flashAvoidable ?? false;
+  const post = (type, payload) => {
+    if (!target) return;
+    const msg = { [DEVTOOLS_MARKER]: true, version: PROTOCOL_VERSION, type, payload };
+    target.postMessage(msg, "*");
+  };
+  const source = options.source ?? "page";
+  const info = () => ({
+    count: buffer.length,
+    library: VERSION,
+    protocol: PROTOCOL_VERSION,
+    react: getRenderers(),
+    production: isProductionReact(),
+    enabled: isEnabled(),
+    options: serializeOptions(getState().options),
+    source,
+    injected: typeof window !== "undefined" && typeof window.__RERENDER_LENS_INJECTED__ === "string",
+    scheduled: getState().scheduled,
+    commits: getState().commits,
+    overhead: { totalMs: getState().overheadMs, maxCommitMs: getState().maxCommitMs }
+  });
+  const bridge = {
+    replay: () => {
+      post("hello", info());
+      for (const e of buffer) post("report", e.payload);
+    },
+    clear: () => {
+      buffer.length = 0;
+      post("clear");
+    },
+    get size() {
+      return buffer.length;
+    },
+    version: PROTOCOL_VERSION,
+    library: VERSION,
+    info,
+    pull: (since = 0) => {
+      const first = buffer[0];
+      const dropped = since > 0 && !!first && first.seq > since + 1;
+      const reports = buffer.filter((e) => e.seq > since).map((e) => e.payload);
+      return { seq, reports, dropped };
+    },
+    configure: (next) => {
+      configure(deserializeOptions(next ?? {}));
+      return serializeOptions(getState().options);
+    },
+    getOptions: () => serializeOptions(getState().options),
+    highlight: (id) => {
+      if (id === null || id === void 0) {
+        clearHighlight();
+        return true;
+      }
+      const fiber = fiberById(id);
+      if (!fiber) {
+        clearHighlight();
+        return false;
+      }
+      const nodes = hostNodesOf(fiber);
+      highlight({ nodes, label: fiberName(fiber) });
+      return nodes.length > 0;
+    },
+    flashAvoidable: (on) => {
+      flashOn = !!on;
+    },
+    inspect: (node) => {
+      const comp = nearestComponent(fiberForNode(node));
+      if (!comp) return null;
+      const id = instanceIdOf(comp) ?? null;
+      const path = [];
+      let f = comp.return;
+      while (f) {
+        if (f.tag === 0 || f.tag === 1 || f.tag === 11 || f.tag === 14 || f.tag === 15) path.unshift(fiberName(f));
+        f = f.return;
+      }
+      return {
+        component: fiberName(comp),
+        instanceId: id,
+        tracked: shouldTrack(fiberType(comp), getState().options),
+        path,
+        reports: id === null ? [] : buffer.filter((e) => e.instanceId === id).slice(-20).map((e) => e.payload)
+      };
+    }
+  };
+  if (typeof window !== "undefined") window.__RERENDER_LENS_DEVTOOLS__ = bridge;
+  const runCommand = (data) => {
+    const reply = { __rerenderLensReply: true, id: data.id };
+    try {
+      switch (data.cmd) {
+        case "info":
+          reply.result = info();
+          break;
+        case "pull":
+          reply.result = bridge.pull(typeof data.arg === "number" ? data.arg : 0);
+          break;
+        case "replay":
+          bridge.replay();
+          reply.result = true;
+          break;
+        case "clear":
+          bridge.clear();
+          reply.result = true;
+          break;
+        case "configure":
+          reply.result = bridge.configure(data.arg ?? {});
+          break;
+        case "highlight":
+          reply.result = bridge.highlight(typeof data.arg === "number" ? data.arg : null);
+          break;
+        case "flash":
+          bridge.flashAvoidable(!!data.arg);
+          reply.result = true;
+          break;
+        default:
+          reply.error = `unknown command ${String(data.cmd)}`;
+      }
+    } catch (e) {
+      reply.error = String(e.message || e);
+    }
+    return reply;
+  };
+  const isCommand = (data) => !!data && typeof data === "object" && data.__rerenderLensCmd === true && typeof data.id === "string";
+  const envelope = (type, payload) => ({ [DEVTOOLS_MARKER]: true, version: PROTOCOL_VERSION, type, payload });
+  const sinks = [];
+  if (options.channel && typeof BroadcastChannel === "function") {
+    const name = typeof options.channel === "string" ? options.channel : DEFAULT_CHANNEL;
+    try {
+      const channel = new BroadcastChannel(name);
+      channel.onmessage = (event) => {
+        if (isCommand(event.data)) channel.postMessage(runCommand(event.data));
+      };
+      sinks.push((message) => {
+        try {
+          channel.postMessage(message);
+        } catch {
+        }
+      });
+    } catch {
+    }
+  }
+  const relayUrl = options.relay ?? (typeof window !== "undefined" ? window.__RERENDER_LENS_RELAY__ : void 0);
+  const ES = options.eventSource ?? (typeof EventSource === "function" ? EventSource : null);
+  if (relayUrl && ES && typeof fetch === "function") {
+    const base = relayUrl.replace(/\/$/, "");
+    let queue = [];
+    let scheduled = false;
+    const flush = () => {
+      scheduled = false;
+      const batch = queue;
+      queue = [];
+      fetch(`${base}/message`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(batch), keepalive: true }).catch(() => {
+      });
+    };
+    const relaySend = (message) => {
+      queue.push(message);
+      if (!scheduled) {
+        scheduled = true;
+        setTimeout(flush, 0);
+      }
+    };
+    try {
+      const stream = new ES(`${base}/events?role=app`);
+      stream.onmessage = (event) => {
+        let parsed;
+        try {
+          parsed = JSON.parse(event.data);
+        } catch {
+          return;
+        }
+        for (const m of Array.isArray(parsed) ? parsed : [parsed]) if (isCommand(m)) relaySend(runCommand(m));
+      };
+      stream.onerror = () => {
+      };
+      sinks.push(relaySend);
+    } catch {
+    }
+  }
+  const postAll = (type, payload) => {
+    post(type, payload);
+    if (sinks.length) {
+      const message = envelope(type, payload);
+      for (const sink of sinks) sink(message);
+    }
+  };
+  if (sinks.length) {
+    const replay = bridge.replay;
+    const clear = bridge.clear;
+    bridge.replay = () => {
+      for (const sink of sinks) {
+        sink(envelope("hello", info()));
+        for (const e of buffer) sink(envelope("report", e.payload));
+      }
+      replay();
+    };
+    bridge.clear = () => {
+      clear();
+      for (const sink of sinks) sink(envelope("clear"));
+    };
+  }
+  postAll("hello", info());
+  return (report) => {
+    const payload = serialize(report, maxDepth);
+    buffer.push({ seq: ++seq, instanceId: report.instanceId, payload });
+    if (buffer.length > bufferSize) buffer.splice(0, buffer.length - bufferSize);
+    postAll("report", payload);
+    if (flashOn && report.avoidable && report.instanceId) {
+      const fiber = fiberById(report.instanceId);
+      if (fiber) flash({ nodes: hostNodesOf(fiber), label: report.component });
+    }
+  };
+}
+
+// src/setup.ts
+var env = (key) => {
+  try {
+    return typeof process !== "undefined" && process && process.env ? process.env[key] : void 0;
+  } catch {
+    return void 0;
+  }
+};
+if (env("NODE_ENV") !== "production" && typeof window !== "undefined" && !window.__RERENDER_LENS_DEVTOOLS__) {
+  const relay = env("RERENDER_LENS_RELAY") || env("NEXT_PUBLIC_RERENDER_LENS_RELAY");
+  init({ trackAllMemoized: true, notifier: createDevtoolsNotifier(relay ? { relay } : {}) });
+}
+//# sourceMappingURL=setup.js.map
+//# sourceMappingURL=setup.js.map