react-render-detective 0.1.0

package/dist/index.js

@@ -0,0 +1,370 @@
+import { explainEvents, formatExplanation } from './chunk-EGA344XG.js';
+export { explainEvents, formatExplanation } from './chunk-EGA344XG.js';
+import { getDetective, inspect, shallowEqual, diffProps, formatInspected } from './chunk-GRPJ4JAB.js';
+import * as React from 'react';
+import { createContext, useContext, useState, useRef, useEffect, useLayoutEffect, useCallback, Profiler } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/console/reporter.ts
+var ICON = {
+  normal: "\xB7",
+  monitor: "\u2022",
+  slow: "\u25B2",
+  "very-slow": "\u25B2\u25B2",
+  critical: "\u25A0"
+};
+function attachConsoleReporter(detective) {
+  return detective.subscribe((event) => {
+    const mode = detective.config.mode;
+    if (mode === "silent") return;
+    try {
+      if (mode === "verbose") printVerbose(event);
+      else printConcise(event, detective.config.slowRenderThreshold);
+    } catch {
+    }
+  });
+}
+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 printVerbose(event) {
+  const { diagnosis, timings } = event;
+  const header = `[RRD] ${event.component.name} #${event.renderNumber} \u2014 ${diagnosis.summary}`;
+  const group = diagnosis.severity === "normal" ? console.groupCollapsed : console.group;
+  group.call(console, header);
+  try {
+    console.log(`Cause:       ${label(event)} (confidence: ${diagnosis.confidence})`);
+    if (event.parent) {
+      console.log(`Parent:      ${event.parent.name}${event.parentRendered ? " (re-rendered in this commit)" : " (did not re-render)"}`);
+    }
+    console.log(
+      `Cost:        self ${timings.selfDuration.toFixed(1)}ms \xB7 subtree ${timings.subtreeDuration.toFixed(1)}ms` + (timings.accountedDescendantDuration > 0 ? ` (${timings.accountedDescendantDuration.toFixed(1)}ms in instrumented children)` : "")
+    );
+    if (event.changedProps.length > 0) {
+      console.groupCollapsed(`Props changed (${event.changedProps.length})`);
+      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.trackedState.length > 0) {
+      console.log(
+        `State:       ${event.trackedState.map((s) => `${s.name}: ${formatInspected(s.previous)} \u2192 ${formatInspected(s.current)}`).join(", ")}`
+      );
+    }
+    if (event.contextChanges.length > 0) {
+      console.log(`Context:     ${event.contextChanges.map((c) => c.contextName).join(", ")} changed in this commit`);
+    }
+    console.groupCollapsed("Evidence");
+    for (const line of diagnosis.evidence) console.log(`\u2022 ${line}`);
+    console.groupEnd();
+    if (diagnosis.suggestion) console.log(`Next step:   ${diagnosis.suggestion}`);
+    if (diagnosis.potentiallyAvoidable) console.log("Flag:        potentially avoidable render");
+  } finally {
+    console.groupEnd();
+  }
+}
+function propLine(c) {
+  const head = `${c.key} (${c.valueType}) \u2014 ${describeKind(c)}`;
+  if (c.kind === "added") return `${head}: ${formatInspected(c.current)}`;
+  if (c.kind === "removed") return `${head}: was ${formatInspected(c.previous)}`;
+  return `${head}
+    previous: ${formatInspected(c.previous)}
+    current:  ${formatInspected(c.current)}`;
+}
+function describeKind(c) {
+  switch (c.kind) {
+    case "added":
+      return "added";
+    case "removed":
+      return "removed";
+    case "value":
+      return "value changed";
+    case "reference":
+      if (c.valueType === "function") return c.sourceEqual ? "new function, identical source" : "new function reference";
+      return c.shallowEqual === true ? "reference changed, contents identical" : "reference changed";
+  }
+}
+function label(event) {
+  switch (event.diagnosis.reason) {
+    case "mount":
+      return "mount";
+    case "props":
+      return event.changedProps.every((c) => c.kind === "reference") ? "prop changed (reference only)" : "prop changed";
+    case "parent":
+      return "parent rendered";
+    case "context":
+      return "context update";
+    case "state":
+      return "state changed";
+    case "state-or-external":
+      return "state or external store";
+    case "unknown":
+      return "undetermined";
+  }
+}
+var AncestryContext = createContext(void 0);
+AncestryContext.displayName = "RenderDetectiveAncestry";
+function useInstrumentedNode(name, props) {
+  const detective = getDetective();
+  const parent = useContext(AncestryContext);
+  const [node] = useState(
+    () => detective.enabled ? detective.createNode(name, parent) : void 0
+  );
+  useLayoutEffect(() => {
+    if (!node) return;
+    detective.attach(node);
+    return () => detective.detach(node);
+  }, [detective, node]);
+  if (node) {
+    try {
+      detective.recordAttempt(node, props);
+    } catch {
+    }
+  }
+  const onRender = useCallback(
+    (_id, phase, actualDuration, baseDuration, startTime, commitTime) => {
+      if (!node) return;
+      try {
+        detective.recordCommit(node, {
+          phase,
+          subtreeDuration: actualDuration,
+          baseDuration,
+          startTime,
+          commitTime
+        });
+      } catch {
+      }
+    },
+    [detective, node]
+  );
+  return { node, onRender };
+}
+function renderInstrumented(node, onRender, children) {
+  if (!node) return children;
+  return /* @__PURE__ */ jsx(Profiler, { id: node.id, onRender, children: /* @__PURE__ */ jsx(AncestryContext.Provider, { value: node, children }) });
+}
+function componentName(component, fallback = "Anonymous") {
+  const c = component;
+  if (!c) return fallback;
+  if (typeof c.displayName === "string" && c.displayName) return c.displayName;
+  if (typeof c.name === "string" && c.name) return c.name;
+  if (c.type) return componentName(c.type, fallback);
+  return fallback;
+}
+function withRenderDetective(Component, options = {}) {
+  const name = options.name ?? componentName(Component);
+  function RenderDetected(props) {
+    const { node, onRender } = useInstrumentedNode(name, props);
+    return renderInstrumented(node, onRender, /* @__PURE__ */ jsx(Component, { ...props }));
+  }
+  RenderDetected.displayName = `RenderDetective(${name})`;
+  return RenderDetected;
+}
+
+// src/react/RenderDetective.tsx
+function RenderDetective({ name, children }) {
+  const { node, onRender } = useInstrumentedNode(name, { children });
+  return renderInstrumented(node, onRender, children);
+}
+function useRenderDiagnostics(name, props) {
+  const detective = getDetective();
+  const parent = useContext(AncestryContext);
+  const [node] = useState(() => {
+    if (!detective.enabled) return void 0;
+    const created = detective.createNode(name, parent);
+    if (created) detective.hookModeNodes.add(created);
+    return created;
+  });
+  const last = useRef(void 0);
+  useEffect(() => {
+    if (!node) return;
+    detective.attach(node);
+    const unsubscribe = detective.subscribe((event) => {
+      if (event.component.id === node.id) last.current = event;
+    });
+    return () => {
+      unsubscribe();
+      detective.detach(node);
+    };
+  }, [detective, node]);
+  if (node) {
+    const isMount = !node.seenCommit;
+    detective.recordAttempt(node, props ?? {});
+    detective.recordCommit(node, {
+      phase: isMount ? "mount" : "update",
+      subtreeDuration: 0,
+      baseDuration: 0,
+      startTime: 0,
+      commitTime: -1
+    });
+  }
+  return last.current;
+}
+var useOwnerId = typeof React.useId === "function" ? React.useId : () => "";
+function useTrackedState(name, initial) {
+  const detective = getDetective();
+  const node = useContext(AncestryContext);
+  const ownerId = useOwnerId();
+  const [state, setState] = useState(initial);
+  const previous = useRef(state);
+  if (node && node.stateOwner === void 0) node.stateOwner = ownerId;
+  const owns = !node || node.stateOwner === ownerId;
+  if (node && owns && !Object.is(previous.current, state)) {
+    detective.recordStateChange(node, {
+      name,
+      previous: inspect(previous.current, detective.config.inspection),
+      current: inspect(state, detective.config.inspection)
+    });
+    previous.current = state;
+  } else if (!owns) {
+    previous.current = state;
+  }
+  return [state, setState];
+}
+function useTrackedEffect(name, effect, deps) {
+  const detective = getDetective();
+  const previous = useRef(void 0);
+  const changed = useRef([]);
+  if (detective.enabled) {
+    const prev = previous.current;
+    changed.current = prev ? deps.map((d, i) => Object.is(d, prev[i]) ? -1 : i).filter((i) => i >= 0) : [];
+    previous.current = deps;
+  }
+  useEffect(() => {
+    if (detective.enabled && detective.config.mode !== "silent" && changed.current.length > 0) {
+      console.debug(`[RRD] effect ${name} ran \u2014 deps changed at index ${changed.current.join(", ")}`);
+    }
+    return effect();
+  }, deps);
+}
+function useTrackedContextValue(contextName, value) {
+  const detective = getDetective();
+  const previous = useRef(void 0);
+  const first = useRef(true);
+  if (detective.enabled) {
+    if (first.current) {
+      first.current = false;
+    } else if (!Object.is(previous.current, value)) {
+      const prev = previous.current;
+      const equal = shallowEqual(prev, value, detective.config);
+      const changedKeys = isRecord(prev) && isRecord(value) ? diffProps(prev, value, detective.config).changed.map((c) => c.key) : [];
+      detective.recordContextChange({
+        contextName,
+        changedKeys,
+        referenceOnly: equal === true,
+        commitTime: -1
+      });
+    }
+    previous.current = value;
+  }
+  return value;
+}
+function isRecord(v) {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+
+// src/index.ts
+var REPORTER = /* @__PURE__ */ Symbol.for("react-render-detective.reporter");
+function init(options = {}) {
+  const detective = getDetective();
+  detective.init(options);
+  const g = globalThis;
+  g[REPORTER]?.();
+  g[REPORTER] = void 0;
+  if (detective.enabled && detective.config.mode !== "silent") {
+    g[REPORTER] = attachConsoleReporter(detective);
+  }
+}
+function configure(options) {
+  getDetective().configure(options);
+}
+function getConfig() {
+  return getDetective().config;
+}
+function isEnabled() {
+  return getDetective().enabled;
+}
+function getEvents() {
+  return getDetective().getEvents();
+}
+function getStats() {
+  return getDetective().getStats();
+}
+function getComponentStats(name) {
+  return getDetective().getComponentStats(name);
+}
+function subscribe(listener) {
+  return getDetective().subscribe(listener);
+}
+function clear() {
+  getDetective().clear();
+}
+function reset() {
+  const g = globalThis;
+  g[REPORTER]?.();
+  g[REPORTER] = void 0;
+  getDetective().reset();
+}
+function explain(componentName2) {
+  const explanation = explainEvents(componentName2, getEvents());
+  return explanation ? formatExplanation(explanation) : void 0;
+}
+function explainStructured(componentName2) {
+  return explainEvents(componentName2, getEvents());
+}
+function printStats() {
+  const s = getStats();
+  const lines = [
+    "React Render Detective",
+    "",
+    `Components               ${s.components}`,
+    `Total renders            ${s.totalRenders}`,
+    `Total render time        ${s.totalRenderTime.toFixed(1)}ms`,
+    `Slow renders             ${s.slowRenders}`,
+    `Potentially avoidable    ${s.potentiallyAvoidableRenders}`
+  ];
+  if (s.devReplays > 0) {
+    lines.push(`Development replays      ${s.devReplays} (StrictMode / discarded \u2014 not counted above)`);
+  }
+  if (s.mostExpensive.length > 0) {
+    lines.push("", "Top by cumulative render time");
+    for (const [i, c] of s.mostExpensive.slice(0, 5).entries()) {
+      lines.push(
+        `${String(i + 1).padStart(2)}. ${c.name.padEnd(22)} ${String(c.renderCount).padStart(6)} renders  ${c.totalSelfDuration.toFixed(1).padStart(8)}ms  (avg ${c.averageSelfDuration.toFixed(1)}ms, p95 ${c.p95SelfDuration.toFixed(1)}ms)`
+      );
+    }
+  }
+  console.log(lines.join("\n"));
+}
+var ReactRenderDetective = {
+  init,
+  configure,
+  getConfig,
+  isEnabled,
+  getEvents,
+  getStats,
+  getComponentStats,
+  subscribe,
+  clear,
+  reset,
+  explain,
+  explainStructured,
+  printStats
+};
+
+export { ReactRenderDetective, RenderDetective, clear, configure, explain, explainStructured, getComponentStats, getConfig, getEvents, getStats, init, isEnabled, printStats, reset, subscribe, useRenderDiagnostics, useTrackedContextValue, useTrackedEffect, useTrackedState, withRenderDetective };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/console/reporter.ts","../src/react/ancestry.ts","../src/react/instrument.tsx","../src/react/withRenderDetective.tsx","../src/react/RenderDetective.tsx","../src/react/hooks.ts","../src/index.ts"],"names":["jsx","useContext","useState","componentName"],"mappings":";;;;;;;;AAIA,IAAM,IAAA,GAA+B;AAAA,EACnC,MAAA,EAAQ,MAAA;AAAA,EACR,OAAA,EAAS,QAAA;AAAA,EACT,IAAA,EAAM,QAAA;AAAA,EACN,WAAA,EAAa,cAAA;AAAA,EACb,QAAA,EAAU;AACZ,CAAA;AAGO,SAAS,sBAAsB,SAAA,EAAkC;AACtE,EAAA,OAAO,SAAA,CAAU,SAAA,CAAU,CAAC,KAAA,KAAU;AACpC,IAAA,MAAM,IAAA,GAAO,UAAU,MAAA,CAAO,IAAA;AAC9B,IAAA,IAAI,SAAS,QAAA,EAAU;AACvB,IAAA,IAAI;AACF,MAAA,IAAI,IAAA,KAAS,SAAA,EAAW,YAAA,CAAa,KAAK,CAAA;AAAA,WACrC,YAAA,CAAa,KAAA,EAAO,SAAA,CAAU,MAAA,CAAO,mBAAmB,CAAA;AAAA,IAC/D,CAAA,CAAA,MAAQ;AAAA,IAER;AAAA,EACF,CAAC,CAAA;AACH;AAEA,SAAS,YAAA,CAAa,OAAoB,aAAA,EAA6B;AACrE,EAAA,MAAM,EAAE,SAAA,EAAW,OAAA,EAAS,SAAA,EAAU,GAAI,KAAA;AAC1C,EAAA,MAAM,OAAA,GAAU,KAAA,CAAM,YAAA,CAAa,GAAA,CAAI,CAAC,MAAM,CAAA,CAAE,GAAG,CAAA,CAAE,IAAA,CAAK,IAAI,CAAA;AAC9D,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,CAAA,MAAA,EAAS,SAAA,CAAU,IAAI,CAAA,EAAA,EAAK,MAAM,YAAY,CAAA,CAAA;AAAA,IAC9C,CAAA,QAAA,EAAW,KAAA,CAAM,KAAK,CAAC,CAAA,CAAA;AAAA,IACvB,OAAA,GAAU,CAAA,SAAA,EAAY,OAAO,CAAA,CAAA,GAAK,MAAA;AAAA,IAClC,OAAA,CAAQ,kBAAkB,CAAA,GAAI,CAAA,UAAA,EAAa,QAAQ,YAAA,CAAa,OAAA,CAAQ,CAAC,CAAC,CAAA,EAAA,CAAA,GAAO;AAAA,GACnF,CAAE,OAAO,OAAO,CAAA;AAEhB,EAAA,MAAM,IAAA,GAAO,CAAA,EAAG,IAAA,CAAK,SAAA,CAAU,QAAQ,CAAA,IAAK,MAAG,CAAA,CAAA,EAAI,KAAA,CAAM,IAAA,CAAK,IAAI,CAAC,CAAA,CAAA;AACnE,EAAA,MAAM,IAAA,GAAO,QAAQ,YAAA,IAAgB,aAAA;AACrC,EAAA,IAAI,IAAA,EAAM,OAAA,CAAQ,IAAA,CAAK,IAAI,CAAA;AAAA,OACtB,OAAA,CAAQ,IAAI,IAAI,CAAA;AACvB;AAEA,SAAS,aAAa,KAAA,EAA0B;AAC9C,EAAA,MAAM,EAAE,SAAA,EAAW,OAAA,EAAQ,GAAI,KAAA;AAC/B,EAAA,MAAM,MAAA,GAAS,CAAA,MAAA,EAAS,KAAA,CAAM,SAAA,CAAU,IAAI,KAAK,KAAA,CAAM,YAAY,CAAA,QAAA,EAAM,SAAA,CAAU,OAAO,CAAA,CAAA;AAE1F,EAAA,MAAM,QAAQ,SAAA,CAAU,QAAA,KAAa,QAAA,GAAW,OAAA,CAAQ,iBAAiB,OAAA,CAAQ,KAAA;AACjF,EAAA,KAAA,CAAM,IAAA,CAAK,SAAS,MAAM,CAAA;AAC1B,EAAA,IAAI;AACF,IAAA,OAAA,CAAQ,GAAA,CAAI,gBAAgB,KAAA,CAAM,KAAK,CAAC,CAAA,cAAA,EAAiB,SAAA,CAAU,UAAU,CAAA,CAAA,CAAG,CAAA;AAChF,IAAA,IAAI,MAAM,MAAA,EAAQ;AAChB,MAAA,OAAA,CAAQ,GAAA,CAAI,CAAA,aAAA,EAAgB,KAAA,CAAM,MAAA,CAAO,IAAI,GAAG,KAAA,CAAM,cAAA,GAAiB,+BAAA,GAAkC,sBAAsB,CAAA,CAAE,CAAA;AAAA,IACnI;AACA,IAAA,OAAA,CAAQ,GAAA;AAAA,MACN,CAAA,kBAAA,EAAqB,QAAQ,YAAA,CAAa,OAAA,CAAQ,CAAC,CAAC,CAAA,gBAAA,EAAgB,OAAA,CAAQ,eAAA,CAAgB,OAAA,CAAQ,CAAC,CAAC,CAAA,EAAA,CAAA,IACnG,OAAA,CAAQ,8BAA8B,CAAA,GACnC,CAAA,EAAA,EAAK,QAAQ,2BAAA,CAA4B,OAAA,CAAQ,CAAC,CAAC,CAAA,4BAAA,CAAA,GACnD,EAAA;AAAA,KACR;AAEA,IAAA,IAAI,KAAA,CAAM,YAAA,CAAa,MAAA,GAAS,CAAA,EAAG;AACjC,MAAA,OAAA,CAAQ,cAAA,CAAe,CAAA,eAAA,EAAkB,KAAA,CAAM,YAAA,CAAa,MAAM,CAAA,CAAA,CAAG,CAAA;AACrE,MAAA,KAAA,MAAW,KAAK,KAAA,CAAM,YAAA,UAAsB,GAAA,CAAI,QAAA,CAAS,CAAC,CAAC,CAAA;AAC3D,MAAA,OAAA,CAAQ,QAAA,EAAS;AAAA,IACnB;AACA,IAAA,IAAI,KAAA,CAAM,cAAA,CAAe,MAAA,GAAS,CAAA,EAAG;AACnC,MAAA,OAAA,CAAQ,IAAI,CAAA,aAAA,EAAgB,KAAA,CAAM,eAAe,IAAA,CAAK,IAAI,CAAC,CAAA,CAAE,CAAA;AAAA,IAC/D;AACA,IAAA,IAAI,KAAA,CAAM,YAAA,CAAa,MAAA,GAAS,CAAA,EAAG;AACjC,MAAA,OAAA,CAAQ,GAAA;AAAA,QACN,CAAA,aAAA,EAAgB,MAAM,YAAA,CACnB,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,EAAG,CAAA,CAAE,IAAI,CAAA,EAAA,EAAK,eAAA,CAAgB,EAAE,QAAQ,CAAC,CAAA,QAAA,EAAM,eAAA,CAAgB,CAAA,CAAE,OAAO,CAAC,CAAA,CAAE,CAAA,CACtF,IAAA,CAAK,IAAI,CAAC,CAAA;AAAA,OACf;AAAA,IACF;AACA,IAAA,IAAI,KAAA,CAAM,cAAA,CAAe,MAAA,GAAS,CAAA,EAAG;AACnC,MAAA,OAAA,CAAQ,GAAA,CAAI,CAAA,aAAA,EAAgB,KAAA,CAAM,cAAA,CAAe,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,WAAW,CAAA,CAAE,IAAA,CAAK,IAAI,CAAC,CAAA,uBAAA,CAAyB,CAAA;AAAA,IAChH;AAEA,IAAA,OAAA,CAAQ,eAAe,UAAU,CAAA;AACjC,IAAA,KAAA,MAAW,QAAQ,SAAA,CAAU,QAAA,UAAkB,GAAA,CAAI,CAAA,OAAA,EAAK,IAAI,CAAA,CAAE,CAAA;AAC9D,IAAA,OAAA,CAAQ,QAAA,EAAS;AAEjB,IAAA,IAAI,UAAU,UAAA,EAAY,OAAA,CAAQ,IAAI,CAAA,aAAA,EAAgB,SAAA,CAAU,UAAU,CAAA,CAAE,CAAA;AAC5E,IAAA,IAAI,SAAA,CAAU,oBAAA,EAAsB,OAAA,CAAQ,GAAA,CAAI,2CAA2C,CAAA;AAAA,EAC7F,CAAA,SAAE;AACA,IAAA,OAAA,CAAQ,QAAA,EAAS;AAAA,EACnB;AACF;AAEA,SAAS,SAAS,CAAA,EAAuB;AACvC,EAAA,MAAM,IAAA,GAAO,CAAA,EAAG,CAAA,CAAE,GAAG,CAAA,EAAA,EAAK,EAAE,SAAS,CAAA,SAAA,EAAO,YAAA,CAAa,CAAC,CAAC,CAAA,CAAA;AAC3D,EAAA,IAAI,CAAA,CAAE,IAAA,KAAS,OAAA,EAAS,OAAO,CAAA,EAAG,IAAI,CAAA,EAAA,EAAK,eAAA,CAAgB,CAAA,CAAE,OAAO,CAAC,CAAA,CAAA;AACrE,EAAA,IAAI,CAAA,CAAE,IAAA,KAAS,SAAA,EAAW,OAAO,CAAA,EAAG,IAAI,CAAA,MAAA,EAAS,eAAA,CAAgB,CAAA,CAAE,QAAQ,CAAC,CAAA,CAAA;AAC5E,EAAA,OAAO,GAAG,IAAI;AAAA,cAAA,EAAmB,eAAA,CAAgB,CAAA,CAAE,QAAQ,CAAC;AAAA,cAAA,EAAmB,eAAA,CAAgB,CAAA,CAAE,OAAO,CAAC,CAAA,CAAA;AAC3G;AAEA,SAAS,aAAa,CAAA,EAAuB;AAC3C,EAAA,QAAQ,EAAE,IAAA;AAAM,IACd,KAAK,OAAA;AACH,MAAA,OAAO,OAAA;AAAA,IACT,KAAK,SAAA;AACH,MAAA,OAAO,SAAA;AAAA,IACT,KAAK,OAAA;AACH,MAAA,OAAO,eAAA;AAAA,IACT,KAAK,WAAA;AACH,MAAA,IAAI,EAAE,SAAA,KAAc,UAAA,EAAY,OAAO,CAAA,CAAE,cAAc,gCAAA,GAAmC,wBAAA;AAC1F,MAAA,OAAO,CAAA,CAAE,YAAA,KAAiB,IAAA,GAAO,uCAAA,GAA0C,mBAAA;AAAA;AAEjF;AAEA,SAAS,MAAM,KAAA,EAA4B;AACzC,EAAA,QAAQ,KAAA,CAAM,UAAU,MAAA;AAAQ,IAC9B,KAAK,OAAA;AACH,MAAA,OAAO,OAAA;AAAA,IACT,KAAK,OAAA;AACH,MAAA,OAAO,KAAA,CAAM,aAAa,KAAA,CAAM,CAAC,MAAM,CAAA,CAAE,IAAA,KAAS,WAAW,CAAA,GAAI,+BAAA,GAAkC,cAAA;AAAA,IACrG,KAAK,QAAA;AACH,MAAA,OAAO,iBAAA;AAAA,IACT,KAAK,SAAA;AACH,MAAA,OAAO,gBAAA;AAAA,IACT,KAAK,OAAA;AACH,MAAA,OAAO,eAAA;AAAA,IACT,KAAK,mBAAA;AACH,MAAA,OAAO,yBAAA;AAAA,IACT,KAAK,SAAA;AACH,MAAA,OAAO,cAAA;AAAA;AAEb;ACrHO,IAAM,eAAA,GAAkB,cAAsC,MAAS,CAAA;AAC9E,eAAA,CAAgB,WAAA,GAAc,yBAAA;ACIvB,SAAS,mBAAA,CACd,MACA,KAAA,EACsE;AACtE,EAAA,MAAM,YAAY,YAAA,EAAa;AAC/B,EAAA,MAAM,MAAA,GAAS,WAAW,eAAe,CAAA;AAIzC,EAAA,MAAM,CAAC,IAAI,CAAA,GAAI,QAAA;AAAA,IAAiC,MAC9C,SAAA,CAAU,OAAA,GAAU,UAAU,UAAA,CAAW,IAAA,EAAM,MAAM,CAAA,GAAI;AAAA,GAC3D;AAEA,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,CAAC,IAAA,EAAM;AACX,IAAA,SAAA,CAAU,OAAO,IAAI,CAAA;AACrB,IAAA,OAAO,MAAM,SAAA,CAAU,MAAA,CAAO,IAAI,CAAA;AAAA,EACpC,CAAA,EAAG,CAAC,SAAA,EAAW,IAAI,CAAC,CAAA;AAEpB,EAAA,IAAI,IAAA,EAAM;AACR,IAAA,IAAI;AACF,MAAA,SAAA,CAAU,aAAA,CAAc,MAAM,KAAK,CAAA;AAAA,IACrC,CAAA,CAAA,MAAQ;AAAA,IAER;AAAA,EACF;AAEA,EAAA,MAAM,QAAA,GAAW,WAAA;AAAA,IACf,CAAC,GAAA,EAAK,KAAA,EAAO,cAAA,EAAgB,YAAA,EAAc,WAAW,UAAA,KAAe;AACnE,MAAA,IAAI,CAAC,IAAA,EAAM;AACX,MAAA,IAAI;AACF,QAAA,SAAA,CAAU,aAAa,IAAA,EAAM;AAAA,UAC3B,KAAA;AAAA,UACA,eAAA,EAAiB,cAAA;AAAA,UACjB,YAAA;AAAA,UACA,SAAA;AAAA,UACA;AAAA,SACD,CAAA;AAAA,MACH,CAAA,CAAA,MAAQ;AAAA,MAER;AAAA,IACF,CAAA;AAAA,IACA,CAAC,WAAW,IAAI;AAAA,GAClB;AAEA,EAAA,OAAO,EAAE,MAAM,QAAA,EAAS;AAC1B;AAEO,SAAS,kBAAA,CACd,IAAA,EACA,QAAA,EACA,QAAA,EACW;AACX,EAAA,IAAI,CAAC,MAAM,OAAO,QAAA;AAClB,EAAA,uBACE,GAAA,CAAC,QAAA,EAAA,EAAS,EAAA,EAAI,IAAA,CAAK,EAAA,EAAI,QAAA,EACrB,QAAA,kBAAA,GAAA,CAAC,eAAA,CAAgB,QAAA,EAAhB,EAAyB,KAAA,EAAO,IAAA,EAAO,UAAS,CAAA,EACnD,CAAA;AAEJ;AAEO,SAAS,aAAA,CAAc,SAAA,EAAoB,QAAA,GAAW,WAAA,EAAqB;AAChF,EAAA,MAAM,CAAA,GAAI,SAAA;AACV,EAAA,IAAI,CAAC,GAAG,OAAO,QAAA;AACf,EAAA,IAAI,OAAO,CAAA,CAAE,WAAA,KAAgB,YAAY,CAAA,CAAE,WAAA,SAAoB,CAAA,CAAE,WAAA;AACjE,EAAA,IAAI,OAAO,CAAA,CAAE,IAAA,KAAS,YAAY,CAAA,CAAE,IAAA,SAAa,CAAA,CAAE,IAAA;AAEnD,EAAA,IAAI,EAAE,IAAA,EAAM,OAAO,aAAA,CAAc,CAAA,CAAE,MAAM,QAAQ,CAAA;AACjD,EAAA,OAAO,QAAA;AACT;ACrEO,SAAS,mBAAA,CACd,SAAA,EACA,OAAA,GAAwB,EAAC,EACP;AAClB,EAAA,MAAM,IAAA,GAAO,OAAA,CAAQ,IAAA,IAAQ,aAAA,CAAc,SAAS,CAAA;AAEpD,EAAA,SAAS,eAAe,KAAA,EAAU;AAChC,IAAA,MAAM,EAAE,IAAA,EAAM,QAAA,EAAS,GAAI,mBAAA,CAAoB,MAAM,KAAgC,CAAA;AACrF,IAAA,OAAO,kBAAA,CAAmB,MAAM,QAAA,kBAAUA,IAAC,SAAA,EAAA,EAAW,GAAG,OAAO,CAAE,CAAA;AAAA,EACpE;AAEA,EAAA,cAAA,CAAe,WAAA,GAAc,mBAAmB,IAAI,CAAA,CAAA,CAAA;AACpD,EAAA,OAAO,cAAA;AACT;;;ACXO,SAAS,eAAA,CAAgB,EAAE,IAAA,EAAM,QAAA,EAAS,EAAoC;AACnF,EAAA,MAAM,EAAE,MAAM,QAAA,EAAS,GAAI,oBAAoB,IAAA,EAAM,EAAE,UAAU,CAAA;AACjE,EAAA,OAAO,kBAAA,CAAmB,IAAA,EAAM,QAAA,EAAU,QAAQ,CAAA;AACpD;ACJO,SAAS,oBAAA,CAAqB,MAAc,KAAA,EAA0D;AAC3G,EAAA,MAAM,YAAY,YAAA,EAAa;AAC/B,EAAA,MAAM,MAAA,GAASC,WAAW,eAAe,CAAA;AACzC,EAAA,MAAM,CAAC,IAAI,CAAA,GAAIC,QAAAA,CAAS,MAAM;AAC5B,IAAA,IAAI,CAAC,SAAA,CAAU,OAAA,EAAS,OAAO,MAAA;AAC/B,IAAA,MAAM,OAAA,GAAU,SAAA,CAAU,UAAA,CAAW,IAAA,EAAM,MAAM,CAAA;AACjD,IAAA,IAAI,OAAA,EAAS,SAAA,CAAU,aAAA,CAAc,GAAA,CAAI,OAAO,CAAA;AAChD,IAAA,OAAO,OAAA;AAAA,EACT,CAAC,CAAA;AACD,EAAA,MAAM,IAAA,GAAO,OAAgC,MAAS,CAAA;AAEtD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,IAAA,EAAM;AACX,IAAA,SAAA,CAAU,OAAO,IAAI,CAAA;AACrB,IAAA,MAAM,WAAA,GAAc,SAAA,CAAU,SAAA,CAAU,CAAC,KAAA,KAAU;AACjD,MAAA,IAAI,MAAM,SAAA,CAAU,EAAA,KAAO,IAAA,CAAK,EAAA,OAAS,OAAA,GAAU,KAAA;AAAA,IACrD,CAAC,CAAA;AACD,IAAA,OAAO,MAAM;AACX,MAAA,WAAA,EAAY;AACZ,MAAA,SAAA,CAAU,OAAO,IAAI,CAAA;AAAA,IACvB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,SAAA,EAAW,IAAI,CAAC,CAAA;AAEpB,EAAA,IAAI,IAAA,EAAM;AACR,IAAA,MAAM,OAAA,GAAU,CAAC,IAAA,CAAK,UAAA;AACtB,IAAA,SAAA,CAAU,aAAA,CAAc,IAAA,EAAM,KAAA,IAAS,EAAE,CAAA;AAGzC,IAAA,SAAA,CAAU,aAAa,IAAA,EAAM;AAAA,MAC3B,KAAA,EAAO,UAAU,OAAA,GAAU,QAAA;AAAA,MAC3B,eAAA,EAAiB,CAAA;AAAA,MACjB,YAAA,EAAc,CAAA;AAAA,MACd,SAAA,EAAW,CAAA;AAAA,MACX,UAAA,EAAY;AAAA,KACb,CAAA;AAAA,EACH;AAEA,EAAA,OAAO,IAAA,CAAK,OAAA;AACd;AAOA,IAAM,UAAA,GACJ,OAA2C,KAAA,CAAA,KAAA,KAAU,UAAA,GACH,cAC9C,MAAM,EAAA;AAcL,SAAS,eAAA,CAAmB,MAAc,OAAA,EAA0D;AACzG,EAAA,MAAM,YAAY,YAAA,EAAa;AAC/B,EAAA,MAAM,IAAA,GAAOD,WAAW,eAAe,CAAA;AACvC,EAAA,MAAM,UAAU,UAAA,EAAW;AAC3B,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIC,SAAY,OAAO,CAAA;AAC7C,EAAA,MAAM,QAAA,GAAW,OAAU,KAAK,CAAA;AAEhC,EAAA,IAAI,IAAA,IAAQ,IAAA,CAAK,UAAA,KAAe,MAAA,OAAgB,UAAA,GAAa,OAAA;AAC7D,EAAA,MAAM,IAAA,GAAO,CAAC,IAAA,IAAQ,IAAA,CAAK,UAAA,KAAe,OAAA;AAE1C,EAAA,IAAI,IAAA,IAAQ,QAAQ,CAAC,MAAA,CAAO,GAAG,QAAA,CAAS,OAAA,EAAS,KAAK,CAAA,EAAG;AACvD,IAAA,SAAA,CAAU,kBAAkB,IAAA,EAAM;AAAA,MAChC,IAAA;AAAA,MACA,UAAU,OAAA,CAAQ,QAAA,CAAS,OAAA,EAAS,SAAA,CAAU,OAAO,UAAU,CAAA;AAAA,MAC/D,OAAA,EAAS,OAAA,CAAQ,KAAA,EAAO,SAAA,CAAU,OAAO,UAAU;AAAA,KACpD,CAAA;AACD,IAAA,QAAA,CAAS,OAAA,GAAU,KAAA;AAAA,EACrB,CAAA,MAAA,IAAW,CAAC,IAAA,EAAM;AAChB,IAAA,QAAA,CAAS,OAAA,GAAU,KAAA;AAAA,EACrB;AAEA,EAAA,OAAO,CAAC,OAAO,QAAQ,CAAA;AACzB;AAQO,SAAS,gBAAA,CACd,IAAA,EACA,MAAA,EACA,IAAA,EACM;AACN,EAAA,MAAM,YAAY,YAAA,EAAa;AAC/B,EAAA,MAAM,QAAA,GAAW,OAA8B,MAAS,CAAA;AACxD,EAAA,MAAM,OAAA,GAAU,MAAA,CAAiB,EAAE,CAAA;AAEnC,EAAA,IAAI,UAAU,OAAA,EAAS;AACrB,IAAA,MAAM,OAAO,QAAA,CAAS,OAAA;AACtB,IAAA,OAAA,CAAQ,OAAA,GAAU,OACd,IAAA,CAAK,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,KAAO,MAAA,CAAO,EAAA,CAAG,CAAA,EAAG,IAAA,CAAK,CAAC,CAAC,CAAA,GAAI,EAAA,GAAK,CAAE,CAAA,CAAE,MAAA,CAAO,CAAC,CAAA,KAAM,CAAA,IAAK,CAAC,CAAA,GACzE,EAAC;AACL,IAAA,QAAA,CAAS,OAAA,GAAU,IAAA;AAAA,EACrB;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,SAAA,CAAU,WAAW,SAAA,CAAU,MAAA,CAAO,SAAS,QAAA,IAAY,OAAA,CAAQ,OAAA,CAAQ,MAAA,GAAS,CAAA,EAAG;AAEzF,MAAA,OAAA,CAAQ,KAAA,CAAM,gBAAgB,IAAI,CAAA,kCAAA,EAAgC,QAAQ,OAAA,CAAQ,IAAA,CAAK,IAAI,CAAC,CAAA,CAAE,CAAA;AAAA,IAChG;AACA,IAAA,OAAO,MAAA,EAAO;AAAA,EAEhB,GAAG,IAAI,CAAA;AACT;AAMO,SAAS,sBAAA,CAA0B,aAAqB,KAAA,EAAa;AAC1E,EAAA,MAAM,YAAY,YAAA,EAAa;AAC/B,EAAA,MAAM,QAAA,GAAW,OAAsB,MAAS,CAAA;AAChD,EAAA,MAAM,KAAA,GAAQ,OAAO,IAAI,CAAA;AAEzB,EAAA,IAAI,UAAU,OAAA,EAAS;AACrB,IAAA,IAAI,MAAM,OAAA,EAAS;AACjB,MAAA,KAAA,CAAM,OAAA,GAAU,KAAA;AAAA,IAClB,WAAW,CAAC,MAAA,CAAO,GAAG,QAAA,CAAS,OAAA,EAAS,KAAK,CAAA,EAAG;AAC9C,MAAA,MAAM,OAAO,QAAA,CAAS,OAAA;AACtB,MAAA,MAAM,KAAA,GAAQ,YAAA,CAAa,IAAA,EAAM,KAAA,EAAO,UAAU,MAAM,CAAA;AACxD,MAAA,MAAM,WAAA,GACJ,SAAS,IAAI,CAAA,IAAK,SAAS,KAAK,CAAA,GAC5B,UAAU,IAAA,EAAM,KAAA,EAAO,UAAU,MAAM,CAAA,CAAE,QAAQ,GAAA,CAAI,CAAC,MAAM,CAAA,CAAE,GAAG,IACjE,EAAC;AACP,MAAA,SAAA,CAAU,mBAAA,CAAoB;AAAA,QAC5B,WAAA;AAAA,QACA,WAAA;AAAA,QACA,eAAe,KAAA,KAAU,IAAA;AAAA,QACzB,UAAA,EAAY;AAAA,OACb,CAAA;AAAA,IACH;AACA,IAAA,QAAA,CAAS,OAAA,GAAU,KAAA;AAAA,EACrB;AAEA,EAAA,OAAO,KAAA;AACT;AAEA,SAAS,SAAS,CAAA,EAA0C;AAC1D,EAAA,OAAO,OAAO,MAAM,QAAA,IAAY,CAAA,KAAM,QAAQ,CAAC,KAAA,CAAM,QAAQ,CAAC,CAAA;AAChE;;;AC/JA,IAAM,QAAA,mBAAW,MAAA,CAAO,GAAA,CAAI,iCAAiC,CAAA;AAQtD,SAAS,IAAA,CAAK,OAAA,GAA4B,EAAC,EAAS;AACzD,EAAA,MAAM,YAAY,YAAA,EAAa;AAC/B,EAAA,SAAA,CAAU,KAAK,OAAO,CAAA;AAEtB,EAAA,MAAM,CAAA,GAAI,UAAA;AACV,EAAA,CAAA,CAAE,QAAQ,CAAA,IAAI;AACd,EAAA,CAAA,CAAE,QAAQ,CAAA,GAAI,MAAA;AAEd,EAAA,IAAI,SAAA,CAAU,OAAA,IAAW,SAAA,CAAU,MAAA,CAAO,SAAS,QAAA,EAAU;AAC3D,IAAA,CAAA,CAAE,QAAQ,CAAA,GAAI,qBAAA,CAAsB,SAAS,CAAA;AAAA,EAC/C;AACF;AAGO,SAAS,UAAU,OAAA,EAAiC;AACzD,EAAA,YAAA,EAAa,CAAE,UAAU,OAAO,CAAA;AAClC;AAEO,SAAS,SAAA,GAAuC;AACrD,EAAA,OAAO,cAAa,CAAE,MAAA;AACxB;AAEO,SAAS,SAAA,GAAqB;AACnC,EAAA,OAAO,cAAa,CAAE,OAAA;AACxB;AAGO,SAAS,SAAA,GAA2B;AACzC,EAAA,OAAO,YAAA,GAAe,SAAA,EAAU;AAClC;AAEO,SAAS,QAAA,GAAqB;AACnC,EAAA,OAAO,YAAA,GAAe,QAAA,EAAS;AACjC;AAEO,SAAS,kBAAkB,IAAA,EAAiC;AACjE,EAAA,OAAO,YAAA,EAAa,CAAE,iBAAA,CAAkB,IAAI,CAAA;AAC9C;AAGO,SAAS,UAAU,QAAA,EAAoD;AAC5E,EAAA,OAAO,YAAA,EAAa,CAAE,SAAA,CAAU,QAAQ,CAAA;AAC1C;AAGO,SAAS,KAAA,GAAc;AAC5B,EAAA,YAAA,GAAe,KAAA,EAAM;AACvB;AAGO,SAAS,KAAA,GAAc;AAC5B,EAAA,MAAM,CAAA,GAAI,UAAA;AACV,EAAA,CAAA,CAAE,QAAQ,CAAA,IAAI;AACd,EAAA,CAAA,CAAE,QAAQ,CAAA,GAAI,MAAA;AACd,EAAA,YAAA,GAAe,KAAA,EAAM;AACvB;AAMO,SAAS,QAAQC,cAAAA,EAA2C;AACjE,EAAA,MAAM,WAAA,GAAc,aAAA,CAAcA,cAAAA,EAAe,SAAA,EAAW,CAAA;AAC5D,EAAA,OAAO,WAAA,GAAc,iBAAA,CAAkB,WAAW,CAAA,GAAI,MAAA;AACxD;AAGO,SAAS,kBAAkBA,cAAAA,EAAuB;AACvD,EAAA,OAAO,aAAA,CAAcA,cAAAA,EAAe,SAAA,EAAW,CAAA;AACjD;AAGO,SAAS,UAAA,GAAmB;AACjC,EAAA,MAAM,IAAI,QAAA,EAAS;AACnB,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,wBAAA;AAAA,IACA,EAAA;AAAA,IACA,CAAA,yBAAA,EAA4B,EAAE,UAAU,CAAA,CAAA;AAAA,IACxC,CAAA,yBAAA,EAA4B,EAAE,YAAY,CAAA,CAAA;AAAA,IAC1C,CAAA,yBAAA,EAA4B,CAAA,CAAE,eAAA,CAAgB,OAAA,CAAQ,CAAC,CAAC,CAAA,EAAA,CAAA;AAAA,IACxD,CAAA,yBAAA,EAA4B,EAAE,WAAW,CAAA,CAAA;AAAA,IACzC,CAAA,yBAAA,EAA4B,EAAE,2BAA2B,CAAA;AAAA,GAC3D;AACA,EAAA,IAAI,CAAA,CAAE,aAAa,CAAA,EAAG;AACpB,IAAA,KAAA,CAAM,IAAA,CAAK,CAAA,yBAAA,EAA4B,CAAA,CAAE,UAAU,CAAA,kDAAA,CAA+C,CAAA;AAAA,EACpG;AACA,EAAA,IAAI,CAAA,CAAE,aAAA,CAAc,MAAA,GAAS,CAAA,EAAG;AAC9B,IAAA,KAAA,CAAM,IAAA,CAAK,IAAI,+BAA+B,CAAA;AAC9C,IAAA,KAAA,MAAW,CAAC,CAAA,EAAG,CAAC,CAAA,IAAK,CAAA,CAAE,aAAA,CAAc,KAAA,CAAM,CAAA,EAAG,CAAC,CAAA,CAAE,OAAA,EAAQ,EAAG;AAC1D,MAAA,KAAA,CAAM,IAAA;AAAA,QACJ,GAAG,MAAA,CAAO,CAAA,GAAI,CAAC,CAAA,CAAE,QAAA,CAAS,CAAC,CAAC,CAAA,EAAA,EAAK,EAAE,IAAA,CAAK,MAAA,CAAO,EAAE,CAAC,CAAA,CAAA,EAAI,OAAO,CAAA,CAAE,WAAW,EAAE,QAAA,CAAS,CAAC,CAAC,CAAA,UAAA,EAAa,EAAE,iBAAA,CACnG,OAAA,CAAQ,CAAC,CAAA,CACT,QAAA,CAAS,CAAC,CAAC,CAAA,SAAA,EAAY,EAAE,mBAAA,CAAoB,OAAA,CAAQ,CAAC,CAAC,CAAA,QAAA,EAAW,EAAE,eAAA,CAAgB,OAAA,CAAQ,CAAC,CAAC,CAAA,GAAA;AAAA,OACnG;AAAA,IACF;AAAA,EACF;AACA,EAAA,OAAA,CAAQ,GAAA,CAAI,KAAA,CAAM,IAAA,CAAK,IAAI,CAAC,CAAA;AAC9B;AAGO,IAAM,oBAAA,GAAuB;AAAA,EAClC,IAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,iBAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,iBAAA;AAAA,EACA;AACF","file":"index.js","sourcesContent":["import { formatInspected } from \"../core/inspect.js\";\nimport type { Detective } from \"../core/store.js\";\nimport type { PropChange, RenderEvent } from \"../core/types.js\";\n\nconst ICON: Record<string, string> = {\n  normal: \"·\",\n  monitor: \"•\",\n  slow: \"▲\",\n  \"very-slow\": \"▲▲\",\n  critical: \"■\",\n};\n\n/** Attaches console output. Returns an unsubscribe so init() stays idempotent. */\nexport function attachConsoleReporter(detective: Detective): () => void {\n  return detective.subscribe((event) => {\n    const mode = detective.config.mode;\n    if (mode === \"silent\") return;\n    try {\n      if (mode === \"verbose\") printVerbose(event);\n      else printConcise(event, detective.config.slowRenderThreshold);\n    } catch {\n      /* ignore */\n    }\n  });\n}\n\nfunction printConcise(event: RenderEvent, slowThreshold: number): void {\n  const { diagnosis, timings, component } = event;\n  const changed = event.changedProps.map((c) => c.key).join(\", \");\n  const parts = [\n    `[RRD] ${component.name} #${event.renderNumber}`,\n    `Reason: ${label(event)}`,\n    changed ? `Changed: ${changed}` : undefined,\n    timings.subtreeDuration > 0 ? `Duration: ${timings.selfDuration.toFixed(1)}ms` : undefined,\n  ].filter(Boolean);\n\n  const line = `${ICON[diagnosis.severity] ?? \"·\"} ${parts.join(\"  \")}`;\n  const slow = timings.selfDuration >= slowThreshold;\n  if (slow) console.warn(line);\n  else console.log(line);\n}\n\nfunction printVerbose(event: RenderEvent): void {\n  const { diagnosis, timings } = event;\n  const header = `[RRD] ${event.component.name} #${event.renderNumber} — ${diagnosis.summary}`;\n\n  const group = diagnosis.severity === \"normal\" ? console.groupCollapsed : console.group;\n  group.call(console, header);\n  try {\n    console.log(`Cause:       ${label(event)} (confidence: ${diagnosis.confidence})`);\n    if (event.parent) {\n      console.log(`Parent:      ${event.parent.name}${event.parentRendered ? \" (re-rendered in this commit)\" : \" (did not re-render)\"}`);\n    }\n    console.log(\n      `Cost:        self ${timings.selfDuration.toFixed(1)}ms · subtree ${timings.subtreeDuration.toFixed(1)}ms` +\n        (timings.accountedDescendantDuration > 0\n          ? ` (${timings.accountedDescendantDuration.toFixed(1)}ms in instrumented children)`\n          : \"\"),\n    );\n\n    if (event.changedProps.length > 0) {\n      console.groupCollapsed(`Props changed (${event.changedProps.length})`);\n      for (const c of event.changedProps) console.log(propLine(c));\n      console.groupEnd();\n    }\n    if (event.unchangedProps.length > 0) {\n      console.log(`Props same:  ${event.unchangedProps.join(\", \")}`);\n    }\n    if (event.trackedState.length > 0) {\n      console.log(\n        `State:       ${event.trackedState\n          .map((s) => `${s.name}: ${formatInspected(s.previous)} → ${formatInspected(s.current)}`)\n          .join(\", \")}`,\n      );\n    }\n    if (event.contextChanges.length > 0) {\n      console.log(`Context:     ${event.contextChanges.map((c) => c.contextName).join(\", \")} changed in this commit`);\n    }\n\n    console.groupCollapsed(\"Evidence\");\n    for (const line of diagnosis.evidence) console.log(`• ${line}`);\n    console.groupEnd();\n\n    if (diagnosis.suggestion) console.log(`Next step:   ${diagnosis.suggestion}`);\n    if (diagnosis.potentiallyAvoidable) console.log(\"Flag:        potentially avoidable render\");\n  } finally {\n    console.groupEnd();\n  }\n}\n\nfunction propLine(c: PropChange): string {\n  const head = `${c.key} (${c.valueType}) — ${describeKind(c)}`;\n  if (c.kind === \"added\") return `${head}: ${formatInspected(c.current)}`;\n  if (c.kind === \"removed\") return `${head}: was ${formatInspected(c.previous)}`;\n  return `${head}\\n    previous: ${formatInspected(c.previous)}\\n    current:  ${formatInspected(c.current)}`;\n}\n\nfunction describeKind(c: PropChange): string {\n  switch (c.kind) {\n    case \"added\":\n      return \"added\";\n    case \"removed\":\n      return \"removed\";\n    case \"value\":\n      return \"value changed\";\n    case \"reference\":\n      if (c.valueType === \"function\") return c.sourceEqual ? \"new function, identical source\" : \"new function reference\";\n      return c.shallowEqual === true ? \"reference changed, contents identical\" : \"reference changed\";\n  }\n}\n\nfunction label(event: RenderEvent): string {\n  switch (event.diagnosis.reason) {\n    case \"mount\":\n      return \"mount\";\n    case \"props\":\n      return event.changedProps.every((c) => c.kind === \"reference\") ? \"prop changed (reference only)\" : \"prop changed\";\n    case \"parent\":\n      return \"parent rendered\";\n    case \"context\":\n      return \"context update\";\n    case \"state\":\n      return \"state changed\";\n    case \"state-or-external\":\n      return \"state or external store\";\n    case \"unknown\":\n      return \"undetermined\";\n  }\n}\n","import { createContext } from \"react\";\nimport type { NodeRecord } from \"../core/store.js\";\n\n/**\n * Carries the nearest instrumented ancestor down the tree.\n *\n * The value is the node object, created once per mounted instance and **never\n * replaced**. That is deliberate: a context value that changed per render would\n * force every instrumented descendant to re-render, defeating `React.memo` and\n * changing the behaviour of the very app we are measuring.\n */\nexport const AncestryContext = createContext<NodeRecord | undefined>(undefined);\nAncestryContext.displayName = \"RenderDetectiveAncestry\";\n","import { Profiler, useCallback, useContext, useLayoutEffect, useState } from \"react\";\nimport type { ProfilerOnRenderCallback, ReactNode } from \"react\";\nimport { getDetective } from \"../core/store.js\";\nimport type { NodeRecord } from \"../core/store.js\";\nimport type { RenderPhase } from \"../core/types.js\";\nimport { AncestryContext } from \"./ancestry.js\";\n\nexport interface TrackOptions {\n  /** Overrides the inferred component name. Required for anonymous components. */\n  name?: string;\n}\n\n/**\n * Registers the current component, records this render attempt, and returns the\n * node plus a Profiler callback. All of it is a no-op when disabled.\n */\nexport function useInstrumentedNode(\n  name: string,\n  props: Record<string, unknown>,\n): { node: NodeRecord | undefined; onRender: ProfilerOnRenderCallback } {\n  const detective = getDetective();\n  const parent = useContext(AncestryContext);\n\n  // The active/inactive decision is frozen per instance so the element tree\n  // shape never changes underneath a mounted component.\n  const [node] = useState<NodeRecord | undefined>(() =>\n    detective.enabled ? detective.createNode(name, parent) : undefined,\n  );\n\n  useLayoutEffect(() => {\n    if (!node) return;\n    detective.attach(node);\n    return () => detective.detach(node);\n  }, [detective, node]);\n\n  if (node) {\n    try {\n      detective.recordAttempt(node, props);\n    } catch {\n      /* never break the app being debugged (§46) */\n    }\n  }\n\n  const onRender = useCallback<ProfilerOnRenderCallback>(\n    (_id, phase, actualDuration, baseDuration, startTime, commitTime) => {\n      if (!node) return;\n      try {\n        detective.recordCommit(node, {\n          phase: phase as RenderPhase,\n          subtreeDuration: actualDuration,\n          baseDuration,\n          startTime,\n          commitTime,\n        });\n      } catch {\n        /* ignore */\n      }\n    },\n    [detective, node],\n  );\n\n  return { node, onRender };\n}\n\nexport function renderInstrumented(\n  node: NodeRecord | undefined,\n  onRender: ProfilerOnRenderCallback,\n  children: ReactNode,\n): ReactNode {\n  if (!node) return children;\n  return (\n    <Profiler id={node.id} onRender={onRender}>\n      <AncestryContext.Provider value={node}>{children}</AncestryContext.Provider>\n    </Profiler>\n  );\n}\n\nexport function componentName(component: unknown, fallback = \"Anonymous\"): string {\n  const c = component as { displayName?: string; name?: string; type?: unknown } | null;\n  if (!c) return fallback;\n  if (typeof c.displayName === \"string\" && c.displayName) return c.displayName;\n  if (typeof c.name === \"string\" && c.name) return c.name;\n  // React.memo / forwardRef wrappers keep the real component on `.type`.\n  if (c.type) return componentName(c.type, fallback);\n  return fallback;\n}\n","import type { ComponentType } from \"react\";\nimport { componentName, renderInstrumented, useInstrumentedNode } from \"./instrument.js\";\nimport type { TrackOptions } from \"./instrument.js\";\n\n/**\n * Wraps a component with full instrumentation: render counting, prop diffing,\n * parent attribution and Profiler timings.\n *\n * This is the most accurate integration mode — the wrapper's render function\n * runs exactly when the wrapped component re-renders, and it receives the same\n * props, so every diagnosis has first-hand evidence.\n *\n * Ref note: on React 19 `ref` is an ordinary prop and passes through the spread.\n * On React 18 and below, wrap with `forwardRef` yourself if the component needs\n * a ref.\n */\nexport function withRenderDetective<P extends object>(\n  Component: ComponentType<P>,\n  options: TrackOptions = {},\n): ComponentType<P> {\n  const name = options.name ?? componentName(Component);\n\n  function RenderDetected(props: P) {\n    const { node, onRender } = useInstrumentedNode(name, props as Record<string, unknown>);\n    return renderInstrumented(node, onRender, <Component {...props} />);\n  }\n\n  RenderDetected.displayName = `RenderDetective(${name})`;\n  return RenderDetected;\n}\n","import type { ReactNode } from \"react\";\nimport { renderInstrumented, useInstrumentedNode } from \"./instrument.js\";\n\nexport interface RenderDetectiveProps {\n  name: string;\n  children: ReactNode;\n}\n\n/**\n * Zero-refactor integration: drop it around a subtree.\n *\n *   <RenderDetective name=\"UserProfile\"><UserProfile /></RenderDetective>\n *\n * Accuracy note: this boundary only sees the `children` **element**, not the\n * wrapped component's props. It therefore reports timings, parent propagation\n * and children-element churn accurately, but it cannot attribute a render to an\n * individual prop. Use `withRenderDetective` when you want per-prop diagnosis.\n */\nexport function RenderDetective({ name, children }: RenderDetectiveProps): ReactNode {\n  const { node, onRender } = useInstrumentedNode(name, { children });\n  return renderInstrumented(node, onRender, children);\n}\n","import * as React from \"react\";\nimport { useContext, useEffect, useRef, useState } from \"react\";\nimport type { Dispatch, SetStateAction } from \"react\";\nimport { getDetective } from \"../core/store.js\";\nimport { inspect } from \"../core/inspect.js\";\nimport { diffProps, shallowEqual } from \"../core/compare.js\";\nimport type { RenderEvent } from \"../core/types.js\";\nimport { AncestryContext } from \"./ancestry.js\";\n\n/**\n * In-component diagnostics without wrapping.\n *\n * Limitation, by design: a hook cannot install a `<Profiler>` around its own\n * component, so **no duration is available in this mode** — timings are\n * reported as 0. Everything else (render count, prop diffing, parent\n * attribution) is as accurate as the HOC.\n */\nexport function useRenderDiagnostics(name: string, props?: Record<string, unknown>): RenderEvent | undefined {\n  const detective = getDetective();\n  const parent = useContext(AncestryContext);\n  const [node] = useState(() => {\n    if (!detective.enabled) return undefined;\n    const created = detective.createNode(name, parent);\n    if (created) detective.hookModeNodes.add(created);\n    return created;\n  });\n  const last = useRef<RenderEvent | undefined>(undefined);\n\n  useEffect(() => {\n    if (!node) return;\n    detective.attach(node);\n    const unsubscribe = detective.subscribe((event) => {\n      if (event.component.id === node.id) last.current = event;\n    });\n    return () => {\n      unsubscribe();\n      detective.detach(node);\n    };\n  }, [detective, node]);\n\n  if (node) {\n    const isMount = !node.seenCommit;\n    detective.recordAttempt(node, props ?? {});\n    // No Profiler in hook mode: enqueue with a sentinel commit time, which the\n    // flush pass resolves to the next real commit that follows this render.\n    detective.recordCommit(node, {\n      phase: isMount ? \"mount\" : \"update\",\n      subtreeDuration: 0,\n      baseDuration: 0,\n      startTime: 0,\n      commitTime: -1,\n    });\n  }\n\n  return last.current;\n}\n\n/**\n * React 18+. Used only to identify *which* component under an instrumented node\n * owns the tracked state; `useId` is stable across StrictMode's double render,\n * which a `useRef` token would not be. Older React simply loses the guard.\n */\nconst useOwnerId: () => string =\n  typeof (React as { useId?: () => string }).useId === \"function\"\n    ? (React as unknown as { useId: () => string }).useId\n    : () => \"\";\n\n/**\n * `useState` with a label. The only reliable way to attribute a render to a\n * specific piece of local state without React internals.\n *\n * **Call this inside a component that is itself instrumented** (wrapped with\n * `withRenderDetective`, or using `useRenderDiagnostics`). A hook cannot see\n * which component called it, only the nearest instrumented ancestor — so state\n * named in an uninstrumented descendant would be reported as the ancestor's.\n * The first caller under a given node claims it and later callers are ignored,\n * which stops a descendant from stealing the attribution, but it cannot rescue\n * the case where the ancestor never tracks state of its own.\n */\nexport function useTrackedState<S>(name: string, initial: S | (() => S)): [S, Dispatch<SetStateAction<S>>] {\n  const detective = getDetective();\n  const node = useContext(AncestryContext);\n  const ownerId = useOwnerId();\n  const [state, setState] = useState<S>(initial);\n  const previous = useRef<S>(state);\n\n  if (node && node.stateOwner === undefined) node.stateOwner = ownerId;\n  const owns = !node || node.stateOwner === ownerId;\n\n  if (node && owns && !Object.is(previous.current, state)) {\n    detective.recordStateChange(node, {\n      name,\n      previous: inspect(previous.current, detective.config.inspection),\n      current: inspect(state, detective.config.inspection),\n    });\n    previous.current = state;\n  } else if (!owns) {\n    previous.current = state;\n  }\n\n  return [state, setState];\n}\n\n/**\n * `useEffect` that reports which of **its own declared** dependencies changed.\n *\n * This does not analyse whether the dependency list is correct — that needs\n * static analysis, not runtime observation (see docs/FEASIBILITY.md §9).\n */\nexport function useTrackedEffect(\n  name: string,\n  effect: () => void | (() => void),\n  deps: unknown[],\n): void {\n  const detective = getDetective();\n  const previous = useRef<unknown[] | undefined>(undefined);\n  const changed = useRef<number[]>([]);\n\n  if (detective.enabled) {\n    const prev = previous.current;\n    changed.current = prev\n      ? deps.map((d, i) => (Object.is(d, prev[i]) ? -1 : i)).filter((i) => i >= 0)\n      : [];\n    previous.current = deps;\n  }\n\n  useEffect(() => {\n    if (detective.enabled && detective.config.mode !== \"silent\" && changed.current.length > 0) {\n      // eslint-disable-next-line no-console\n      console.debug(`[RRD] effect ${name} ran — deps changed at index ${changed.current.join(\", \")}`);\n    }\n    return effect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n}\n\n/**\n * Reports when a context value changes, from inside the provider.\n * Returns the value untouched.\n */\nexport function useTrackedContextValue<T>(contextName: string, value: T): T {\n  const detective = getDetective();\n  const previous = useRef<T | undefined>(undefined);\n  const first = useRef(true);\n\n  if (detective.enabled) {\n    if (first.current) {\n      first.current = false;\n    } else if (!Object.is(previous.current, value)) {\n      const prev = previous.current;\n      const equal = shallowEqual(prev, value, detective.config);\n      const changedKeys =\n        isRecord(prev) && isRecord(value)\n          ? diffProps(prev, value, detective.config).changed.map((c) => c.key)\n          : [];\n      detective.recordContextChange({\n        contextName,\n        changedKeys,\n        referenceOnly: equal === true,\n        commitTime: -1,\n      });\n    }\n    previous.current = value;\n  }\n\n  return value;\n}\n\nfunction isRecord(v: unknown): v is Record<string, unknown> {\n  return typeof v === \"object\" && v !== null && !Array.isArray(v);\n}\n","import { attachConsoleReporter } from \"./console/reporter.js\";\nimport { explainEvents, formatExplanation } from \"./core/explain.js\";\nimport { getDetective } from \"./core/store.js\";\nimport type {\n  AppStats,\n  ComponentStats,\n  DetectiveConfig,\n  DetectiveOptions,\n  RenderEvent,\n} from \"./core/types.js\";\n\nconst REPORTER = Symbol.for(\"react-render-detective.reporter\");\ntype Global = typeof globalThis & { [REPORTER]?: () => void };\n\n/**\n * Enable diagnostics. Safe to call repeatedly — Fast Refresh, duplicate module\n * copies and re-entrant setup all reconfigure the single instance rather than\n * stacking listeners (§47).\n */\nexport function init(options: DetectiveOptions = {}): void {\n  const detective = getDetective();\n  detective.init(options);\n\n  const g = globalThis as Global;\n  g[REPORTER]?.();\n  g[REPORTER] = undefined;\n\n  if (detective.enabled && detective.config.mode !== \"silent\") {\n    g[REPORTER] = attachConsoleReporter(detective);\n  }\n}\n\n/** Update configuration without re-initialising. */\nexport function configure(options: DetectiveOptions): void {\n  getDetective().configure(options);\n}\n\nexport function getConfig(): Readonly<DetectiveConfig> {\n  return getDetective().config;\n}\n\nexport function isEnabled(): boolean {\n  return getDetective().enabled;\n}\n\n/** Oldest → newest, bounded by `maxEvents`. */\nexport function getEvents(): RenderEvent[] {\n  return getDetective().getEvents();\n}\n\nexport function getStats(): AppStats {\n  return getDetective().getStats();\n}\n\nexport function getComponentStats(name?: string): ComponentStats[] {\n  return getDetective().getComponentStats(name);\n}\n\n/** Live event stream. Returns an unsubscribe function. */\nexport function subscribe(listener: (event: RenderEvent) => void): () => void {\n  return getDetective().subscribe(listener);\n}\n\n/** Clears recorded events and statistics; instrumentation stays attached. */\nexport function clear(): void {\n  getDetective().clear();\n}\n\n/** Full teardown, including configuration. Mainly for tests and HMR disposal. */\nexport function reset(): void {\n  const g = globalThis as Global;\n  g[REPORTER]?.();\n  g[REPORTER] = undefined;\n  getDetective().reset();\n}\n\n/**\n * The flagship answer: aggregate every recorded render of one component into a\n * single, human explanation. Returns `undefined` if nothing was recorded.\n */\nexport function explain(componentName: string): string | undefined {\n  const explanation = explainEvents(componentName, getEvents());\n  return explanation ? formatExplanation(explanation) : undefined;\n}\n\n/** Structured form of `explain`, for building UIs on top. */\nexport function explainStructured(componentName: string) {\n  return explainEvents(componentName, getEvents());\n}\n\n/** Prints the application-level dashboard (§53). */\nexport function printStats(): void {\n  const s = getStats();\n  const lines = [\n    \"React Render Detective\",\n    \"\",\n    `Components               ${s.components}`,\n    `Total renders            ${s.totalRenders}`,\n    `Total render time        ${s.totalRenderTime.toFixed(1)}ms`,\n    `Slow renders             ${s.slowRenders}`,\n    `Potentially avoidable    ${s.potentiallyAvoidableRenders}`,\n  ];\n  if (s.devReplays > 0) {\n    lines.push(`Development replays      ${s.devReplays} (StrictMode / discarded — not counted above)`);\n  }\n  if (s.mostExpensive.length > 0) {\n    lines.push(\"\", \"Top by cumulative render time\");\n    for (const [i, c] of s.mostExpensive.slice(0, 5).entries()) {\n      lines.push(\n        `${String(i + 1).padStart(2)}. ${c.name.padEnd(22)} ${String(c.renderCount).padStart(6)} renders  ${c.totalSelfDuration\n          .toFixed(1)\n          .padStart(8)}ms  (avg ${c.averageSelfDuration.toFixed(1)}ms, p95 ${c.p95SelfDuration.toFixed(1)}ms)`,\n      );\n    }\n  }\n  console.log(lines.join(\"\\n\"));\n}\n\n/** Namespaced form, matching the documented `ReactRenderDetective.init()` usage. */\nexport const ReactRenderDetective = {\n  init,\n  configure,\n  getConfig,\n  isEnabled,\n  getEvents,\n  getStats,\n  getComponentStats,\n  subscribe,\n  clear,\n  reset,\n  explain,\n  explainStructured,\n  printStats,\n};\n\nexport { withRenderDetective } from \"./react/withRenderDetective.js\";\nexport { RenderDetective } from \"./react/RenderDetective.js\";\nexport type { RenderDetectiveProps } from \"./react/RenderDetective.js\";\nexport {\n  useRenderDiagnostics,\n  useTrackedState,\n  useTrackedEffect,\n  useTrackedContextValue,\n} from \"./react/hooks.js\";\nexport type { TrackOptions } from \"./react/instrument.js\";\nexport { explainEvents, formatExplanation } from \"./core/explain.js\";\nexport type { Explanation } from \"./core/explain.js\";\nexport type * from \"./core/types.js\";\n"]}

package/dist/overlay.cjs

@@ -0,0 +1,147 @@
+'use strict';
+
+var chunkOCW2Q3UW_cjs = require('./chunk-OCW2Q3UW.cjs');
+var chunk7FTXUOB6_cjs = require('./chunk-7FTXUOB6.cjs');
+
+// src/overlay/overlay.ts
+var MOUNTED = /* @__PURE__ */ Symbol.for("react-render-detective.overlay");
+function mountOverlay() {
+  const g = globalThis;
+  if (g[MOUNTED]) return g[MOUNTED];
+  if (typeof document === "undefined") {
+    const noop = { destroy: () => {
+    }, show: () => {
+    }, hide: () => {
+    } };
+    return noop;
+  }
+  const detective = chunk7FTXUOB6_cjs.getDetective();
+  const root = document.createElement("div");
+  root.setAttribute("data-rrd-overlay", "");
+  root.attachShadow({ mode: "open" });
+  const shadow = root.shadowRoot;
+  shadow.innerHTML = TEMPLATE;
+  document.body.appendChild(root);
+  const $ = (sel) => shadow.querySelector(sel);
+  const listEl = $("#list");
+  const detailEl = $("#detail");
+  const filterEl = $("#filter");
+  const summaryEl = $("#summary");
+  const panelEl = $("#panel");
+  let selected;
+  let paused = false;
+  let dirty = true;
+  let filter = "";
+  const unsubscribe = detective.subscribe((event) => {
+    if (paused) return;
+    dirty = true;
+  });
+  filterEl.addEventListener("input", () => {
+    filter = filterEl.value.trim().toLowerCase();
+    dirty = true;
+  });
+  $("#pause").addEventListener("click", () => {
+    paused = !paused;
+    $("#pause").textContent = paused ? "Resume" : "Pause";
+  });
+  $("#clear").addEventListener("click", () => {
+    detective.clear();
+    selected = void 0;
+    detailEl.textContent = "";
+    dirty = true;
+  });
+  $("#close").addEventListener("click", () => handle.hide());
+  listEl.addEventListener("click", (e) => {
+    const row = e.target.closest("[data-name]");
+    if (!row) return;
+    selected = row.dataset.name;
+    dirty = true;
+  });
+  const timer = setInterval(() => {
+    if (!dirty || panelEl.hidden) return;
+    dirty = false;
+    render();
+  }, 400);
+  function render() {
+    const stats = detective.getStats();
+    summaryEl.textContent = `${stats.totalRenders} renders \xB7 ${stats.totalRenderTime.toFixed(0)}ms \xB7 ${stats.potentiallyAvoidableRenders} potentially avoidable` + (stats.devReplays > 0 ? ` \xB7 ${stats.devReplays} dev replays` : "");
+    const rows = stats.mostExpensive.concat(stats.mostRendered).filter((s, i, arr) => arr.findIndex((o) => o.name === s.name) === i).filter((s) => !filter || s.name.toLowerCase().includes(filter)).sort((a, b) => b.totalSelfDuration - a.totalSelfDuration).slice(0, 40);
+    listEl.innerHTML = rows.map((s) => {
+      const waste = s.potentiallyAvoidableRenders;
+      const flag = waste > 0 ? `<span class="warn">${waste} avoidable</span>` : "";
+      return `<div class="row${s.name === selected ? " sel" : ""}" data-name="${escapeHtml(s.name)}">
+          <span class="name">${escapeHtml(s.name)}</span>
+          <span class="num">${s.renderCount}</span>
+          <span class="num">${s.totalSelfDuration.toFixed(0)}ms</span>
+          ${flag}
+        </div>`;
+    }).join("");
+    if (selected) {
+      const explanation = chunkOCW2Q3UW_cjs.explainEvents(selected, detective.getEvents());
+      detailEl.textContent = explanation ? chunkOCW2Q3UW_cjs.formatExplanation(explanation) : `No recorded renders for ${selected}.`;
+    }
+  }
+  const handle = {
+    destroy() {
+      unsubscribe();
+      clearInterval(timer);
+      root.remove();
+      globalThis[MOUNTED] = void 0;
+    },
+    show() {
+      panelEl.hidden = false;
+      dirty = true;
+    },
+    hide() {
+      panelEl.hidden = true;
+    }
+  };
+  g[MOUNTED] = handle;
+  return handle;
+}
+function escapeHtml(s) {
+  return s.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+}
+var TEMPLATE = `
+<style>
+  :host { all: initial; }
+  #panel {
+    position: fixed; right: 16px; bottom: 16px; width: 460px; max-height: 70vh;
+    display: flex; flex-direction: column; z-index: 2147483000;
+    font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
+    background: #14161a; color: #e6e6e6; border: 1px solid #2b2f36; border-radius: 10px;
+    box-shadow: 0 12px 40px rgba(0,0,0,.45); overflow: hidden;
+  }
+  header { display: flex; gap: 8px; align-items: center; padding: 8px 10px; background: #1b1e24; border-bottom: 1px solid #2b2f36; }
+  header b { font-weight: 600; letter-spacing: .02em; }
+  header .spacer { flex: 1; }
+  button, input { font: inherit; color: inherit; background: #23272e; border: 1px solid #333842; border-radius: 6px; padding: 3px 8px; }
+  button { cursor: pointer; }
+  #summary { padding: 6px 10px; color: #9aa4b2; border-bottom: 1px solid #2b2f36; }
+  #list { overflow: auto; max-height: 30vh; }
+  .row { display: flex; gap: 8px; padding: 4px 10px; cursor: pointer; align-items: baseline; }
+  .row:hover { background: #1d2128; }
+  .row.sel { background: #263041; }
+  .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .num { color: #9aa4b2; min-width: 56px; text-align: right; }
+  .warn { color: #f2b263; }
+  #detail { margin: 0; padding: 10px; overflow: auto; white-space: pre-wrap; border-top: 1px solid #2b2f36; color: #cfd6df; }
+</style>
+<div id="panel">
+  <header>
+    <b>Render Detective</b>
+    <span class="spacer"></span>
+    <input id="filter" placeholder="filter" size="10" />
+    <button id="pause">Pause</button>
+    <button id="clear">Clear</button>
+    <button id="close">\xD7</button>
+  </header>
+  <div id="summary"></div>
+  <div id="list"></div>
+  <pre id="detail">Select a component to see why it rendered.</pre>
+</div>
+`;
+
+exports.mountOverlay = mountOverlay;
+//# sourceMappingURL=overlay.cjs.map
+//# sourceMappingURL=overlay.cjs.map

package/dist/overlay.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/overlay/overlay.ts"],"names":["getDetective","explainEvents","formatExplanation"],"mappings":"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","file":"overlay.cjs","sourcesContent":["import { explainEvents, formatExplanation } from \"../core/explain.js\";\nimport { getDetective } from \"../core/store.js\";\nimport type { RenderEvent } from \"../core/types.js\";\n\nexport interface OverlayHandle {\n  destroy: () => void;\n  show: () => void;\n  hide: () => void;\n}\n\nconst MOUNTED = Symbol.for(\"react-render-detective.overlay\");\ntype Global = typeof globalThis & { [MOUNTED]?: OverlayHandle };\n\n/**\n * Development overlay.\n *\n * Deliberately plain DOM: rendering the inspector *inside* the app's React tree\n * would add renders to the tree it is measuring. It consumes the same event\n * model as console mode — no diagnostic logic is duplicated here (§68).\n */\nexport function mountOverlay(): OverlayHandle {\n  const g = globalThis as Global;\n  if (g[MOUNTED]) return g[MOUNTED] as OverlayHandle;\n  if (typeof document === \"undefined\") {\n    const noop: OverlayHandle = { destroy: () => {}, show: () => {}, hide: () => {} };\n    return noop;\n  }\n\n  const detective = getDetective();\n  const root = document.createElement(\"div\");\n  root.setAttribute(\"data-rrd-overlay\", \"\");\n  root.attachShadow({ mode: \"open\" });\n  const shadow = root.shadowRoot as ShadowRoot;\n  shadow.innerHTML = TEMPLATE;\n  document.body.appendChild(root);\n\n  const $ = <T extends HTMLElement>(sel: string): T => shadow.querySelector(sel) as T;\n  const listEl = $<HTMLDivElement>(\"#list\");\n  const detailEl = $<HTMLPreElement>(\"#detail\");\n  const filterEl = $<HTMLInputElement>(\"#filter\");\n  const summaryEl = $<HTMLDivElement>(\"#summary\");\n  const panelEl = $<HTMLDivElement>(\"#panel\");\n\n  let selected: string | undefined;\n  let paused = false;\n  let dirty = true;\n  let filter = \"\";\n  const recent: RenderEvent[] = [];\n\n  const unsubscribe = detective.subscribe((event) => {\n    if (paused) return;\n    recent.push(event);\n    if (recent.length > 200) recent.shift();\n    dirty = true;\n  });\n\n  filterEl.addEventListener(\"input\", () => {\n    filter = filterEl.value.trim().toLowerCase();\n    dirty = true;\n  });\n  $(\"#pause\").addEventListener(\"click\", () => {\n    paused = !paused;\n    ($(\"#pause\") as HTMLButtonElement).textContent = paused ? \"Resume\" : \"Pause\";\n  });\n  $(\"#clear\").addEventListener(\"click\", () => {\n    detective.clear();\n    recent.length = 0;\n    selected = undefined;\n    detailEl.textContent = \"\";\n    dirty = true;\n  });\n  $(\"#close\").addEventListener(\"click\", () => handle.hide());\n  listEl.addEventListener(\"click\", (e) => {\n    const row = (e.target as HTMLElement).closest(\"[data-name]\") as HTMLElement | null;\n    if (!row) return;\n    selected = row.dataset.name as string;\n    dirty = true;\n  });\n\n  const timer = setInterval(() => {\n    if (!dirty || panelEl.hidden) return;\n    dirty = false;\n    render();\n  }, 400);\n\n  function render(): void {\n    const stats = detective.getStats();\n    summaryEl.textContent =\n      `${stats.totalRenders} renders · ${stats.totalRenderTime.toFixed(0)}ms · ` +\n      `${stats.potentiallyAvoidableRenders} potentially avoidable` +\n      (stats.devReplays > 0 ? ` · ${stats.devReplays} dev replays` : \"\");\n\n    const rows = stats.mostExpensive\n      .concat(stats.mostRendered)\n      .filter((s, i, arr) => arr.findIndex((o) => o.name === s.name) === i)\n      .filter((s) => !filter || s.name.toLowerCase().includes(filter))\n      .sort((a, b) => b.totalSelfDuration - a.totalSelfDuration)\n      .slice(0, 40);\n\n    listEl.innerHTML = rows\n      .map((s) => {\n        const waste = s.potentiallyAvoidableRenders;\n        const flag = waste > 0 ? `<span class=\"warn\">${waste} avoidable</span>` : \"\";\n        return `<div class=\"row${s.name === selected ? \" sel\" : \"\"}\" data-name=\"${escapeHtml(s.name)}\">\n          <span class=\"name\">${escapeHtml(s.name)}</span>\n          <span class=\"num\">${s.renderCount}</span>\n          <span class=\"num\">${s.totalSelfDuration.toFixed(0)}ms</span>\n          ${flag}\n        </div>`;\n      })\n      .join(\"\");\n\n    if (selected) {\n      const explanation = explainEvents(selected, detective.getEvents());\n      detailEl.textContent = explanation ? formatExplanation(explanation) : `No recorded renders for ${selected}.`;\n    }\n  }\n\n  const handle: OverlayHandle = {\n    destroy() {\n      unsubscribe();\n      clearInterval(timer);\n      root.remove();\n      (globalThis as Global)[MOUNTED] = undefined;\n    },\n    show() {\n      panelEl.hidden = false;\n      dirty = true;\n    },\n    hide() {\n      panelEl.hidden = true;\n    },\n  };\n\n  g[MOUNTED] = handle;\n  return handle;\n}\n\nfunction escapeHtml(s: string): string {\n  return s.replace(/[&<>\"]/g, (c) => ({ \"&\": \"&amp;\", \"<\": \"&lt;\", \">\": \"&gt;\", '\"': \"&quot;\" })[c] as string);\n}\n\nconst TEMPLATE = `\n<style>\n  :host { all: initial; }\n  #panel {\n    position: fixed; right: 16px; bottom: 16px; width: 460px; max-height: 70vh;\n    display: flex; flex-direction: column; z-index: 2147483000;\n    font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;\n    background: #14161a; color: #e6e6e6; border: 1px solid #2b2f36; border-radius: 10px;\n    box-shadow: 0 12px 40px rgba(0,0,0,.45); overflow: hidden;\n  }\n  header { display: flex; gap: 8px; align-items: center; padding: 8px 10px; background: #1b1e24; border-bottom: 1px solid #2b2f36; }\n  header b { font-weight: 600; letter-spacing: .02em; }\n  header .spacer { flex: 1; }\n  button, input { font: inherit; color: inherit; background: #23272e; border: 1px solid #333842; border-radius: 6px; padding: 3px 8px; }\n  button { cursor: pointer; }\n  #summary { padding: 6px 10px; color: #9aa4b2; border-bottom: 1px solid #2b2f36; }\n  #list { overflow: auto; max-height: 30vh; }\n  .row { display: flex; gap: 8px; padding: 4px 10px; cursor: pointer; align-items: baseline; }\n  .row:hover { background: #1d2128; }\n  .row.sel { background: #263041; }\n  .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n  .num { color: #9aa4b2; min-width: 56px; text-align: right; }\n  .warn { color: #f2b263; }\n  #detail { margin: 0; padding: 10px; overflow: auto; white-space: pre-wrap; border-top: 1px solid #2b2f36; color: #cfd6df; }\n</style>\n<div id=\"panel\">\n  <header>\n    <b>Render Detective</b>\n    <span class=\"spacer\"></span>\n    <input id=\"filter\" placeholder=\"filter\" size=\"10\" />\n    <button id=\"pause\">Pause</button>\n    <button id=\"clear\">Clear</button>\n    <button id=\"close\">×</button>\n  </header>\n  <div id=\"summary\"></div>\n  <div id=\"list\"></div>\n  <pre id=\"detail\">Select a component to see why it rendered.</pre>\n</div>\n`;\n"]}

package/dist/overlay.d.cts

@@ -0,0 +1,15 @@
+interface OverlayHandle {
+    destroy: () => void;
+    show: () => void;
+    hide: () => void;
+}
+/**
+ * Development overlay.
+ *
+ * Deliberately plain DOM: rendering the inspector *inside* the app's React tree
+ * would add renders to the tree it is measuring. It consumes the same event
+ * model as console mode — no diagnostic logic is duplicated here (§68).
+ */
+declare function mountOverlay(): OverlayHandle;
+
+export { type OverlayHandle, mountOverlay };

package/dist/overlay.d.ts

@@ -0,0 +1,15 @@
+interface OverlayHandle {
+    destroy: () => void;
+    show: () => void;
+    hide: () => void;
+}
+/**
+ * Development overlay.
+ *
+ * Deliberately plain DOM: rendering the inspector *inside* the app's React tree
+ * would add renders to the tree it is measuring. It consumes the same event
+ * model as console mode — no diagnostic logic is duplicated here (§68).
+ */
+declare function mountOverlay(): OverlayHandle;
+
+export { type OverlayHandle, mountOverlay };