@react-trace-enhancer/kit 0.0.1

package/README.md

@@ -0,0 +1,123 @@
+# @react-trace-enhancer/kit
+
+`@react-trace-enhancer/kit` is the batteries-included package for adding the React Trace inspector to an app without wiring plugins manually.
+
+It ships a default `Trace` export that wraps `@react-trace-enhancer/core` and preconfigures all official plugins.
+
+## Installation
+
+```bash
+pnpm add --dev @react-trace-enhancer/kit
+```
+
+Peer requirements:
+
+- `react >= 18`
+- `react-dom >= 18`
+
+## When to use this package
+
+Use `@react-trace-enhancer/kit` when you want the standard inspector setup with all official plugins already enabled.
+
+If you need granular control over plugin composition, use `@react-trace-enhancer/core` with individual `@react-trace-enhancer/plugin-*` packages instead.
+
+## Default export
+
+The package exports a default `Trace` component:
+
+```tsx
+import Trace from '@react-trace-enhancer/kit'
+
+function AppShell() {
+  return <Trace root={import.meta.env.VITE_ROOT} />
+}
+```
+
+`root` should be the absolute path to your project root. The wrapper forwards it to `@react-trace-enhancer/core` so bundled plugins can resolve files for preview, comments, copy-to-clipboard, and open-in-editor flows.
+
+## Bundled plugins
+
+`@react-trace-enhancer/kit` currently wires these official plugins in this order:
+
+1. `@react-trace-enhancer/plugin-preview` — adds the source preview panel with inline Monaco-based file preview and editing support.
+2. `@react-trace-enhancer/plugin-copy-to-clipboard` — adds an action-panel item for copying the selected source location.
+3. `@react-trace-enhancer/plugin-open-editor` — adds an action-panel item for opening the selected source in your editor.
+4. `@react-trace-enhancer/plugin-comments` — adds inline comments UI, including the comments toolbar and comment actions.
+
+## Props
+
+The default export supports the following props today:
+
+| Prop              | Type                                                           | Default          | Description                                                                          |
+| ----------------- | -------------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------ |
+| `root`            | `string`                                                       | —                | Required absolute path to the project root.                                          |
+| `position`        | `'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `'bottom-right'` | Controls where the Trace widget is placed on screen.                                 |
+| `minimized`       | `boolean`                                                      | `false`          | Controls whether the widget starts minimized or not.                                 |
+| `editingDisabled` | `boolean`                                                      | `false`          | Disables inline editing in the preview panel and hides the Save and expand controls. |
+| `editor`          | `EditorPreset`                                                 | `'vscode'`       | Sets the default editor used by the Open in Editor action.                           |
+
+`EditorPreset` currently supports these values:
+
+- `vscode`
+- `cursor`
+- `windsurf`
+- `zed`
+- `webstorm`
+- `intellij`
+
+## Example
+
+Change your dev script to export the project root e.g.:
+
+```diff
+-    "dev": "vite"
++    "dev": "VITE_ROOT=$(pwd) vite",
+```
+
+Then add it next to your app:
+
+```tsx
+import Trace from '@react-trace-enhancer/kit'
+
+import App from './App'
+
+export function Root() {
+  return (
+    <>
+      <App />
+      <Trace
+        root={import.meta.env.VITE_ROOT}
+        position="bottom-left"
+        minimized
+        editor="cursor"
+        editingDisabled
+      />
+    </>
+  )
+}
+```
+
+### Next.js with Turbopack
+
+Expose the project root in your dev script:
+
+```diff
+-    "dev": "next dev --turbopack"
++    "dev": "NEXT_PUBLIC_REACT_TRACE_ROOT=$(pwd) next dev --turbopack",
+```
+
+Then mount Trace from a client component:
+
+```tsx
+'use client'
+
+import Trace from '@react-trace-enhancer/kit'
+
+export function ReactTrace() {
+  return <Trace root={process.env.NEXT_PUBLIC_REACT_TRACE_ROOT ?? ''} />
+}
+```
+
+## Exposed types
+
+In addition to the default export, the package exports `TraceAllInOneProps` and re-exports `EditorPreset` for convenience.

package/dist/index.cjs

@@ -0,0 +1,33 @@
+let _react_trace_enhancer_core = require("@react-trace-enhancer/core");
+let _react_trace_enhancer_plugin_comments = require("@react-trace-enhancer/plugin-comments");
+let _react_trace_enhancer_plugin_copy_to_clipboard = require("@react-trace-enhancer/plugin-copy-to-clipboard");
+let _react_trace_enhancer_plugin_open_editor = require("@react-trace-enhancer/plugin-open-editor");
+let _react_trace_enhancer_plugin_preview = require("@react-trace-enhancer/plugin-preview");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/index.tsx
+/**
+* Batteries-included Trace with all official plugins pre-wired:
+* - preview (inline Monaco editor)
+* - copy-to-clipboard
+* - open-editor
+* - comments (with Send to OpenCode)
+*
+* For granular control, use the individual `@react-trace-enhancer/*` packages instead.
+*/
+function Trace({ editingDisabled = false, editor = "vscode", plugins = [], ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_trace_enhancer_core.Trace, {
+		...rest,
+		plugins: [
+			(0, _react_trace_enhancer_plugin_preview.PreviewPlugin)({ disabled: editingDisabled }),
+			(0, _react_trace_enhancer_plugin_copy_to_clipboard.CopyToClipboardPlugin)(),
+			(0, _react_trace_enhancer_plugin_open_editor.OpenEditorPlugin)({ editor }),
+			(0, _react_trace_enhancer_plugin_comments.CommentsPlugin)(),
+			...plugins
+		]
+	});
+}
+
+//#endregion
+module.exports = Trace;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["CoreTrace"],"sources":["../src/index.tsx"],"sourcesContent":["import { Trace as CoreTrace } from '@react-trace-enhancer/core'\nimport type { TraceProps } from '@react-trace-enhancer/core'\nimport { CommentsPlugin } from '@react-trace-enhancer/plugin-comments'\nimport { CopyToClipboardPlugin } from '@react-trace-enhancer/plugin-copy-to-clipboard'\nimport { OpenEditorPlugin } from '@react-trace-enhancer/plugin-open-editor'\nimport type { EditorPreset } from '@react-trace-enhancer/plugin-open-editor'\nimport { PreviewPlugin } from '@react-trace-enhancer/plugin-preview'\n\nexport interface TraceAllInOneProps extends TraceProps {\n  /**\n   * Disable inline file editing in the preview panel.\n   * Hides the Save button (⌘S) and the expand button.\n   * @default false\n   */\n  editingDisabled?: boolean\n  /**\n   * The editor to open files in via the \"Open in Editor\" action.\n   * @default 'vscode'\n   */\n  editor?: EditorPreset\n}\n\n/**\n * Batteries-included Trace with all official plugins pre-wired:\n * - preview (inline Monaco editor)\n * - copy-to-clipboard\n * - open-editor\n * - comments (with Send to OpenCode)\n *\n * For granular control, use the individual `@react-trace-enhancer/*` packages instead.\n */\nexport default function Trace({\n  editingDisabled = false,\n  editor = 'vscode',\n  plugins = [],\n  ...rest\n}: TraceAllInOneProps) {\n  return (\n    <CoreTrace\n      {...rest}\n      plugins={[\n        PreviewPlugin({ disabled: editingDisabled }),\n        CopyToClipboardPlugin(),\n        OpenEditorPlugin({ editor }),\n        CommentsPlugin(),\n        ...plugins,\n      ]}\n    />\n  )\n}\n\n// Re-export useful types for consumers\nexport type { EditorPreset }\n"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,SAAwB,MAAM,EAC5B,kBAAkB,OAClB,SAAS,UACT,UAAU,EAAE,EACZ,GAAG,QACkB;AACrB,QACE,2CAACA,kCAAD;EACE,GAAI;EACJ,SAAS;2DACO,EAAE,UAAU,iBAAiB,CAAC;8EACrB;kEACN,EAAE,QAAQ,CAAC;8DACZ;GAChB,GAAG;GACJ;EACD"}

package/dist/index.d.cts

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { TraceProps } from "@react-trace-enhancer/core";
+import { EditorPreset } from "@react-trace-enhancer/plugin-open-editor";
+
+//#region src/index.d.ts
+interface TraceAllInOneProps extends TraceProps {
+  /**
+   * Disable inline file editing in the preview panel.
+   * Hides the Save button (⌘S) and the expand button.
+   * @default false
+   */
+  editingDisabled?: boolean;
+  /**
+   * The editor to open files in via the "Open in Editor" action.
+   * @default 'vscode'
+   */
+  editor?: EditorPreset;
+}
+/**
+ * Batteries-included Trace with all official plugins pre-wired:
+ * - preview (inline Monaco editor)
+ * - copy-to-clipboard
+ * - open-editor
+ * - comments (with Send to OpenCode)
+ *
+ * For granular control, use the individual `@react-trace-enhancer/*` packages instead.
+ */
+declare function Trace({
+  editingDisabled,
+  editor,
+  plugins,
+  ...rest
+}: TraceAllInOneProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { type EditorPreset, TraceAllInOneProps, Trace as default };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/index.tsx"],"mappings":";;;;;UAQiB,kBAAA,SAA2B,UAAA;;;AAA5C;;;EAME,eAAA;EAN0C;;;;EAW1C,MAAA,GAAS,YAAA;AAAA;AACV;;;;;;;;;AAAA,iBAWuB,KAAA,CAAA;EACtB,eAAA;EACA,MAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+import { TraceProps } from "@react-trace-enhancer/core";
+import { EditorPreset } from "@react-trace-enhancer/plugin-open-editor";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/index.d.ts
+interface TraceAllInOneProps extends TraceProps {
+  /**
+   * Disable inline file editing in the preview panel.
+   * Hides the Save button (⌘S) and the expand button.
+   * @default false
+   */
+  editingDisabled?: boolean;
+  /**
+   * The editor to open files in via the "Open in Editor" action.
+   * @default 'vscode'
+   */
+  editor?: EditorPreset;
+}
+/**
+ * Batteries-included Trace with all official plugins pre-wired:
+ * - preview (inline Monaco editor)
+ * - copy-to-clipboard
+ * - open-editor
+ * - comments (with Send to OpenCode)
+ *
+ * For granular control, use the individual `@react-trace-enhancer/*` packages instead.
+ */
+declare function Trace({
+  editingDisabled,
+  editor,
+  plugins,
+  ...rest
+}: TraceAllInOneProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { type EditorPreset, TraceAllInOneProps, Trace as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/index.tsx"],"mappings":";;;;;UAQiB,kBAAA,SAA2B,UAAA;;;AAA5C;;;EAME,eAAA;EAN0C;;;;EAW1C,MAAA,GAAS,YAAA;AAAA;AACV;;;;;;;;;AAAA,iBAWuB,KAAA,CAAA;EACtB,eAAA;EACA,MAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/index.js

@@ -0,0 +1,33 @@
+import { Trace as Trace$1 } from "@react-trace-enhancer/core";
+import { CommentsPlugin } from "@react-trace-enhancer/plugin-comments";
+import { CopyToClipboardPlugin } from "@react-trace-enhancer/plugin-copy-to-clipboard";
+import { OpenEditorPlugin } from "@react-trace-enhancer/plugin-open-editor";
+import { PreviewPlugin } from "@react-trace-enhancer/plugin-preview";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/index.tsx
+/**
+* Batteries-included Trace with all official plugins pre-wired:
+* - preview (inline Monaco editor)
+* - copy-to-clipboard
+* - open-editor
+* - comments (with Send to OpenCode)
+*
+* For granular control, use the individual `@react-trace-enhancer/*` packages instead.
+*/
+function Trace({ editingDisabled = false, editor = "vscode", plugins = [], ...rest }) {
+	return /* @__PURE__ */ jsx(Trace$1, {
+		...rest,
+		plugins: [
+			PreviewPlugin({ disabled: editingDisabled }),
+			CopyToClipboardPlugin(),
+			OpenEditorPlugin({ editor }),
+			CommentsPlugin(),
+			...plugins
+		]
+	});
+}
+
+//#endregion
+export { Trace as default };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["CoreTrace"],"sources":["../src/index.tsx"],"sourcesContent":["import { Trace as CoreTrace } from '@react-trace-enhancer/core'\nimport type { TraceProps } from '@react-trace-enhancer/core'\nimport { CommentsPlugin } from '@react-trace-enhancer/plugin-comments'\nimport { CopyToClipboardPlugin } from '@react-trace-enhancer/plugin-copy-to-clipboard'\nimport { OpenEditorPlugin } from '@react-trace-enhancer/plugin-open-editor'\nimport type { EditorPreset } from '@react-trace-enhancer/plugin-open-editor'\nimport { PreviewPlugin } from '@react-trace-enhancer/plugin-preview'\n\nexport interface TraceAllInOneProps extends TraceProps {\n  /**\n   * Disable inline file editing in the preview panel.\n   * Hides the Save button (⌘S) and the expand button.\n   * @default false\n   */\n  editingDisabled?: boolean\n  /**\n   * The editor to open files in via the \"Open in Editor\" action.\n   * @default 'vscode'\n   */\n  editor?: EditorPreset\n}\n\n/**\n * Batteries-included Trace with all official plugins pre-wired:\n * - preview (inline Monaco editor)\n * - copy-to-clipboard\n * - open-editor\n * - comments (with Send to OpenCode)\n *\n * For granular control, use the individual `@react-trace-enhancer/*` packages instead.\n */\nexport default function Trace({\n  editingDisabled = false,\n  editor = 'vscode',\n  plugins = [],\n  ...rest\n}: TraceAllInOneProps) {\n  return (\n    <CoreTrace\n      {...rest}\n      plugins={[\n        PreviewPlugin({ disabled: editingDisabled }),\n        CopyToClipboardPlugin(),\n        OpenEditorPlugin({ editor }),\n        CommentsPlugin(),\n        ...plugins,\n      ]}\n    />\n  )\n}\n\n// Re-export useful types for consumers\nexport type { EditorPreset }\n"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,SAAwB,MAAM,EAC5B,kBAAkB,OAClB,SAAS,UACT,UAAU,EAAE,EACZ,GAAG,QACkB;AACrB,QACE,oBAACA,SAAD;EACE,GAAI;EACJ,SAAS;GACP,cAAc,EAAE,UAAU,iBAAiB,CAAC;GAC5C,uBAAuB;GACvB,iBAAiB,EAAE,QAAQ,CAAC;GAC5B,gBAAgB;GAChB,GAAG;GACJ;EACD"}

package/dist/index.prod.cjs

@@ -0,0 +1,11 @@
+
+//#region src/index.prod.ts
+/**
+* Production stub — Trace renders nothing in production builds.
+* Zero runtime cost, zero bundle size impact.
+*/
+const Trace = () => null;
+
+//#endregion
+module.exports = Trace;
+//# sourceMappingURL=index.prod.cjs.map

package/dist/index.prod.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.prod.cjs","names":[],"sources":["../src/index.prod.ts"],"sourcesContent":["/**\n * Production stub — Trace renders nothing in production builds.\n * Zero runtime cost, zero bundle size impact.\n */\nconst Trace = () => null\nexport default Trace\n\nexport type { TraceAllInOneProps, EditorPreset } from './index'\n"],"mappings":";;;;;;AAIA,MAAM,cAAc"}

package/dist/index.prod.d.cts

@@ -0,0 +1,11 @@
+import { EditorPreset, TraceAllInOneProps } from "./index.cjs";
+
+//#region src/index.prod.d.ts
+/**
+ * Production stub — Trace renders nothing in production builds.
+ * Zero runtime cost, zero bundle size impact.
+ */
+declare const Trace: () => null;
+//#endregion
+export { type EditorPreset, type TraceAllInOneProps, Trace as default };
+//# sourceMappingURL=index.prod.d.cts.map

package/dist/index.prod.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.prod.d.cts","names":[],"sources":["../src/index.prod.ts"],"mappings":";;;;;;;cAIM,KAAA"}

package/dist/index.prod.d.ts

@@ -0,0 +1,11 @@
+import { EditorPreset, TraceAllInOneProps } from "./index.js";
+
+//#region src/index.prod.d.ts
+/**
+ * Production stub — Trace renders nothing in production builds.
+ * Zero runtime cost, zero bundle size impact.
+ */
+declare const Trace: () => null;
+//#endregion
+export { type EditorPreset, type TraceAllInOneProps, Trace as default };
+//# sourceMappingURL=index.prod.d.ts.map

package/dist/index.prod.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.prod.d.ts","names":[],"sources":["../src/index.prod.ts"],"mappings":";;;;;;;cAIM,KAAA"}

package/dist/index.prod.js

@@ -0,0 +1,10 @@
+//#region src/index.prod.ts
+/**
+* Production stub — Trace renders nothing in production builds.
+* Zero runtime cost, zero bundle size impact.
+*/
+const Trace = () => null;
+
+//#endregion
+export { Trace as default };
+//# sourceMappingURL=index.prod.js.map

package/dist/index.prod.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.prod.js","names":[],"sources":["../src/index.prod.ts"],"sourcesContent":["/**\n * Production stub — Trace renders nothing in production builds.\n * Zero runtime cost, zero bundle size impact.\n */\nconst Trace = () => null\nexport default Trace\n\nexport type { TraceAllInOneProps, EditorPreset } from './index'\n"],"mappings":";;;;;AAIA,MAAM,cAAc"}

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@react-trace-enhancer/kit",
+  "version": "0.0.1",
+  "description": "Batteries-included React visual inspector — all official plugins pre-wired.",
+  "keywords": [
+    "react-find",
+    "react-find-source",
+    "react-grab",
+    "react-inspect",
+    "react-inspector",
+    "react-trace"
+  ],
+  "license": "MIT",
+  "author": "Vitor Buzinaro",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/buzinas/react-trace",
+    "directory": "packages/react-trace"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "development": {
+        "import": {
+          "types": "./dist/index.d.ts",
+          "default": "./dist/index.js"
+        },
+        "require": {
+          "types": "./dist/index.d.cts",
+          "default": "./dist/index.cjs"
+        }
+      },
+      "production": {
+        "import": {
+          "types": "./dist/index.d.ts",
+          "default": "./dist/index.prod.js"
+        },
+        "require": {
+          "types": "./dist/index.d.cts",
+          "default": "./dist/index.prod.cjs"
+        }
+      },
+      "default": {
+        "import": {
+          "types": "./dist/index.d.ts",
+          "default": "./dist/index.js"
+        },
+        "require": {
+          "types": "./dist/index.d.cts",
+          "default": "./dist/index.cjs"
+        }
+      }
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch --no-clean",
+    "typecheck": "tsc --noEmit",
+    "lint": "oxlint src",
+    "prepublishOnly": "pnpm build"
+  },
+  "dependencies": {
+    "@react-trace-enhancer/core": "^0.0.1",
+    "@react-trace-enhancer/plugin-comments": "^0.0.1",
+    "@react-trace-enhancer/plugin-copy-to-clipboard": "^0.0.1",
+    "@react-trace-enhancer/plugin-open-editor": "^0.0.1",
+    "@react-trace-enhancer/plugin-preview": "^0.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "oxlint": "latest",
+    "react": "^19",
+    "react-dom": "^19",
+    "tsdown": "^0.21.0-beta.2",
+    "typescript": "^5"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  }
+}