react-render-detective 0.1.0

package/dist/overlay.js

@@ -0,0 +1,145 @@
+import { explainEvents, formatExplanation } from './chunk-EGA344XG.js';
+import { getDetective } from './chunk-GRPJ4JAB.js';
+
+// 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 = 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 = explainEvents(selected, detective.getEvents());
+      detailEl.textContent = explanation ? 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>
+`;
+
+export { mountOverlay };
+//# sourceMappingURL=overlay.js.map
+//# sourceMappingURL=overlay.js.map

package/dist/overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/overlay/overlay.ts"],"names":[],"mappings":"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","file":"overlay.js","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/types-CY61yfhK.d.cts

@@ -0,0 +1,225 @@
+/** Public event & diagnostic model. Stable surface — everything else is internal. */
+type RenderPhase = "mount" | "update" | "nested-update";
+type Confidence = "high" | "medium" | "low";
+/**
+ * Why a render happened. `state-or-external` is deliberately fused: without React
+ * internals we can prove the cause originated *inside* the component, but not
+ * whether it was local state, a store subscription, or a forced update.
+ */
+type RenderReason = "mount" | "props" | "parent" | "context"
+/** Proven local state update — only reported when `useTrackedState` named it. */
+ | "state" | "state-or-external" | "unknown";
+type PropChangeKind = 
+/** key present in one props object only */
+"added" | "removed"
+/** `Object.is` false and contents differ (or are not comparable) */
+ | "value"
+/** `Object.is` false but a bounded shallow compare found identical contents */
+ | "reference";
+type PropValueType = "function" | "object" | "array" | "element" | "string" | "number" | "boolean" | "null" | "undefined" | "symbol" | "bigint";
+/** Bounded, non-retaining representation of a value. Never a live reference. */
+type Inspected = {
+    t: "primitive";
+    v: string | number | boolean | null;
+} | {
+    t: "undefined";
+} | {
+    t: "nan";
+} | {
+    t: "symbol";
+    v: string;
+} | {
+    t: "bigint";
+    v: string;
+} | {
+    t: "function";
+    name: string;
+} | {
+    t: "element";
+    name: string;
+} | {
+    t: "array";
+    length: number;
+    items?: Inspected[];
+    truncated?: boolean;
+} | {
+    t: "object";
+    ctor?: string;
+    keys?: string[];
+    entries?: Record<string, Inspected>;
+    truncated?: boolean;
+} | {
+    t: "circular";
+} | {
+    t: "truncated";
+    hint: string;
+};
+interface PropChange {
+    key: string;
+    kind: PropChangeKind;
+    valueType: PropValueType;
+    /**
+     * `true`  — reference changed, bounded shallow compare says contents are identical.
+     * `false` — contents genuinely differ.
+     * `undefined` — not shallow-comparable (function, element, mixed types).
+     */
+    shallowEqual?: boolean;
+    /**
+     * Only set when `compareFunctionSource` is enabled and both values are
+     * functions: their source text is identical, which is evidence of an inline
+     * closure being recreated — not evidence that they are interchangeable.
+     */
+    sourceEqual?: boolean;
+    previous?: Inspected;
+    current?: Inspected;
+}
+interface ComponentInfo {
+    /** Stable per mounted instance. */
+    id: string;
+    name: string;
+    /** Nearest *instrumented* ancestor — not necessarily the direct parent element. */
+    parentId?: string;
+    depth: number;
+}
+interface RenderTimings {
+    /** Profiler `actualDuration` — this component **and its whole subtree**. */
+    subtreeDuration: number;
+    /** Profiler `baseDuration` — subtree cost without memoization. */
+    baseDuration: number;
+    /**
+     * `subtreeDuration` minus the duration of instrumented descendants that
+     * rendered in the same commit. React exposes no true per-component self time,
+     * so this is an **upper bound**: it still contains any *uninstrumented*
+     * descendants' work.
+     */
+    selfDuration: number;
+    /** How much descendant time was subtracted to get `selfDuration`. */
+    accountedDescendantDuration: number;
+    /** Shared by every component in the same React commit. */
+    commitTime: number;
+    startTime: number;
+}
+interface Diagnosis {
+    reason: RenderReason;
+    confidence: Confidence;
+    /** One line: what happened. */
+    summary: string;
+    /** Ordered supporting facts, most relevant first. */
+    evidence: string[];
+    /** Present only when evidence supports it. Never a blanket "add memo". */
+    suggestion?: string;
+    /** `true` only when observable inputs did not change at all. */
+    potentiallyAvoidable: boolean;
+    severity: "normal" | "monitor" | "slow" | "very-slow" | "critical";
+}
+interface RenderEvent {
+    id: string;
+    component: ComponentInfo;
+    /** ms, `performance.now()` domain. */
+    timestamp: number;
+    /** Committed renders only, 1-based. */
+    renderNumber: number;
+    phase: RenderPhase;
+    timings: RenderTimings;
+    changedProps: PropChange[];
+    unchangedProps: string[];
+    parent?: ComponentInfo;
+    /** Nearest instrumented ancestor re-rendered in this same commit. */
+    parentRendered: boolean;
+    /**
+     * The render started at this component (state, a store, or context) rather
+     * than being handed down new props from above.
+     */
+    selfOriginated: boolean;
+    /** Tracked context values that changed in this commit. */
+    contextChanges: ContextChange[];
+    /** State updates named via `useTrackedState`. */
+    trackedState: TrackedStateChange[];
+    committed: boolean;
+    /**
+     * Render-function invocations for this commit. `> 1` means a development
+     * replay (StrictMode double-invoke or a discarded concurrent attempt).
+     */
+    attempts: number;
+    devReplay: boolean;
+    diagnosis: Diagnosis;
+}
+interface ContextChange {
+    contextName: string;
+    changedKeys: string[];
+    /** Whole value reference changed but its shallow contents did not. */
+    referenceOnly: boolean;
+    commitTime: number;
+}
+interface ComponentStats {
+    id: string;
+    name: string;
+    renderCount: number;
+    mountCount: number;
+    uncommittedAttempts: number;
+    devReplays: number;
+    totalSelfDuration: number;
+    averageSelfDuration: number;
+    medianSelfDuration: number;
+    p95SelfDuration: number;
+    p99SelfDuration: number;
+    maxSelfDuration: number;
+    slowRenders: number;
+    potentiallyAvoidableRenders: number;
+    reasons: Record<RenderReason, number>;
+}
+interface AppStats {
+    components: number;
+    totalRenders: number;
+    totalRenderTime: number;
+    slowRenders: number;
+    potentiallyAvoidableRenders: number;
+    devReplays: number;
+    slowest: ComponentStats[];
+    mostRendered: ComponentStats[];
+    mostExpensive: ComponentStats[];
+}
+type Mode = "silent" | "console" | "verbose";
+interface Thresholds {
+    monitor: number;
+    slow: number;
+    verySlow: number;
+    critical: number;
+}
+interface InspectionLimits {
+    depth: number;
+    maxObjectKeys: number;
+    maxArrayLength: number;
+    maxStringLength: number;
+    maxSerializedNodes: number;
+}
+interface DetectiveConfig {
+    enabled: boolean;
+    mode: Mode;
+    /** Only these components are instrumented. Empty = all. */
+    include: Array<string | RegExp>;
+    exclude: Array<string | RegExp>;
+    /** 0..1 — fraction of *components* sampled, decided once per instance. */
+    samplingRate: number;
+    /** Ring-buffer capacity. */
+    maxEvents: number;
+    /** ms. Renders at or above this are flagged slow. */
+    slowRenderThreshold: number;
+    thresholds: Thresholds;
+    inspection: InspectionLimits;
+    /** Compare function source text to spot recreated inline callbacks. Off by default. */
+    compareFunctionSource: boolean;
+    onEvent?: (event: RenderEvent) => void;
+}
+type DetectiveOptions = Partial<Omit<DetectiveConfig, "thresholds" | "inspection">> & {
+    thresholds?: Partial<Thresholds>;
+    inspection?: Partial<InspectionLimits>;
+};
+interface TrackedStateChange {
+    /** Label passed to `useTrackedState`. */
+    name: string;
+    previous: Inspected;
+    current: Inspected;
+}
+
+export type { AppStats as A, ContextChange as C, DetectiveConfig as D, Inspected as I, Mode as M, PropChange as P, RenderReason as R, TrackedStateChange as T, DetectiveOptions as a, RenderEvent as b, RenderPhase as c, ComponentStats as d, Thresholds as e, Diagnosis as f, InspectionLimits as g, PropValueType as h, ComponentInfo as i, Confidence as j, PropChangeKind as k, RenderTimings as l };

package/dist/types-CY61yfhK.d.ts

@@ -0,0 +1,225 @@
+/** Public event & diagnostic model. Stable surface — everything else is internal. */
+type RenderPhase = "mount" | "update" | "nested-update";
+type Confidence = "high" | "medium" | "low";
+/**
+ * Why a render happened. `state-or-external` is deliberately fused: without React
+ * internals we can prove the cause originated *inside* the component, but not
+ * whether it was local state, a store subscription, or a forced update.
+ */
+type RenderReason = "mount" | "props" | "parent" | "context"
+/** Proven local state update — only reported when `useTrackedState` named it. */
+ | "state" | "state-or-external" | "unknown";
+type PropChangeKind = 
+/** key present in one props object only */
+"added" | "removed"
+/** `Object.is` false and contents differ (or are not comparable) */
+ | "value"
+/** `Object.is` false but a bounded shallow compare found identical contents */
+ | "reference";
+type PropValueType = "function" | "object" | "array" | "element" | "string" | "number" | "boolean" | "null" | "undefined" | "symbol" | "bigint";
+/** Bounded, non-retaining representation of a value. Never a live reference. */
+type Inspected = {
+    t: "primitive";
+    v: string | number | boolean | null;
+} | {
+    t: "undefined";
+} | {
+    t: "nan";
+} | {
+    t: "symbol";
+    v: string;
+} | {
+    t: "bigint";
+    v: string;
+} | {
+    t: "function";
+    name: string;
+} | {
+    t: "element";
+    name: string;
+} | {
+    t: "array";
+    length: number;
+    items?: Inspected[];
+    truncated?: boolean;
+} | {
+    t: "object";
+    ctor?: string;
+    keys?: string[];
+    entries?: Record<string, Inspected>;
+    truncated?: boolean;
+} | {
+    t: "circular";
+} | {
+    t: "truncated";
+    hint: string;
+};
+interface PropChange {
+    key: string;
+    kind: PropChangeKind;
+    valueType: PropValueType;
+    /**
+     * `true`  — reference changed, bounded shallow compare says contents are identical.
+     * `false` — contents genuinely differ.
+     * `undefined` — not shallow-comparable (function, element, mixed types).
+     */
+    shallowEqual?: boolean;
+    /**
+     * Only set when `compareFunctionSource` is enabled and both values are
+     * functions: their source text is identical, which is evidence of an inline
+     * closure being recreated — not evidence that they are interchangeable.
+     */
+    sourceEqual?: boolean;
+    previous?: Inspected;
+    current?: Inspected;
+}
+interface ComponentInfo {
+    /** Stable per mounted instance. */
+    id: string;
+    name: string;
+    /** Nearest *instrumented* ancestor — not necessarily the direct parent element. */
+    parentId?: string;
+    depth: number;
+}
+interface RenderTimings {
+    /** Profiler `actualDuration` — this component **and its whole subtree**. */
+    subtreeDuration: number;
+    /** Profiler `baseDuration` — subtree cost without memoization. */
+    baseDuration: number;
+    /**
+     * `subtreeDuration` minus the duration of instrumented descendants that
+     * rendered in the same commit. React exposes no true per-component self time,
+     * so this is an **upper bound**: it still contains any *uninstrumented*
+     * descendants' work.
+     */
+    selfDuration: number;
+    /** How much descendant time was subtracted to get `selfDuration`. */
+    accountedDescendantDuration: number;
+    /** Shared by every component in the same React commit. */
+    commitTime: number;
+    startTime: number;
+}
+interface Diagnosis {
+    reason: RenderReason;
+    confidence: Confidence;
+    /** One line: what happened. */
+    summary: string;
+    /** Ordered supporting facts, most relevant first. */
+    evidence: string[];
+    /** Present only when evidence supports it. Never a blanket "add memo". */
+    suggestion?: string;
+    /** `true` only when observable inputs did not change at all. */
+    potentiallyAvoidable: boolean;
+    severity: "normal" | "monitor" | "slow" | "very-slow" | "critical";
+}
+interface RenderEvent {
+    id: string;
+    component: ComponentInfo;
+    /** ms, `performance.now()` domain. */
+    timestamp: number;
+    /** Committed renders only, 1-based. */
+    renderNumber: number;
+    phase: RenderPhase;
+    timings: RenderTimings;
+    changedProps: PropChange[];
+    unchangedProps: string[];
+    parent?: ComponentInfo;
+    /** Nearest instrumented ancestor re-rendered in this same commit. */
+    parentRendered: boolean;
+    /**
+     * The render started at this component (state, a store, or context) rather
+     * than being handed down new props from above.
+     */
+    selfOriginated: boolean;
+    /** Tracked context values that changed in this commit. */
+    contextChanges: ContextChange[];
+    /** State updates named via `useTrackedState`. */
+    trackedState: TrackedStateChange[];
+    committed: boolean;
+    /**
+     * Render-function invocations for this commit. `> 1` means a development
+     * replay (StrictMode double-invoke or a discarded concurrent attempt).
+     */
+    attempts: number;
+    devReplay: boolean;
+    diagnosis: Diagnosis;
+}
+interface ContextChange {
+    contextName: string;
+    changedKeys: string[];
+    /** Whole value reference changed but its shallow contents did not. */
+    referenceOnly: boolean;
+    commitTime: number;
+}
+interface ComponentStats {
+    id: string;
+    name: string;
+    renderCount: number;
+    mountCount: number;
+    uncommittedAttempts: number;
+    devReplays: number;
+    totalSelfDuration: number;
+    averageSelfDuration: number;
+    medianSelfDuration: number;
+    p95SelfDuration: number;
+    p99SelfDuration: number;
+    maxSelfDuration: number;
+    slowRenders: number;
+    potentiallyAvoidableRenders: number;
+    reasons: Record<RenderReason, number>;
+}
+interface AppStats {
+    components: number;
+    totalRenders: number;
+    totalRenderTime: number;
+    slowRenders: number;
+    potentiallyAvoidableRenders: number;
+    devReplays: number;
+    slowest: ComponentStats[];
+    mostRendered: ComponentStats[];
+    mostExpensive: ComponentStats[];
+}
+type Mode = "silent" | "console" | "verbose";
+interface Thresholds {
+    monitor: number;
+    slow: number;
+    verySlow: number;
+    critical: number;
+}
+interface InspectionLimits {
+    depth: number;
+    maxObjectKeys: number;
+    maxArrayLength: number;
+    maxStringLength: number;
+    maxSerializedNodes: number;
+}
+interface DetectiveConfig {
+    enabled: boolean;
+    mode: Mode;
+    /** Only these components are instrumented. Empty = all. */
+    include: Array<string | RegExp>;
+    exclude: Array<string | RegExp>;
+    /** 0..1 — fraction of *components* sampled, decided once per instance. */
+    samplingRate: number;
+    /** Ring-buffer capacity. */
+    maxEvents: number;
+    /** ms. Renders at or above this are flagged slow. */
+    slowRenderThreshold: number;
+    thresholds: Thresholds;
+    inspection: InspectionLimits;
+    /** Compare function source text to spot recreated inline callbacks. Off by default. */
+    compareFunctionSource: boolean;
+    onEvent?: (event: RenderEvent) => void;
+}
+type DetectiveOptions = Partial<Omit<DetectiveConfig, "thresholds" | "inspection">> & {
+    thresholds?: Partial<Thresholds>;
+    inspection?: Partial<InspectionLimits>;
+};
+interface TrackedStateChange {
+    /** Label passed to `useTrackedState`. */
+    name: string;
+    previous: Inspected;
+    current: Inspected;
+}
+
+export type { AppStats as A, ContextChange as C, DetectiveConfig as D, Inspected as I, Mode as M, PropChange as P, RenderReason as R, TrackedStateChange as T, DetectiveOptions as a, RenderEvent as b, RenderPhase as c, ComponentStats as d, Thresholds as e, Diagnosis as f, InspectionLimits as g, PropValueType as h, ComponentInfo as i, Confidence as j, PropChangeKind as k, RenderTimings as l };