react-perfscope 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ray
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,83 @@
+# react-perfscope
+
+Performance debugging tool for React 18+ apps. Records forced reflows, layout shifts, long tasks, paint, web vitals, network, and React component renders during development.
+
+This meta package re-exports everything from `@react-perfscope/core`, `@react-perfscope/react`, and `@react-perfscope/ui`, plus a side-effect `react-perfscope/auto` entry that bootstraps the full UI in one import.
+
+## Quickstart
+
+The simplest way to enable react-perfscope in a dev build:
+
+```ts
+// At the top of your entry file (e.g. src/main.tsx)
+import 'react-perfscope/auto'
+
+// ... your normal imports
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(<App />)
+```
+
+`react-perfscope/auto` must be imported BEFORE `react-dom` so the DevTools hook is installed before React captures it. Build plugins (`@react-perfscope/vite`, `@react-perfscope/webpack`) handle this ordering automatically.
+
+## Manual API
+
+If you want to control mounting yourself, import the named exports:
+
+```ts
+import { createRecorder, createRenderCollector, mount } from 'react-perfscope'
+
+const recorder = createRecorder()
+recorder.use(createRenderCollector())
+const unmount = mount({ recorder, position: 'top-right' })
+```
+
+## Production safety
+
+`react-perfscope/auto` bails when `process.env.NODE_ENV === 'production'`. The build plugins also exclude themselves from production builds. The manual API has no production guard — use it only behind your own dev/prod check.
+
+---
+
+<a id="한국어"></a>
+
+# 한국어
+
+React 18+ 앱용 성능 디버깅 도구. 개발 중에 강제 리플로우, 레이아웃 시프트, 롱 태스크, 페인트, 웹 바이탈, 네트워크 요청, React 컴포넌트 렌더를 기록한다.
+
+이 메타 패키지는 `@react-perfscope/core`, `@react-perfscope/react`, `@react-perfscope/ui`의 모든 것을 re-export하고, 임포트 한 줄로 전체 UI를 부트스트랩하는 `react-perfscope/auto` 사이드 이펙트 엔트리를 제공한다.
+
+## 빠르게 시작하기
+
+dev 빌드에서 react-perfscope를 켜는 가장 간단한 방법:
+
+```ts
+// entry 파일 맨 위에 (예: src/main.tsx)
+import 'react-perfscope/auto'
+
+// ... 평소 imports
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(<App />)
+```
+
+`react-perfscope/auto`는 DevTools 훅이 React에 캡처되기 전에 설치될 수 있도록 반드시 `react-dom`보다 먼저 import해야 한다. 빌드 플러그인(`@react-perfscope/vite`, `@react-perfscope/webpack`)을 쓰면 이 순서가 자동으로 처리된다.
+
+## 수동 API
+
+직접 마운트를 제어하고 싶다면 named export를 쓰면 된다:
+
+```ts
+import { createRecorder, createRenderCollector, mount } from 'react-perfscope'
+
+const recorder = createRecorder()
+recorder.use(createRenderCollector())
+const unmount = mount({ recorder, position: 'top-right' })
+```
+
+## 프로덕션 안전성
+
+`react-perfscope/auto`는 `process.env.NODE_ENV === 'production'`이면 아무것도 하지 않는다. 빌드 플러그인도 프로덕션 빌드에서는 자동으로 빠진다. 수동 API에는 프로덕션 가드가 없으니, 직접 dev/prod 분기를 만들어서 써야 한다.

package/dist/auto.cjs

@@ -0,0 +1,46 @@
+"use strict";
+
+// src/auto.ts
+var import_core = require("@react-perfscope/core");
+var import_react = require("@react-perfscope/react");
+var import_ui = require("@react-perfscope/ui");
+function bootstrap() {
+  if (typeof globalThis === "undefined") return;
+  const g = globalThis;
+  if (g.__REACT_PERFSCOPE_AUTO_MOUNTED__) return;
+  const env = globalThis.process?.env?.NODE_ENV;
+  if (env === "production") return;
+  if (typeof document === "undefined") return;
+  try {
+    (0, import_react.installDevToolsHook)(() => {
+    });
+    const recorder = (0, import_core.createRecorder)();
+    recorder.use((0, import_core.createForcedReflowCollector)());
+    recorder.use((0, import_core.createLongTasksCollector)());
+    recorder.use((0, import_core.createLayoutShiftCollector)());
+    recorder.use((0, import_core.createNetworkCollector)());
+    recorder.use((0, import_core.createWebVitalsCollector)());
+    recorder.use((0, import_react.createRenderCollector)());
+    const selfProfiler = (0, import_core.createSelfProfilingCollector)();
+    recorder.use(selfProfiler);
+    const heap = (0, import_core.createHeapCollector)();
+    recorder.use(heap);
+    const interaction = (0, import_core.createInteractionCollector)();
+    recorder.use(interaction);
+    const frame = (0, import_core.createFrameCollector)();
+    recorder.use(frame);
+    const resolver = (0, import_core.createSourceMapResolver)();
+    (0, import_ui.mount)({
+      recorder,
+      resolveFrame: (f) => resolver.resolve(f),
+      // Assemble interactions first so self-profiling can attribute their
+      // processing windows, then attach the heap series and frame timestamps.
+      finalize: (result) => Promise.resolve(interaction.finalize(result)).then((r) => selfProfiler.finalize(r)).then((r) => heap.finalize(r)).then((r) => frame.finalize(r))
+    });
+    g.__REACT_PERFSCOPE_AUTO_MOUNTED__ = true;
+  } catch (err) {
+    console.warn("[react-perfscope] auto bootstrap failed:", err);
+  }
+}
+bootstrap();
+//# sourceMappingURL=auto.cjs.map

package/dist/auto.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/auto.ts"],"sourcesContent":["import {\n  createRecorder,\n  createForcedReflowCollector,\n  createLongTasksCollector,\n  createLayoutShiftCollector,\n  createNetworkCollector,\n  createWebVitalsCollector,\n  createSelfProfilingCollector,\n  createHeapCollector,\n  createInteractionCollector,\n  createFrameCollector,\n  createSourceMapResolver,\n} from '@react-perfscope/core'\nimport { createRenderCollector, installDevToolsHook } from '@react-perfscope/react'\nimport { mount } from '@react-perfscope/ui'\n\n/**\n * Side-effect entry. Importing `react-perfscope/auto` bootstraps a Recorder\n * with the render collector and mounts the UI. Idempotent — importing twice\n * is a no-op (the first import wins).\n *\n * Bails when `process.env.NODE_ENV === 'production'` (build plugins also\n * guard against prod, but this is defense-in-depth).\n */\nfunction bootstrap(): void {\n  if (typeof globalThis === 'undefined') return\n  const g = globalThis as { __REACT_PERFSCOPE_AUTO_MOUNTED__?: boolean }\n  if (g.__REACT_PERFSCOPE_AUTO_MOUNTED__) return\n\n  const env = (globalThis as { process?: { env?: { NODE_ENV?: string } } }).process?.env?.NODE_ENV\n  if (env === 'production') return\n\n  if (typeof document === 'undefined') return\n\n  try {\n    // Install the React DevTools hook SYNCHRONOUSLY before react-dom is\n    // evaluated. react-dom captures `__REACT_DEVTOOLS_GLOBAL_HOOK__` exactly\n    // once at module-load time, so the hook must exist by the time the user\n    // bundle imports react-dom. A no-op listener is enough to register the\n    // hook — when the render collector later activates, it adds the real\n    // commit handler to the same global hook.\n    installDevToolsHook(() => {})\n\n    const recorder = createRecorder()\n    recorder.use(createForcedReflowCollector())\n    recorder.use(createLongTasksCollector())\n    recorder.use(createLayoutShiftCollector())\n    recorder.use(createNetworkCollector())\n    recorder.use(createWebVitalsCollector())\n    recorder.use(createRenderCollector())\n    const selfProfiler = createSelfProfilingCollector()\n    recorder.use(selfProfiler)\n    const heap = createHeapCollector()\n    recorder.use(heap)\n    const interaction = createInteractionCollector()\n    recorder.use(interaction)\n    const frame = createFrameCollector()\n    recorder.use(frame)\n    const resolver = createSourceMapResolver()\n    mount({\n      recorder,\n      resolveFrame: (f) => resolver.resolve(f),\n      // Assemble interactions first so self-profiling can attribute their\n      // processing windows, then attach the heap series and frame timestamps.\n      finalize: (result) =>\n        Promise.resolve(interaction.finalize(result))\n          .then((r) => selfProfiler.finalize(r))\n          .then((r) => heap.finalize(r))\n          .then((r) => frame.finalize(r)),\n    })\n    g.__REACT_PERFSCOPE_AUTO_MOUNTED__ = true\n  } catch (err) {\n    console.warn('[react-perfscope] auto bootstrap failed:', err)\n  }\n}\n\nbootstrap()\n"],"mappings":";;;AAAA,kBAYO;AACP,mBAA2D;AAC3D,gBAAsB;AAUtB,SAAS,YAAkB;AACzB,MAAI,OAAO,eAAe,YAAa;AACvC,QAAM,IAAI;AACV,MAAI,EAAE,iCAAkC;AAExC,QAAM,MAAO,WAA6D,SAAS,KAAK;AACxF,MAAI,QAAQ,aAAc;AAE1B,MAAI,OAAO,aAAa,YAAa;AAErC,MAAI;AAOF,0CAAoB,MAAM;AAAA,IAAC,CAAC;AAE5B,UAAM,eAAW,4BAAe;AAChC,aAAS,QAAI,yCAA4B,CAAC;AAC1C,aAAS,QAAI,sCAAyB,CAAC;AACvC,aAAS,QAAI,wCAA2B,CAAC;AACzC,aAAS,QAAI,oCAAuB,CAAC;AACrC,aAAS,QAAI,sCAAyB,CAAC;AACvC,aAAS,QAAI,oCAAsB,CAAC;AACpC,UAAM,mBAAe,0CAA6B;AAClD,aAAS,IAAI,YAAY;AACzB,UAAM,WAAO,iCAAoB;AACjC,aAAS,IAAI,IAAI;AACjB,UAAM,kBAAc,wCAA2B;AAC/C,aAAS,IAAI,WAAW;AACxB,UAAM,YAAQ,kCAAqB;AACnC,aAAS,IAAI,KAAK;AAClB,UAAM,eAAW,qCAAwB;AACzC,yBAAM;AAAA,MACJ;AAAA,MACA,cAAc,CAAC,MAAM,SAAS,QAAQ,CAAC;AAAA;AAAA;AAAA,MAGvC,UAAU,CAAC,WACT,QAAQ,QAAQ,YAAY,SAAS,MAAM,CAAC,EACzC,KAAK,CAAC,MAAM,aAAa,SAAS,CAAC,CAAC,EACpC,KAAK,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,EAC5B,KAAK,CAAC,MAAM,MAAM,SAAS,CAAC,CAAC;AAAA,IACpC,CAAC;AACD,MAAE,mCAAmC;AAAA,EACvC,SAAS,KAAK;AACZ,YAAQ,KAAK,4CAA4C,GAAG;AAAA,EAC9D;AACF;AAEA,UAAU;","names":[]}

package/dist/auto.d.cts

@@ -0,0 +1,6 @@
+/// <reference lib="es2015" />
+/// <reference lib="dom" />
+
+import '@react-perfscope/core';
+import '@react-perfscope/react';
+import '@react-perfscope/ui';

package/dist/auto.d.ts

@@ -0,0 +1,6 @@
+/// <reference lib="es2015" />
+/// <reference lib="dom" />
+
+import '@react-perfscope/core';
+import '@react-perfscope/react';
+import '@react-perfscope/ui';

package/dist/auto.js

@@ -0,0 +1,56 @@
+// src/auto.ts
+import {
+  createRecorder,
+  createForcedReflowCollector,
+  createLongTasksCollector,
+  createLayoutShiftCollector,
+  createNetworkCollector,
+  createWebVitalsCollector,
+  createSelfProfilingCollector,
+  createHeapCollector,
+  createInteractionCollector,
+  createFrameCollector,
+  createSourceMapResolver
+} from "@react-perfscope/core";
+import { createRenderCollector, installDevToolsHook } from "@react-perfscope/react";
+import { mount } from "@react-perfscope/ui";
+function bootstrap() {
+  if (typeof globalThis === "undefined") return;
+  const g = globalThis;
+  if (g.__REACT_PERFSCOPE_AUTO_MOUNTED__) return;
+  const env = globalThis.process?.env?.NODE_ENV;
+  if (env === "production") return;
+  if (typeof document === "undefined") return;
+  try {
+    installDevToolsHook(() => {
+    });
+    const recorder = createRecorder();
+    recorder.use(createForcedReflowCollector());
+    recorder.use(createLongTasksCollector());
+    recorder.use(createLayoutShiftCollector());
+    recorder.use(createNetworkCollector());
+    recorder.use(createWebVitalsCollector());
+    recorder.use(createRenderCollector());
+    const selfProfiler = createSelfProfilingCollector();
+    recorder.use(selfProfiler);
+    const heap = createHeapCollector();
+    recorder.use(heap);
+    const interaction = createInteractionCollector();
+    recorder.use(interaction);
+    const frame = createFrameCollector();
+    recorder.use(frame);
+    const resolver = createSourceMapResolver();
+    mount({
+      recorder,
+      resolveFrame: (f) => resolver.resolve(f),
+      // Assemble interactions first so self-profiling can attribute their
+      // processing windows, then attach the heap series and frame timestamps.
+      finalize: (result) => Promise.resolve(interaction.finalize(result)).then((r) => selfProfiler.finalize(r)).then((r) => heap.finalize(r)).then((r) => frame.finalize(r))
+    });
+    g.__REACT_PERFSCOPE_AUTO_MOUNTED__ = true;
+  } catch (err) {
+    console.warn("[react-perfscope] auto bootstrap failed:", err);
+  }
+}
+bootstrap();
+//# sourceMappingURL=auto.js.map

package/dist/auto.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/auto.ts"],"sourcesContent":["import {\n  createRecorder,\n  createForcedReflowCollector,\n  createLongTasksCollector,\n  createLayoutShiftCollector,\n  createNetworkCollector,\n  createWebVitalsCollector,\n  createSelfProfilingCollector,\n  createHeapCollector,\n  createInteractionCollector,\n  createFrameCollector,\n  createSourceMapResolver,\n} from '@react-perfscope/core'\nimport { createRenderCollector, installDevToolsHook } from '@react-perfscope/react'\nimport { mount } from '@react-perfscope/ui'\n\n/**\n * Side-effect entry. Importing `react-perfscope/auto` bootstraps a Recorder\n * with the render collector and mounts the UI. Idempotent — importing twice\n * is a no-op (the first import wins).\n *\n * Bails when `process.env.NODE_ENV === 'production'` (build plugins also\n * guard against prod, but this is defense-in-depth).\n */\nfunction bootstrap(): void {\n  if (typeof globalThis === 'undefined') return\n  const g = globalThis as { __REACT_PERFSCOPE_AUTO_MOUNTED__?: boolean }\n  if (g.__REACT_PERFSCOPE_AUTO_MOUNTED__) return\n\n  const env = (globalThis as { process?: { env?: { NODE_ENV?: string } } }).process?.env?.NODE_ENV\n  if (env === 'production') return\n\n  if (typeof document === 'undefined') return\n\n  try {\n    // Install the React DevTools hook SYNCHRONOUSLY before react-dom is\n    // evaluated. react-dom captures `__REACT_DEVTOOLS_GLOBAL_HOOK__` exactly\n    // once at module-load time, so the hook must exist by the time the user\n    // bundle imports react-dom. A no-op listener is enough to register the\n    // hook — when the render collector later activates, it adds the real\n    // commit handler to the same global hook.\n    installDevToolsHook(() => {})\n\n    const recorder = createRecorder()\n    recorder.use(createForcedReflowCollector())\n    recorder.use(createLongTasksCollector())\n    recorder.use(createLayoutShiftCollector())\n    recorder.use(createNetworkCollector())\n    recorder.use(createWebVitalsCollector())\n    recorder.use(createRenderCollector())\n    const selfProfiler = createSelfProfilingCollector()\n    recorder.use(selfProfiler)\n    const heap = createHeapCollector()\n    recorder.use(heap)\n    const interaction = createInteractionCollector()\n    recorder.use(interaction)\n    const frame = createFrameCollector()\n    recorder.use(frame)\n    const resolver = createSourceMapResolver()\n    mount({\n      recorder,\n      resolveFrame: (f) => resolver.resolve(f),\n      // Assemble interactions first so self-profiling can attribute their\n      // processing windows, then attach the heap series and frame timestamps.\n      finalize: (result) =>\n        Promise.resolve(interaction.finalize(result))\n          .then((r) => selfProfiler.finalize(r))\n          .then((r) => heap.finalize(r))\n          .then((r) => frame.finalize(r)),\n    })\n    g.__REACT_PERFSCOPE_AUTO_MOUNTED__ = true\n  } catch (err) {\n    console.warn('[react-perfscope] auto bootstrap failed:', err)\n  }\n}\n\nbootstrap()\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB,2BAA2B;AAC3D,SAAS,aAAa;AAUtB,SAAS,YAAkB;AACzB,MAAI,OAAO,eAAe,YAAa;AACvC,QAAM,IAAI;AACV,MAAI,EAAE,iCAAkC;AAExC,QAAM,MAAO,WAA6D,SAAS,KAAK;AACxF,MAAI,QAAQ,aAAc;AAE1B,MAAI,OAAO,aAAa,YAAa;AAErC,MAAI;AAOF,wBAAoB,MAAM;AAAA,IAAC,CAAC;AAE5B,UAAM,WAAW,eAAe;AAChC,aAAS,IAAI,4BAA4B,CAAC;AAC1C,aAAS,IAAI,yBAAyB,CAAC;AACvC,aAAS,IAAI,2BAA2B,CAAC;AACzC,aAAS,IAAI,uBAAuB,CAAC;AACrC,aAAS,IAAI,yBAAyB,CAAC;AACvC,aAAS,IAAI,sBAAsB,CAAC;AACpC,UAAM,eAAe,6BAA6B;AAClD,aAAS,IAAI,YAAY;AACzB,UAAM,OAAO,oBAAoB;AACjC,aAAS,IAAI,IAAI;AACjB,UAAM,cAAc,2BAA2B;AAC/C,aAAS,IAAI,WAAW;AACxB,UAAM,QAAQ,qBAAqB;AACnC,aAAS,IAAI,KAAK;AAClB,UAAM,WAAW,wBAAwB;AACzC,UAAM;AAAA,MACJ;AAAA,MACA,cAAc,CAAC,MAAM,SAAS,QAAQ,CAAC;AAAA;AAAA;AAAA,MAGvC,UAAU,CAAC,WACT,QAAQ,QAAQ,YAAY,SAAS,MAAM,CAAC,EACzC,KAAK,CAAC,MAAM,aAAa,SAAS,CAAC,CAAC,EACpC,KAAK,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,EAC5B,KAAK,CAAC,MAAM,MAAM,SAAS,CAAC,CAAC;AAAA,IACpC,CAAC;AACD,MAAE,mCAAmC;AAAA,EACvC,SAAS,KAAK;AACZ,YAAQ,KAAK,4CAA4C,GAAG;AAAA,EAC9D;AACF;AAEA,UAAU;","names":[]}

package/dist/index.cjs

@@ -0,0 +1,29 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+module.exports = __toCommonJS(index_exports);
+__reExport(index_exports, require("@react-perfscope/core"), module.exports);
+__reExport(index_exports, require("@react-perfscope/react"), module.exports);
+__reExport(index_exports, require("@react-perfscope/ui"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("@react-perfscope/core"),
+  ...require("@react-perfscope/react"),
+  ...require("@react-perfscope/ui")
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from '@react-perfscope/core'\nexport * from '@react-perfscope/react'\nexport * from '@react-perfscope/ui'\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,0BAAc,kCAAd;AACA,0BAAc,mCADd;AAEA,0BAAc,gCAFd;","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,6 @@
+/// <reference lib="es2015" />
+/// <reference lib="dom" />
+
+export * from '@react-perfscope/core';
+export * from '@react-perfscope/react';
+export * from '@react-perfscope/ui';

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference lib="es2015" />
+/// <reference lib="dom" />
+
+export * from '@react-perfscope/core';
+export * from '@react-perfscope/react';
+export * from '@react-perfscope/ui';

package/dist/index.js

@@ -0,0 +1,5 @@
+// src/index.ts
+export * from "@react-perfscope/core";
+export * from "@react-perfscope/react";
+export * from "@react-perfscope/ui";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from '@react-perfscope/core'\nexport * from '@react-perfscope/react'\nexport * from '@react-perfscope/ui'\n"],"mappings":";AAAA,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "react-perfscope",
+  "version": "0.1.0",
+  "description": "Zero-config React runtime performance profiler — renders, long tasks, layout shifts, web vitals, INP breakdown, heap & FPS — in an in-app panel.",
+  "keywords": [
+    "react",
+    "performance",
+    "profiler",
+    "web-vitals",
+    "inp",
+    "render",
+    "long-tasks",
+    "layout-shift",
+    "memory",
+    "fps",
+    "devtools"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./auto": {
+      "types": "./dist/auto.d.ts",
+      "import": "./dist/auto.js",
+      "require": "./dist/auto.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "./dist/auto.js",
+    "./dist/auto.cjs"
+  ],
+  "dependencies": {
+    "@react-perfscope/core": "0.1.0",
+    "@react-perfscope/react": "0.1.0",
+    "@react-perfscope/ui": "0.1.0"
+  },
+  "license": "MIT",
+  "author": "rayforvideos",
+  "homepage": "https://github.com/rayforvideos/react-perfscope#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rayforvideos/react-perfscope.git",
+    "directory": "packages/meta"
+  },
+  "bugs": "https://github.com/rayforvideos/react-perfscope/issues",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup && node scripts/prepend-dts-refs.mjs",
+    "typecheck": "tsc --noEmit"
+  }
+}