react-render-detective 0.4.0 → 0.6.0

package/dist/index.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
-var chunkJD4IJ4MN_cjs = require('./chunk-JD4IJ4MN.cjs');
-var chunkDZ3BZ654_cjs = require('./chunk-DZ3BZ654.cjs');
+var chunkRGT44QQI_cjs = require('./chunk-RGT44QQI.cjs');
 var chunkH5RG2EPP_cjs = require('./chunk-H5RG2EPP.cjs');
+var chunkLCGXVRJR_cjs = require('./chunk-LCGXVRJR.cjs');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -26,6 +26,40 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
+// src/console/style.ts
+var PALETTE = {
+  plain: "",
+  dim: "color:#8a94a6",
+  strong: "font-weight:600",
+  good: "color:#1f9d5b",
+  warn: "color:#c2820a",
+  bad: "color:#d1493f;font-weight:600"
+};
+var supportsStyling = () => {
+  try {
+    return typeof window !== "undefined" && typeof document !== "undefined";
+  } catch {
+    return false;
+  }
+};
+function styled(segments) {
+  if (!supportsStyling()) {
+    return [segments.map((s) => typeof s === "string" ? s : s[0]).join("")];
+  }
+  let format = "";
+  const styles = [];
+  for (const segment of segments) {
+    if (typeof segment === "string") {
+      format += segment.replace(/%/g, "%%");
+      continue;
+    }
+    const [text, tone] = segment;
+    format += `%c${text.replace(/%/g, "%%")}%c`;
+    styles.push(PALETTE[tone], "");
+  }
+  return [format, ...styles];
+}
+
 // src/console/reporter.ts
 var ICON = {
   normal: "\xB7",
@@ -34,30 +68,102 @@ var ICON = {
   "very-slow": "\u25B2\u25B2",
   critical: "\u25A0"
 };
+var BATCH_WINDOW_MS = 400;
 function attachConsoleReporter(detective) {
-  return detective.subscribe((event) => {
-    const mode = detective.config.mode;
-    if (mode === "silent") return;
+  let pending = [];
+  let timer;
+  const flush = () => {
+    timer = void 0;
+    const batch = pending;
+    pending = [];
+    if (batch.length === 0) return;
     try {
-      if (mode === "verbose") printVerbose(event);
-      else printConcise(event, detective.config.slowRenderThreshold);
+      printBatch(batch, detective.config.slowRenderThreshold);
     } catch {
     }
+  };
+  const unsubscribe = detective.subscribe((event) => {
+    const mode = detective.config.mode;
+    if (mode === "silent") return;
+    if (mode === "verbose") {
+      try {
+        printVerbose(event);
+      } catch {
+      }
+      return;
+    }
+    pending.push(event);
+    if (timer === void 0) {
+      timer = setTimeout(flush, BATCH_WINDOW_MS);
+      timer.unref?.();
+    }
   });
+  return () => {
+    unsubscribe();
+    if (timer !== void 0) clearTimeout(timer);
+  };
 }
-function printConcise(event, slowThreshold) {
-  const { diagnosis, timings, component } = event;
-  const changed = event.changedProps.map((c) => c.key).join(", ");
-  const parts = [
-    `[RRD] ${component.name} #${event.renderNumber}`,
-    `Reason: ${label(event)}`,
-    changed ? `Changed: ${changed}` : void 0,
-    timings.subtreeDuration > 0 ? `Duration: ${timings.selfDuration.toFixed(1)}ms` : void 0
-  ].filter(Boolean);
-  const line = `${ICON[diagnosis.severity] ?? "\xB7"} ${parts.join("  ")}`;
-  const slow = timings.selfDuration >= slowThreshold;
-  if (slow) console.warn(line);
-  else console.log(line);
+function printBatch(batch, slowThreshold) {
+  const byComponent = /* @__PURE__ */ new Map();
+  let totalMs = 0;
+  let avoidable = 0;
+  for (const event of batch) {
+    const key = event.component.name;
+    const entry = byComponent.get(key) ?? {
+      name: key,
+      source: event.component.source,
+      count: 0,
+      totalMs: 0,
+      reasons: /* @__PURE__ */ new Map(),
+      notableReasons: /* @__PURE__ */ new Map(),
+      avoidable: 0,
+      remount: false,
+      slow: false
+    };
+    entry.count++;
+    entry.totalMs += event.timings.selfDuration;
+    entry.reasons.set(event.diagnosis.reason, (entry.reasons.get(event.diagnosis.reason) ?? 0) + 1);
+    if (event.diagnosis.potentiallyAvoidable || event.timings.selfDuration >= slowThreshold) {
+      entry.notableReasons.set(event.diagnosis.reason, (entry.notableReasons.get(event.diagnosis.reason) ?? 0) + 1);
+    }
+    if (event.diagnosis.potentiallyAvoidable) entry.avoidable++;
+    if (event.diagnosis.summary.includes("rebuilt")) entry.remount = true;
+    if (event.timings.selfDuration >= slowThreshold) entry.slow = true;
+    if (!entry.worst || event.timings.selfDuration > entry.worst.timings.selfDuration) entry.worst = event;
+    byComponent.set(key, entry);
+    totalMs += event.timings.selfDuration;
+    if (event.diagnosis.potentiallyAvoidable) avoidable++;
+  }
+  const notable = [...byComponent.values()].filter((a) => a.avoidable > 0 || a.slow || a.remount);
+  if (notable.length === 0) return;
+  const ranked = [...notable].sort((a, b) => b.totalMs - a.totalMs);
+  const anySlow = ranked.some((a) => a.slow);
+  const segments = [
+    ["[RRD] ", "dim"],
+    [`${batch.length} render${batch.length === 1 ? "" : "s"}`, "strong"],
+    [` \xB7 ${totalMs.toFixed(1)}ms`, "dim"]
+  ];
+  if (avoidable > 0) segments.push([` \xB7 ${avoidable} potentially avoidable`, "warn"]);
+  for (const a of ranked.slice(0, 8)) {
+    const reasonSource = a.notableReasons.size > 0 ? a.notableReasons : a.reasons;
+    const reason = [...reasonSource.entries()].sort((x, y) => y[1] - x[1])[0]?.[0] ?? "unknown";
+    const tone = a.remount ? "bad" : a.slow ? "warn" : a.avoidable > 0 ? "warn" : "good";
+    const label2 = `  ${ICON[a.slow ? "slow" : "normal"]} ${a.name}${a.count > 1 ? ` \xD7${a.count}` : ""}`;
+    segments.push("\n", [label2.padEnd(30), tone], [`${a.totalMs.toFixed(1)}ms`, "plain"], [`  ${reason}`, "dim"]);
+    if (a.remount) segments.push(["  rebuilt", "bad"]);
+    if (a.avoidable > 0) segments.push([`  ${a.avoidable} avoidable`, "warn"]);
+    if (a.source) segments.push(["\n      " + a.source, "dim"]);
+  }
+  const worst = ranked[0]?.worst;
+  segments.push(
+    "\n",
+    [
+      worst?.diagnosis.suggestion ? `  \u2192 ${worst.diagnosis.suggestion}` : "  \u2192 rrd.printOpportunities() to rank everything by recoverable time",
+      "dim"
+    ]
+  );
+  const log = anySlow ? console.warn : console.log;
+  log(...styled(segments));
 }
 function printVerbose(event) {
   const { diagnosis, timings } = event;
@@ -80,12 +186,10 @@ function printVerbose(event) {
       for (const c of event.changedProps) console.log(propLine(c));
       console.groupEnd();
     }
-    if (event.unchangedProps.length > 0) {
-      console.log(`Props same:  ${event.unchangedProps.join(", ")}`);
-    }
+    if (event.unchangedProps.length > 0) console.log(`Props same:  ${event.unchangedProps.join(", ")}`);
     if (event.trackedState.length > 0) {
       console.log(
-        `State:       ${event.trackedState.map((s) => `${s.name}: ${chunkDZ3BZ654_cjs.formatInspected(s.previous)} \u2192 ${chunkDZ3BZ654_cjs.formatInspected(s.current)}`).join(", ")}`
+        `State:       ${event.trackedState.map((s) => `${s.name}: ${chunkLCGXVRJR_cjs.formatInspected(s.previous)} \u2192 ${chunkLCGXVRJR_cjs.formatInspected(s.current)}`).join(", ")}`
       );
     }
     if (event.contextChanges.length > 0) {
@@ -102,11 +206,11 @@ function printVerbose(event) {
 }
 function propLine(c) {
   const head = `${c.key} (${c.valueType}) \u2014 ${describeKind(c)}`;
-  if (c.kind === "added") return `${head}: ${chunkDZ3BZ654_cjs.formatInspected(c.current)}`;
-  if (c.kind === "removed") return `${head}: was ${chunkDZ3BZ654_cjs.formatInspected(c.previous)}`;
+  if (c.kind === "added") return `${head}: ${chunkLCGXVRJR_cjs.formatInspected(c.current)}`;
+  if (c.kind === "removed") return `${head}: was ${chunkLCGXVRJR_cjs.formatInspected(c.previous)}`;
   return `${head}
-    previous: ${chunkDZ3BZ654_cjs.formatInspected(c.previous)}
-    current:  ${chunkDZ3BZ654_cjs.formatInspected(c.current)}`;
+    previous: ${chunkLCGXVRJR_cjs.formatInspected(c.previous)}
+    current:  ${chunkLCGXVRJR_cjs.formatInspected(c.current)}`;
 }
 function describeKind(c) {
   switch (c.kind) {
@@ -133,6 +237,8 @@ function label(event) {
       return "context update";
     case "state":
       return "state changed";
+    case "store":
+      return "store update";
     case "state-or-external":
       return "state or external store";
     case "unknown":
@@ -140,194 +246,6 @@ function label(event) {
   }
 }
 
-// src/core/interactions.ts
-var COMMIT_SLACK_MS = 100;
-var FALLBACK_CLOSE_MS = 50;
-var InteractionTracker = class {
-  constructor(capacity = 50) {
-    this.capacity = capacity;
-    this.records = [];
-    this.nextId = 0;
-  }
-  /** Returns false when the browser cannot report event timing. */
-  start() {
-    if (this.observer) return true;
-    const PO = globalThis.PerformanceObserver;
-    const supported = PO?.supportedEntryTypes?.includes("event");
-    if (!PO || !supported) return false;
-    try {
-      const observer = new PO((list) => {
-        for (const entry of list.getEntries()) {
-          const timing = entry;
-          this.record({
-            name: timing.name,
-            startTime: timing.startTime,
-            duration: timing.duration,
-            target: describeTarget(timing.target)
-          });
-        }
-      });
-      observer.observe({ type: "event", buffered: true, durationThreshold: 16 });
-      this.observer = observer;
-      return true;
-    } catch {
-      return false;
-    }
-  }
-  stop() {
-    this.observer?.disconnect();
-    this.observer = void 0;
-  }
-  /** Is the automatic path available in this browser? */
-  get automatic() {
-    return this.observer !== void 0;
-  }
-  /**
-   * Time an interaction by hand.
-   *
-   * The automatic path depends on the Event Timing API, which Safari only
-   * gained in 16.4 and which does not fire for synthetic input at all — so
-   * anything driven by a test harness records nothing. This measures a specific
-   * action instead, up to the paint that follows it, and needs no browser
-   * support beyond `performance.now`.
-   */
-  measure(label2, action) {
-    const startTime = now();
-    let handlerMs = 0;
-    let finished = false;
-    const finish = () => {
-      if (finished) return;
-      finished = true;
-      this.record({ name: label2, startTime, duration: now() - startTime, handlerMs });
-    };
-    let result;
-    try {
-      result = action();
-      handlerMs = now() - startTime;
-    } catch (error) {
-      handlerMs = now() - startTime;
-      finish();
-      throw error;
-    }
-    const raf = globalThis.requestAnimationFrame;
-    if (raf) raf(() => raf(finish));
-    setTimeout(finish, FALLBACK_CLOSE_MS);
-    return result;
-  }
-  /** Exposed for tests and for `measure`. */
-  record(timing) {
-    const record = {
-      id: `interaction_${++this.nextId}`,
-      type: timing.name,
-      target: timing.target,
-      startTime: timing.startTime,
-      durationMs: timing.duration,
-      handlerMs: timing.handlerMs,
-      renders: [],
-      renderTimeMs: 0,
-      avoidableRenderTimeMs: 0
-    };
-    this.records.push(record);
-    if (this.records.length > this.capacity) this.records.shift();
-    return record;
-  }
-  clear() {
-    this.records.length = 0;
-  }
-  /**
-   * Joins render events to interactions by commit time. A render belongs to an
-   * interaction when it committed between the event starting and shortly after
-   * it finished — React commits just after the event handler returns.
-   */
-  attribute(events) {
-    for (const record of this.records) {
-      const from = record.startTime;
-      const to = record.startTime + record.durationMs + COMMIT_SLACK_MS;
-      record.renders = events.filter((e) => e.timings.commitTime >= from && e.timings.commitTime <= to);
-      record.renderTimeMs = record.renders.reduce((a, e) => a + e.timings.selfDuration, 0);
-      record.avoidableRenderTimeMs = record.renders.filter((e) => e.diagnosis.potentiallyAvoidable).reduce((a, e) => a + e.timings.selfDuration, 0);
-    }
-    return [...this.records].sort((a, b) => b.durationMs - a.durationMs);
-  }
-};
-function summarise(record) {
-  const byComponent = /* @__PURE__ */ new Map();
-  for (const event of record.renders) {
-    const entry = byComponent.get(event.component.name) ?? {
-      renders: 0,
-      totalMs: 0,
-      source: event.component.source,
-      cause: event.diagnosis.reason
-    };
-    entry.renders++;
-    entry.totalMs += event.timings.selfDuration;
-    byComponent.set(event.component.name, entry);
-  }
-  const contributors = [...byComponent.entries()].map(([component, v]) => ({ component, source: v.source, renders: v.renders, totalMs: v.totalMs, cause: v.cause })).sort((a, b) => b.totalMs - a.totalMs);
-  const top = contributors[0];
-  const accounted = (record.handlerMs ?? record.durationMs) + record.renderTimeMs;
-  const idleWindow = record.handlerMs !== void 0 && record.durationMs > accounted * 3 && record.durationMs - accounted > 100;
-  const effectiveMs = idleWindow ? accounted : record.durationMs;
-  const share = effectiveMs > 0 ? record.renderTimeMs / effectiveMs : 0;
-  let headline;
-  let nextStep;
-  let confidence = "medium";
-  if (idleWindow) {
-    headline = `${record.type}: ${fmt(record.handlerMs ?? 0)} in the handler and ${fmt(record.renderTimeMs)} rendering. The measured window was ${fmt(record.durationMs)}, but most of that was the page waiting for a frame \u2014 ignore it.`;
-    nextStep = record.renderTimeMs > (record.handlerMs ?? 0) ? `Rendering dominates the real work${top ? `; start with ${top.component}` : ""}.` : "The handler itself costs more than rendering. Profile the handler, not React.";
-    return { interaction: record, contributors, headline, nextStep, confidence: "medium" };
-  }
-  if (record.renders.length === 0) {
-    headline = `${record.type} took ${fmt(record.durationMs)}, and no instrumented component rendered inside it.`;
-    nextStep = "The cost is somewhere other than React rendering \u2014 an event handler, a layout, or an uninstrumented component. Instrument more of the tree to narrow it down.";
-    confidence = "low";
-  } else if (share >= 0.4 && record.avoidableRenderTimeMs > 0) {
-    headline = `${record.type} took ${fmt(record.durationMs)}; ${fmt(record.renderTimeMs)} of it was rendering, and ${fmt(record.avoidableRenderTimeMs)} of that had no input change to explain it.`;
-    nextStep = top ? `Start with ${top.component}${top.source ? ` (${top.source})` : ""} \u2014 ${fmt(top.totalMs)} across ${top.renders} render${top.renders === 1 ? "" : "s"}.` : "Look at the top contributor below.";
-    confidence = "high";
-  } else if (share >= 0.4) {
-    headline = `${record.type} took ${fmt(record.durationMs)}; ${fmt(record.renderTimeMs)} of it was rendering, all of it explained by real input changes.`;
-    nextStep = "This is genuine work. Make the renders cheaper rather than fewer \u2014 or do less of it per interaction.";
-    confidence = "high";
-  } else {
-    headline = `${record.type} took ${fmt(record.durationMs)}, but only ${fmt(record.renderTimeMs)} was React rendering.`;
-    nextStep = "Most of the cost is outside rendering \u2014 event handlers, layout or paint. A browser profile will show more than this tool can.";
-    confidence = "medium";
-  }
-  return { interaction: record, contributors, headline, nextStep, confidence };
-}
-function formatInteraction(summary) {
-  const { interaction: i } = summary;
-  const lines = [
-    `${i.type}${i.target ? ` on ${i.target}` : ""}   ${fmt(i.durationMs)}`,
-    "",
-    summary.headline
-  ];
-  if (summary.contributors.length > 0) {
-    lines.push("", "Rendering inside this interaction");
-    for (const c of summary.contributors.slice(0, 8)) {
-      lines.push(
-        `  ${c.component.padEnd(22)} ${String(c.renders).padStart(4)} render(s)  ${fmt(c.totalMs).padStart(8)}  ${c.cause}`
-      );
-    }
-  }
-  lines.push("", `Next step`, `  ${summary.nextStep}`, "", `Confidence: ${summary.confidence}`);
-  return lines.join("\n");
-}
-function describeTarget(target) {
-  if (!target || typeof target !== "object") return void 0;
-  const el = target;
-  if (!el.tagName) return void 0;
-  const tag = el.tagName.toLowerCase();
-  if (el.id) return `${tag}#${el.id}`;
-  const className = typeof el.className === "string" ? el.className.trim().split(/\s+/)[0] : void 0;
-  if (className) return `${tag}.${className}`;
-  const text = el.textContent?.trim().slice(0, 20);
-  return text ? `${tag} "${text}"` : tag;
-}
-var fmt = (ms) => `${ms.toFixed(1)}ms`;
-var now = () => typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
-
 // src/core/opportunities.ts
 var DEFAULT_MIN_SAVING_MS = 1;
 function rankOpportunities({ events, lifecycles, minSavingMs = DEFAULT_MIN_SAVING_MS }) {
@@ -335,7 +253,7 @@ function rankOpportunities({ events, lifecycles, minSavingMs = DEFAULT_MIN_SAVIN
   const out = [];
   for (const name of names) {
     const lifecycle = lifecycles.get(name);
-    const explanation = chunkJD4IJ4MN_cjs.explainEvents(name, events, lifecycle);
+    const explanation = chunkRGT44QQI_cjs.explainEvents(name, events, lifecycle);
     if (!explanation) continue;
     const mounts = events.filter((e) => e.component.name === name && e.phase === "mount");
     const averageMountCost = mounts.length ? mounts.reduce((a, e) => a + e.timings.selfDuration, 0) / mounts.length : 0;
@@ -381,7 +299,7 @@ function formatOpportunities(opportunities) {
 var AncestryContext = React.createContext(void 0);
 AncestryContext.displayName = "RenderDetectiveAncestry";
 function useInstrumentedNode(name, props, source) {
-  const detective = chunkDZ3BZ654_cjs.getDetective();
+  const detective = chunkLCGXVRJR_cjs.getDetective();
   const parent = React.useContext(AncestryContext);
   const [node] = React.useState(
     () => detective.enabled ? detective.createNode(name, parent, source) : void 0
@@ -431,7 +349,7 @@ var IS_WRAPPER = /* @__PURE__ */ Symbol.for("react-render-detective.wrapper");
 function withRenderDetective(Component, options = {}) {
   if (Component[IS_WRAPPER]) return Component;
   const name = options.name ?? componentName(Component);
-  chunkDZ3BZ654_cjs.getDetective().noteDefinition(name, options.source, options.declaredInRender === true);
+  chunkLCGXVRJR_cjs.getDetective().noteDefinition(name, options.source, options.declaredInRender === true);
   function RenderDetected(props) {
     const { node, onRender } = useInstrumentedNode(name, props, options.source);
     return renderInstrumented(node, onRender, /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props }));
@@ -446,8 +364,40 @@ function RenderDetective({ name, children }) {
   const { node, onRender } = useInstrumentedNode(name, { children });
   return renderInstrumented(node, onRender, children);
 }
+var useOwnerId = typeof React__namespace.useId === "function" ? React__namespace.useId : () => "";
+function trackSelector(value, options = {}) {
+  const detective = chunkLCGXVRJR_cjs.getDetective();
+  const node = React.useContext(AncestryContext);
+  const ownerId = useOwnerId();
+  const previous = React.useRef(void 0);
+  if (!detective.enabled) return value;
+  if (node && node.stateOwner === void 0) node.stateOwner = ownerId;
+  const owns = !node || node.stateOwner === ownerId;
+  const prior = previous.current;
+  previous.current = { value };
+  if (!prior || !node || !owns) return value;
+  if (Object.is(prior.value, value)) return value;
+  try {
+    const equal = chunkLCGXVRJR_cjs.shallowEqual(prior.value, value, detective.config);
+    detective.recordSelectorChange(node, {
+      name: options.name ?? options.source ?? "selector",
+      source: options.source,
+      referenceOnly: equal === true,
+      previous: chunkLCGXVRJR_cjs.inspect(prior.value, detective.config.inspection),
+      current: chunkLCGXVRJR_cjs.inspect(value, detective.config.inspection)
+    });
+  } catch {
+  }
+  return value;
+}
+function createTrackedSelectorHook(hook, options = {}) {
+  return function useTrackedSelector(...args) {
+    const value = hook(...args);
+    return trackSelector(value, options);
+  };
+}
 function useRenderDiagnostics(name, props) {
-  const detective = chunkDZ3BZ654_cjs.getDetective();
+  const detective = chunkLCGXVRJR_cjs.getDetective();
   const parent = React.useContext(AncestryContext);
   const [node] = React.useState(() => {
     if (!detective.enabled) return void 0;
@@ -480,11 +430,11 @@ function useRenderDiagnostics(name, props) {
   }
   return last.current;
 }
-var useOwnerId = typeof React__namespace.useId === "function" ? React__namespace.useId : () => "";
+var useOwnerId2 = typeof React__namespace.useId === "function" ? React__namespace.useId : () => "";
 function useTrackedState(name, initial) {
-  const detective = chunkDZ3BZ654_cjs.getDetective();
+  const detective = chunkLCGXVRJR_cjs.getDetective();
   const node = React.useContext(AncestryContext);
-  const ownerId = useOwnerId();
+  const ownerId = useOwnerId2();
   const [state, setState] = React.useState(initial);
   const previous = React.useRef(state);
   if (node && node.stateOwner === void 0) node.stateOwner = ownerId;
@@ -492,8 +442,8 @@ function useTrackedState(name, initial) {
   if (node && owns && !Object.is(previous.current, state)) {
     detective.recordStateChange(node, {
       name,
-      previous: chunkDZ3BZ654_cjs.inspect(previous.current, detective.config.inspection),
-      current: chunkDZ3BZ654_cjs.inspect(state, detective.config.inspection)
+      previous: chunkLCGXVRJR_cjs.inspect(previous.current, detective.config.inspection),
+      current: chunkLCGXVRJR_cjs.inspect(state, detective.config.inspection)
     });
     previous.current = state;
   } else if (!owns) {
@@ -502,7 +452,7 @@ function useTrackedState(name, initial) {
   return [state, setState];
 }
 function useTrackedEffect(name, effect, deps) {
-  const detective = chunkDZ3BZ654_cjs.getDetective();
+  const detective = chunkLCGXVRJR_cjs.getDetective();
   const previous = React.useRef(void 0);
   const changed = React.useRef([]);
   if (detective.enabled) {
@@ -518,7 +468,7 @@ function useTrackedEffect(name, effect, deps) {
   }, deps);
 }
 function useTrackedContextValue(contextName, value) {
-  const detective = chunkDZ3BZ654_cjs.getDetective();
+  const detective = chunkLCGXVRJR_cjs.getDetective();
   const previous = React.useRef(void 0);
   const first = React.useRef(true);
   if (detective.enabled) {
@@ -526,8 +476,8 @@ function useTrackedContextValue(contextName, value) {
       first.current = false;
     } else if (!Object.is(previous.current, value)) {
       const prev = previous.current;
-      const equal = chunkDZ3BZ654_cjs.shallowEqual(prev, value, detective.config);
-      const changedKeys = isRecord(prev) && isRecord(value) ? chunkDZ3BZ654_cjs.diffProps(prev, value, detective.config).changed.map((c) => c.key) : [];
+      const equal = chunkLCGXVRJR_cjs.shallowEqual(prev, value, detective.config);
+      const changedKeys = isRecord(prev) && isRecord(value) ? chunkLCGXVRJR_cjs.diffProps(prev, value, detective.config).changed.map((c) => c.key) : [];
       detective.recordContextChange({
         contextName,
         changedKeys,
@@ -545,21 +495,12 @@ function isRecord(v) {
 
 // src/index.ts
 var REPORTER = /* @__PURE__ */ Symbol.for("react-render-detective.reporter");
-var INTERACTIONS = /* @__PURE__ */ Symbol.for("react-render-detective.interactions");
-function tracker() {
-  const g = globalThis;
-  if (!g[INTERACTIONS]) g[INTERACTIONS] = new InteractionTracker();
-  return g[INTERACTIONS];
-}
 function init(options = {}) {
-  const detective = chunkDZ3BZ654_cjs.getDetective();
+  const detective = chunkLCGXVRJR_cjs.getDetective();
   detective.init(options);
   const g = globalThis;
   g[REPORTER]?.();
   g[REPORTER] = void 0;
-  if (detective.enabled) {
-    tracker().start();
-  }
   if (detective.enabled && detective.config.mode !== "silent") {
     g[REPORTER] = attachConsoleReporter(detective);
   } else if (!detective.enabled) {
@@ -569,77 +510,49 @@ function init(options = {}) {
   }
 }
 function configure(options) {
-  chunkDZ3BZ654_cjs.getDetective().configure(options);
+  chunkLCGXVRJR_cjs.getDetective().configure(options);
 }
 function getConfig() {
-  return chunkDZ3BZ654_cjs.getDetective().config;
+  return chunkLCGXVRJR_cjs.getDetective().config;
 }
 function isEnabled() {
-  return chunkDZ3BZ654_cjs.getDetective().enabled;
+  return chunkLCGXVRJR_cjs.getDetective().enabled;
 }
 function getEvents() {
-  return chunkDZ3BZ654_cjs.getDetective().getEvents();
+  return chunkLCGXVRJR_cjs.getDetective().getEvents();
 }
 function getStats() {
-  return chunkDZ3BZ654_cjs.getDetective().getStats();
+  return chunkLCGXVRJR_cjs.getDetective().getStats();
 }
 function getComponentStats(name) {
-  return chunkDZ3BZ654_cjs.getDetective().getComponentStats(name);
+  return chunkLCGXVRJR_cjs.getDetective().getComponentStats(name);
 }
 function subscribe(listener) {
-  return chunkDZ3BZ654_cjs.getDetective().subscribe(listener);
+  return chunkLCGXVRJR_cjs.getDetective().subscribe(listener);
 }
 function clear() {
-  chunkDZ3BZ654_cjs.getDetective().clear();
-  tracker().clear();
+  chunkLCGXVRJR_cjs.getDetective().clear();
 }
 function reset() {
   const g = globalThis;
   g[REPORTER]?.();
   g[REPORTER] = void 0;
-  g[INTERACTIONS]?.stop();
-  g[INTERACTIONS] = void 0;
-  chunkDZ3BZ654_cjs.getDetective().reset();
+  chunkLCGXVRJR_cjs.getDetective().reset();
 }
 function explain(componentName2) {
   const explanation = explainStructured(componentName2);
-  return explanation ? chunkJD4IJ4MN_cjs.formatExplanation(explanation) : void 0;
+  return explanation ? chunkRGT44QQI_cjs.formatExplanation(explanation) : void 0;
 }
 function explainStructured(componentName2) {
-  return chunkJD4IJ4MN_cjs.explainEvents(componentName2, getEvents(), chunkDZ3BZ654_cjs.getDetective().lifecycleOf(componentName2));
+  return chunkRGT44QQI_cjs.explainEvents(componentName2, getEvents(), chunkLCGXVRJR_cjs.getDetective().lifecycleOf(componentName2));
 }
 function getRenderProfile(scenario) {
   const remounts = {};
-  for (const stats of chunkDZ3BZ654_cjs.getDetective().getComponentStats()) remounts[stats.name] = stats.remountCount;
+  for (const stats of chunkLCGXVRJR_cjs.getDetective().getComponentStats()) remounts[stats.name] = stats.remountCount;
   return chunkH5RG2EPP_cjs.profileFromEvents(scenario, getEvents(), remounts);
 }
-function getInteractions() {
-  return tracker().attribute(getEvents());
-}
-function explainInteractionStructured(id) {
-  const records = getInteractions();
-  const record = id ? records.find((r) => r.id === id) : records[0];
-  return record ? summarise(record) : void 0;
-}
-function explainInteraction(id) {
-  const summary = explainInteractionStructured(id);
-  return summary ? formatInteraction(summary) : void 0;
-}
-function printInteractions(limit = 5) {
-  const records = getInteractions().slice(0, limit);
-  if (records.length === 0) {
-    console.log(
-      tracker().automatic ? "No interactions recorded yet. Event timing is working \u2014 nothing has taken longer than 16ms.\nSynthetic clicks from a test harness never produce these entries; use measureInteraction() there." : "This browser does not report event timing (Safari before 16.4, jsdom).\nUse measureInteraction(label, fn) to time interactions by hand."
-    );
-    return;
-  }
-  console.log(records.map((r) => formatInteraction(summarise(r))).join("\n\n"));
-}
-function measureInteraction(label2, action) {
-  return tracker().measure(label2, action);
-}
 function getOpportunities(limit = 10) {
-  const detective = chunkDZ3BZ654_cjs.getDetective();
+  const detective = chunkLCGXVRJR_cjs.getDetective();
   const lifecycles = /* @__PURE__ */ new Map();
   for (const stats of detective.getComponentStats()) {
     lifecycles.set(stats.name, { remounts: stats.remountCount });
@@ -696,51 +609,40 @@ var ReactRenderDetective = {
   explainStructured,
   getOpportunities,
   printOpportunities,
-  getInteractions,
-  explainInteraction,
-  explainInteractionStructured,
-  printInteractions,
-  measureInteraction,
   getRenderProfile,
   printStats
 };
 
 Object.defineProperty(exports, "explainEvents", {
   enumerable: true,
-  get: function () { return chunkJD4IJ4MN_cjs.explainEvents; }
+  get: function () { return chunkRGT44QQI_cjs.explainEvents; }
 });
 Object.defineProperty(exports, "formatExplanation", {
   enumerable: true,
-  get: function () { return chunkJD4IJ4MN_cjs.formatExplanation; }
+  get: function () { return chunkRGT44QQI_cjs.formatExplanation; }
 });
-exports.InteractionTracker = InteractionTracker;
 exports.ReactRenderDetective = ReactRenderDetective;
 exports.RenderDetective = RenderDetective;
 exports.clear = clear;
 exports.configure = configure;
+exports.createTrackedSelectorHook = createTrackedSelectorHook;
 exports.explain = explain;
-exports.explainInteraction = explainInteraction;
-exports.explainInteractionStructured = explainInteractionStructured;
 exports.explainStructured = explainStructured;
-exports.formatInteraction = formatInteraction;
 exports.formatOpportunities = formatOpportunities;
 exports.getComponentStats = getComponentStats;
 exports.getConfig = getConfig;
 exports.getEvents = getEvents;
-exports.getInteractions = getInteractions;
 exports.getOpportunities = getOpportunities;
 exports.getRenderProfile = getRenderProfile;
 exports.getStats = getStats;
 exports.init = init;
 exports.isEnabled = isEnabled;
-exports.measureInteraction = measureInteraction;
-exports.printInteractions = printInteractions;
 exports.printOpportunities = printOpportunities;
 exports.printStats = printStats;
 exports.rankOpportunities = rankOpportunities;
 exports.reset = reset;
 exports.subscribe = subscribe;
-exports.summariseInteraction = summarise;
+exports.trackSelector = trackSelector;
 exports.useRenderDiagnostics = useRenderDiagnostics;
 exports.useTrackedContextValue = useTrackedContextValue;
 exports.useTrackedEffect = useTrackedEffect;