@react-spot/kit 0.0.1

package/README.md

@@ -0,0 +1,123 @@
+# @react-spot/kit
+
+`@react-spot/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-spot/core` and preconfigures all official plugins.
+
+## Installation
+
+```bash
+pnpm add --dev @react-spot/kit
+```
+
+Peer requirements:
+
+- `react >= 18`
+- `react-dom >= 18`
+
+## When to use this package
+
+Use `@react-spot/kit` when you want the standard inspector setup with all official plugins already enabled.
+
+If you need granular control over plugin composition, use `@react-spot/core` with individual `@react-spot/plugin-*` packages instead.
+
+## Default export
+
+The package exports a default `Trace` component:
+
+```tsx
+import Trace from '@react-spot/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-spot/core` so bundled plugins can resolve files for preview, comments, copy-to-clipboard, and open-in-editor flows.
+
+## Bundled plugins
+
+`@react-spot/kit` currently wires these official plugins in this order:
+
+1. `@react-spot/plugin-preview` — adds the source preview panel with inline Monaco-based file preview and editing support.
+2. `@react-spot/plugin-copy-to-clipboard` — adds an action-panel item for copying the selected source location.
+3. `@react-spot/plugin-open-editor` — adds an action-panel item for opening the selected source in your editor.
+4. `@react-spot/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-spot/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-spot/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,21 @@
+let _react_spot_core = require("@react-spot/core");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/index.tsx
+/**
+* Batteries-included Trace wrapper.
+* Click any component to jump straight to its source in your editor.
+*
+* For granular control, use the individual `@react-spot/*` packages instead.
+*/
+function Trace({ editor = "vscode", plugins = [], ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_spot_core.Trace, {
+		...rest,
+		editor,
+		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-spot/core'\nimport type { EditorPreset, TraceProps } from '@react-spot/core'\n\nexport interface TraceAllInOneProps extends TraceProps {\n  /**\n   * The editor to open files in when clicking a component.\n   * @default 'vscode'\n   */\n  editor?: EditorPreset\n}\n\n/**\n * Batteries-included Trace wrapper.\n * Click any component to jump straight to its source in your editor.\n *\n * For granular control, use the individual `@react-spot/*` packages instead.\n */\nexport default function Trace({\n  editor = 'vscode',\n  plugins = [],\n  ...rest\n}: TraceAllInOneProps) {\n  return <CoreTrace {...rest} editor={editor} plugins={plugins} />\n}\n\nexport type { EditorPreset }\n"],"mappings":";;;;;;;;;;AAiBA,SAAwB,MAAM,EAC5B,SAAS,UACT,UAAU,EAAE,EACZ,GAAG,QACkB;AACrB,QAAO,2CAACA,wBAAD;EAAW,GAAI;EAAc;EAAiB;EAAW"}

package/dist/index.d.cts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { EditorPreset, TraceProps } from "@react-spot/core";
+
+//#region src/index.d.ts
+interface TraceAllInOneProps extends TraceProps {
+  /**
+   * The editor to open files in when clicking a component.
+   * @default 'vscode'
+   */
+  editor?: EditorPreset;
+}
+/**
+ * Batteries-included Trace wrapper.
+ * Click any component to jump straight to its source in your editor.
+ *
+ * For granular control, use the individual `@react-spot/*` packages instead.
+ */
+declare function Trace({
+  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":";;;;UAGiB,kBAAA,SAA2B,UAAA;;;AAA5C;;EAKE,MAAA,GAAS,YAAA;AAAA;;;;;;AACV;iBAQuB,KAAA,CAAA;EACtB,MAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+import { EditorPreset, TraceProps } from "@react-spot/core";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/index.d.ts
+interface TraceAllInOneProps extends TraceProps {
+  /**
+   * The editor to open files in when clicking a component.
+   * @default 'vscode'
+   */
+  editor?: EditorPreset;
+}
+/**
+ * Batteries-included Trace wrapper.
+ * Click any component to jump straight to its source in your editor.
+ *
+ * For granular control, use the individual `@react-spot/*` packages instead.
+ */
+declare function Trace({
+  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":";;;;UAGiB,kBAAA,SAA2B,UAAA;;;AAA5C;;EAKE,MAAA,GAAS,YAAA;AAAA;;;;;;AACV;iBAQuB,KAAA,CAAA;EACtB,MAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/index.js

@@ -0,0 +1,21 @@
+import { Trace as Trace$1 } from "@react-spot/core";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/index.tsx
+/**
+* Batteries-included Trace wrapper.
+* Click any component to jump straight to its source in your editor.
+*
+* For granular control, use the individual `@react-spot/*` packages instead.
+*/
+function Trace({ editor = "vscode", plugins = [], ...rest }) {
+	return /* @__PURE__ */ jsx(Trace$1, {
+		...rest,
+		editor,
+		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-spot/core'\nimport type { EditorPreset, TraceProps } from '@react-spot/core'\n\nexport interface TraceAllInOneProps extends TraceProps {\n  /**\n   * The editor to open files in when clicking a component.\n   * @default 'vscode'\n   */\n  editor?: EditorPreset\n}\n\n/**\n * Batteries-included Trace wrapper.\n * Click any component to jump straight to its source in your editor.\n *\n * For granular control, use the individual `@react-spot/*` packages instead.\n */\nexport default function Trace({\n  editor = 'vscode',\n  plugins = [],\n  ...rest\n}: TraceAllInOneProps) {\n  return <CoreTrace {...rest} editor={editor} plugins={plugins} />\n}\n\nexport type { EditorPreset }\n"],"mappings":";;;;;;;;;;AAiBA,SAAwB,MAAM,EAC5B,SAAS,UACT,UAAU,EAAE,EACZ,GAAG,QACkB;AACrB,QAAO,oBAACA,SAAD;EAAW,GAAI;EAAc;EAAiB;EAAW"}

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-spot/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-spot/core": "^0.0.1",
+    "@react-spot/plugin-comments": "^0.0.1",
+    "@react-spot/plugin-copy-to-clipboard": "^0.0.1",
+    "@react-spot/plugin-open-editor": "^0.0.1",
+    "@react-spot/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"
+  }
+}