@react-spot/plugin-preview 0.0.1

package/README.md

@@ -0,0 +1,79 @@
+# @react-spot/plugin-preview
+
+Monaco-based source preview plugin for `@react-spot/core`.
+
+This package adds a toolbar control for connecting the current project folder and an action-panel preview for the selected source file.
+
+## Installation
+
+```bash
+pnpm add --dev @react-spot/core @react-spot/ui-components @react-spot/plugin-preview
+```
+
+If you are already using `@react-spot/kit`, this plugin is included there by default.
+
+## Usage
+
+```tsx
+import { Trace } from '@react-spot/core'
+import { PreviewPlugin } from '@react-spot/plugin-preview'
+
+import App from './App'
+
+export function AppWithTrace() {
+  return (
+    <>
+      <App />
+      <Trace
+        root={import.meta.env.VITE_ROOT}
+        plugins={[PreviewPlugin({ theme: 'one-dark-pro' })]}
+      />
+    </>
+  )
+}
+```
+
+`root` should be the absolute project root passed to Trace so the plugin can resolve relative file paths for comments.
+
+## What it adds
+
+- A toolbar button for project-folder access.
+- An action-panel source preview for the currently selected component source.
+- An inline Monaco editor with syntax highlighting.
+- Optional save and expand controls when editing is enabled.
+- A plugin settings UI for preview theme and editing mode.
+
+## Folder access expectations
+
+The preview plugin reads files from the project through Trace's file-system service, so users must grant folder access before the preview can load file contents.
+
+- Pass the absolute project root to `<Trace root="..." />`.
+- When prompted, select the same project folder that contains the source files Trace resolves.
+- If a root path is available, the plugin copies that path to the clipboard to make the folder picker easier to use.
+- Until access is granted, the toolbar button and action panel show the access flow instead of a live file preview.
+- When editing is enabled, saves are written back through the same file-system access.
+
+If you only want inspection without file writes, start the plugin in read-only mode with `disabled: true`.
+
+## Options
+
+`PreviewPlugin(options?: PreviewPluginOptions)`
+
+```ts
+interface PreviewPluginOptions {
+  disabled?: boolean
+  theme?: BundledTheme
+}
+```
+
+- `disabled` — defaults to `false`. Starts the preview in read-only mode and removes editing controls.
+- `theme` — defaults to `'one-dark-pro'`. Accepts any bundled Shiki theme id.
+
+## Settings
+
+The plugin also contributes a settings panel inside Trace where users can:
+
+- toggle code editing on or off
+- switch the preview theme
+
+These controls let users adjust preview behavior without changing the plugin registration code.

package/dist/index.cjs

@@ -0,0 +1,420 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+let _react_spot_core = require("@react-spot/core");
+let _react_spot_ui_components = require("@react-spot/ui-components");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let jotai = require("jotai");
+let shiki = require("shiki");
+
+//#region src/FolderAccessPrompt.tsx
+function FolderAccessPrompt({ root, onGrant, onCancel }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: 12,
+			padding: "20px 16px",
+			height: "100%",
+			boxSizing: "border-box",
+			textAlign: "center",
+			fontFamily: "system-ui, sans-serif"
+		},
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: { color: "#52525b" },
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_spot_ui_components.FolderIcon, {})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: 12
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: {
+							fontSize: 13,
+							fontWeight: 600,
+							color: "#fafafa"
+						},
+						children: "Folder access needed"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: {
+							fontSize: 12,
+							color: "#71717a",
+							lineHeight: 1.5
+						},
+						children: root ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								gap: 8
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "The project root path will be copied to your clipboard. Navigate to it in the folder picker." }), _react_spot_core.IS_MAC && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_react_spot_ui_components.KbdGroup, { children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_spot_ui_components.Kbd, { children: "⌘" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_spot_ui_components.Kbd, { children: "⇧" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_spot_ui_components.Kbd, { children: "G" })
+							] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: " to paste the path directly." })] })]
+						}) : "Grant access to your project folder to preview source files."
+					}),
+					root && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						style: {
+							fontSize: 11,
+							fontFamily: "ui-monospace, monospace",
+							color: "#3b82f6",
+							wordBreak: "break-all"
+						},
+						children: root
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					display: "flex",
+					gap: 8
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_spot_ui_components.Button, {
+					variant: "secondary",
+					onClick: onCancel,
+					children: "Cancel"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_spot_ui_components.Button, {
+					variant: "primary",
+					onClick: onGrant,
+					children: "Grant access"
+				})]
+			})
+		]
+	});
+}
+/**
+* Copies the root path to clipboard then calls requestAccess().
+*/
+async function handleGrantAccess(root, requestAccess) {
+	await navigator.clipboard.writeText(root).catch(() => {});
+	return requestAccess();
+}
+
+//#endregion
+//#region src/fs.ts
+const IDB_NAME = "react-trace";
+const IDB_STORE = "handles";
+const IDB_KEY = "root-directory";
+function openDB() {
+	return new Promise((resolve, reject) => {
+		const req = indexedDB.open(IDB_NAME, 1);
+		req.onupgradeneeded = () => req.result.createObjectStore(IDB_STORE);
+		req.onsuccess = () => resolve(req.result);
+		req.onerror = () => reject(req.error);
+	});
+}
+async function saveHandle(handle) {
+	const db = await openDB();
+	return new Promise((resolve, reject) => {
+		const tx = db.transaction(IDB_STORE, "readwrite");
+		tx.objectStore(IDB_STORE).put(handle, IDB_KEY);
+		tx.oncomplete = () => resolve();
+		tx.onerror = () => reject(tx.error);
+	});
+}
+async function loadHandle() {
+	try {
+		const db = await openDB();
+		return new Promise((resolve, reject) => {
+			const req = db.transaction(IDB_STORE, "readonly").objectStore(IDB_STORE).get(IDB_KEY);
+			req.onsuccess = () => resolve(req.result ?? null);
+			req.onerror = () => reject(req.error);
+		});
+	} catch {
+		return null;
+	}
+}
+/**
+* Traverses the directory handle tree to reach the target file.
+* Returns null if any segment of the path doesn't exist.
+*/
+async function getFileHandle(dir, relativePath, create = false) {
+	const parts = relativePath.split("/").filter(Boolean);
+	if (parts.length === 0) return null;
+	let current = dir;
+	for (let i = 0; i < parts.length - 1; i++) try {
+		current = await current.getDirectoryHandle(parts[i], { create });
+	} catch {
+		return null;
+	}
+	try {
+		return await current.getFileHandle(parts.at(-1), { create });
+	} catch {
+		return null;
+	}
+}
+var FileSystemServiceImpl = class {
+	_handle = null;
+	_listeners = /* @__PURE__ */ new Set();
+	get isSupported() {
+		return typeof window !== "undefined" && "showDirectoryPicker" in window;
+	}
+	get hasAccess() {
+		return this._handle !== null;
+	}
+	subscribe(listener) {
+		this._listeners.add(listener);
+		return () => this._listeners.delete(listener);
+	}
+	notify() {
+		this._listeners.forEach((l) => l());
+	}
+	async tryRestore() {
+		if (!this.isSupported) return false;
+		try {
+			const handle = await loadHandle();
+			if (!handle) return false;
+			if (await handle.requestPermission({ mode: "readwrite" }) === "granted") {
+				this._handle = handle;
+				this.notify();
+				return true;
+			}
+		} catch {}
+		return false;
+	}
+	async requestAccess() {
+		if (!this.isSupported) return false;
+		try {
+			const handle = await window.showDirectoryPicker({ mode: "readwrite" });
+			await saveHandle(handle);
+			this._handle = handle;
+			this.notify();
+			return true;
+		} catch {
+			return false;
+		}
+	}
+	/** Ensure we have access — try restore silently first, then prompt. */
+	async ensureAccess() {
+		if (this._handle) return true;
+		if (await this.tryRestore()) return true;
+		return this.requestAccess();
+	}
+	async read(relativePath) {
+		if (!await this.ensureAccess() || !this._handle) throw new Error("[react-trace] File system access denied");
+		const file = await getFileHandle(this._handle, relativePath);
+		if (!file) throw new Error(`[react-trace] File not found: ${relativePath}`);
+		return (await file.getFile()).text();
+	}
+	async write(relativePath, content) {
+		if (!await this.ensureAccess() || !this._handle) throw new Error("[react-trace] File system access denied");
+		const file = await getFileHandle(this._handle, relativePath, true);
+		if (!file) throw new Error(`[react-trace] Cannot open file for writing: ${relativePath}`);
+		const writable = await file.createWritable();
+		await writable.write(content);
+		await writable.close();
+	}
+};
+const fileSystemService = new FileSystemServiceImpl();
+
+//#endregion
+//#region src/store.ts
+const previewSettingsAtom = (0, _react_spot_core.settingsPluginAtom)("preview");
+
+//#endregion
+//#region src/PreviewSettings.tsx
+const themes = shiki.bundledThemesInfo.map((theme) => ({
+	value: theme.id,
+	label: theme.displayName
+}));
+const themesLookup = themes.reduce((acc, theme) => {
+	acc[theme.value] = theme;
+	return acc;
+}, {});
+const LABEL_STYLE = {
+	fontSize: 12,
+	color: "#d4d4d8",
+	fontFamily: "system-ui, sans-serif"
+};
+function PreviewSettings() {
+	const portalContainer = (0, _react_spot_core.useWidgetPortalContainer)();
+	const [themesOpen, setThemesOpen] = (0, react.useState)(false);
+	const [previewSettings = {
+		disabled: false,
+		theme: "one-dark-pro"
+	}, setPreviewSettings] = (0, jotai.useAtom)(previewSettingsAtom);
+	const anchorRef = (0, react.useRef)(null);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 12
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 6
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				style: LABEL_STYLE,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						type: "checkbox",
+						checked: previewSettings.disabled ?? false,
+						onChange: (e) => setPreviewSettings({
+							...previewSettings,
+							disabled: e.target.checked
+						})
+					}),
+					" ",
+					"Code editing disabled"
+				]
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 6
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				style: LABEL_STYLE,
+				children: "Theme"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_react_spot_ui_components.Combobox.Root, {
+				value: themesLookup[previewSettings.theme],
+				onValueChange: (theme) => {
+					if (theme) setPreviewSettings({
+						...previewSettings,
+						theme: theme.value
+					});
+				},
+				items: themes,
+				open: themesOpen,
+				onOpenChange: setThemesOpen,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					ref: anchorRef,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_spot_ui_components.Combobox.Trigger, {
+						onClick: (e) => e.stopPropagation(),
+						onKeyDown: (e) => e.stopPropagation(),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_spot_ui_components.Combobox.Input, {})
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_spot_ui_components.Combobox.Portal, {
+					container: portalContainer,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_spot_ui_components.Combobox.Positioner, {
+						style: {
+							zIndex: 1e8,
+							pointerEvents: "auto"
+						},
+						anchor: anchorRef,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_react_spot_ui_components.Combobox.Popup, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_spot_ui_components.Combobox.Empty, { children: "No themes found" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_spot_ui_components.Combobox.List, {
+							style: {
+								overscrollBehavior: "contain",
+								maxHeight: 500,
+								overflowY: "auto"
+							},
+							children: (option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_spot_ui_components.Combobox.Item, {
+								value: option,
+								onClick: (e) => e.stopPropagation(),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: option.label })
+							}, option.value)
+						})] })
+					})
+				})]
+			})]
+		})]
+	});
+}
+
+//#endregion
+//#region src/index.tsx
+function FolderToolbarIcon({ hasAccess }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		style: {
+			position: "relative",
+			display: "inline-flex"
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_spot_ui_components.FolderIcon, {}), hasAccess && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: {
+			position: "absolute",
+			top: -4,
+			right: -4,
+			width: 6,
+			height: 6,
+			borderRadius: "50%",
+			background: "#22c55e",
+			border: "1.5px solid #18181b",
+			pointerEvents: "none"
+		} })]
+	});
+}
+function PreviewToolbar() {
+	const projectRoot = (0, _react_spot_core.useProjectRoot)();
+	const portalContainer = (0, _react_spot_core.useWidgetPortalContainer)();
+	const deactivateInspector = (0, _react_spot_core.useDeactivateInspector)();
+	const buttonRef = (0, react.useRef)(null);
+	const [isPromptOpen, setIsPromptOpen] = (0, react.useState)(false);
+	const hasAccess = (0, react.useSyncExternalStore)(fileSystemService.subscribe.bind(fileSystemService), () => fileSystemService.hasAccess, () => false);
+	(0, react.useEffect)(() => {
+		fileSystemService.tryRestore().catch(() => {});
+	}, []);
+	const handleClick = () => {
+		deactivateInspector();
+		if (fileSystemService.hasAccess) {
+			fileSystemService.requestAccess().catch(() => {});
+			return;
+		}
+		setIsPromptOpen(true);
+	};
+	const handleGrant = async () => {
+		if (await handleGrantAccess(projectRoot, () => fileSystemService.requestAccess())) setIsPromptOpen(false);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_spot_ui_components.Tooltip, {
+		label: hasAccess ? "Project folder connected" : "Select project folder",
+		container: portalContainer,
+		render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_spot_ui_components.ToolbarButton, { ref: buttonRef }),
+		"aria-label": "Project folder",
+		style: { color: hasAccess ? "#22c55e" : "#52525b" },
+		onClick: handleClick,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FolderToolbarIcon, { hasAccess })
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_spot_ui_components.Popover.Root, {
+		open: isPromptOpen,
+		onOpenChange: (open) => {
+			if (!open) setIsPromptOpen(false);
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_spot_ui_components.Popover.Portal, {
+			container: portalContainer,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_spot_ui_components.Popover.Positioner, {
+				anchor: buttonRef.current,
+				side: "top",
+				align: "end",
+				sideOffset: 8,
+				collisionPadding: 8,
+				positionMethod: "fixed",
+				style: {
+					zIndex: 9999999,
+					pointerEvents: "auto"
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_spot_ui_components.Popover.Popup, {
+					style: {
+						width: 280,
+						overflow: "hidden"
+					},
+					onClick: (event) => event.stopPropagation(),
+					onKeyDown: (event) => event.stopPropagation(),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FolderAccessPrompt, {
+						root: projectRoot,
+						onGrant: handleGrant,
+						onCancel: () => setIsPromptOpen(false)
+					})
+				})
+			})
+		})
+	})] });
+}
+function PreviewPlugin(_options = {}) {
+	return {
+		name: "preview",
+		toolbar: PreviewToolbar,
+		settings: PreviewSettings
+	};
+}
+
+//#endregion
+exports.PreviewPlugin = PreviewPlugin;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["FolderIcon","IS_MAC","KbdGroup","Kbd","Button","bundledThemesInfo","Combobox","FolderIcon","Tooltip","ToolbarButton","Popover"],"sources":["../src/FolderAccessPrompt.tsx","../src/fs.ts","../src/store.ts","../src/PreviewSettings.tsx","../src/index.tsx"],"sourcesContent":["import { IS_MAC } from '@react-spot/core'\nimport {\n  Button,\n  FolderIcon,\n  Kbd,\n  KbdGroup,\n} from '@react-spot/ui-components'\n\nexport function FolderAccessPrompt({\n  root,\n  onGrant,\n  onCancel,\n}: {\n  root: string | undefined\n  onGrant(): void\n  onCancel(): void\n}) {\n  return (\n    <div\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        gap: 12,\n        padding: '20px 16px',\n        height: '100%',\n        boxSizing: 'border-box',\n        textAlign: 'center',\n        fontFamily: 'system-ui, sans-serif',\n      }}\n    >\n      <span style={{ color: '#52525b' }}>\n        <FolderIcon />\n      </span>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>\n        <span style={{ fontSize: 13, fontWeight: 600, color: '#fafafa' }}>\n          Folder access needed\n        </span>\n        <span style={{ fontSize: 12, color: '#71717a', lineHeight: 1.5 }}>\n          {root ? (\n            <span style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>\n              <span>\n                The project root path will be copied to your clipboard. Navigate\n                to it in the folder picker.\n              </span>\n              {IS_MAC && (\n                <span>\n                  <KbdGroup>\n                    <Kbd>⌘</Kbd>\n                    <Kbd>⇧</Kbd>\n                    <Kbd>G</Kbd>\n                  </KbdGroup>\n                  <span> to paste the path directly.</span>\n                </span>\n              )}\n            </span>\n          ) : (\n            'Grant access to your project folder to preview source files.'\n          )}\n        </span>\n        {root && (\n          <span\n            style={{\n              fontSize: 11,\n              fontFamily: 'ui-monospace, monospace',\n              color: '#3b82f6',\n              wordBreak: 'break-all',\n            }}\n          >\n            {root}\n          </span>\n        )}\n      </div>\n      <div style={{ display: 'flex', gap: 8 }}>\n        <Button variant=\"secondary\" onClick={onCancel}>\n          Cancel\n        </Button>\n        <Button variant=\"primary\" onClick={onGrant}>\n          Grant access\n        </Button>\n      </div>\n    </div>\n  )\n}\n\n/**\n * Copies the root path to clipboard then calls requestAccess().\n */\nexport async function handleGrantAccess(\n  root: string,\n  requestAccess: () => Promise<boolean>,\n): Promise<boolean> {\n  await navigator.clipboard.writeText(root).catch(() => {})\n  return requestAccess()\n}\n","export interface FileSystemService {\n  /** Whether the File System Access API is available in this browser */\n  isSupported: boolean\n  /** Whether the user has already granted directory access */\n  hasAccess: boolean\n  /**\n   * Silently try to restore a previously granted directory handle from\n   * IndexedDB and re-request permission. Resolves true if successful.\n   * Call this on app mount to avoid prompting on every reload.\n   */\n  tryRestore(): Promise<boolean>\n  /**\n   * Prompt the user to pick the project root directory via showDirectoryPicker().\n   * The handle is persisted in IndexedDB for future sessions.\n   */\n  requestAccess(): Promise<boolean>\n  /**\n   * Subscribe to hasAccess changes (e.g. after requestAccess / tryRestore).\n   * Returns an unsubscribe function.\n   */\n  subscribe(listener: () => void): () => void\n  /**\n   * Read a file by its relative path (relative to the granted directory).\n   * If no access has been granted yet, triggers requestAccess() first.\n   */\n  read(relativePath: string): Promise<string>\n  /**\n   * Write content to a file by its relative path. Triggers requestAccess() if needed.\n   * Written files trigger HMR automatically in the dev server.\n   */\n  write(relativePath: string, content: string): Promise<void>\n}\n\nconst IDB_NAME = 'react-trace'\nconst IDB_STORE = 'handles'\nconst IDB_KEY = 'root-directory'\n\nfunction openDB(): Promise<IDBDatabase> {\n  return new Promise((resolve, reject) => {\n    const req = indexedDB.open(IDB_NAME, 1)\n    req.onupgradeneeded = () => req.result.createObjectStore(IDB_STORE)\n    req.onsuccess = () => resolve(req.result)\n    req.onerror = () => reject(req.error)\n  })\n}\n\nasync function saveHandle(handle: FileSystemDirectoryHandle): Promise<void> {\n  const db = await openDB()\n  return new Promise((resolve, reject) => {\n    const tx = db.transaction(IDB_STORE, 'readwrite')\n    tx.objectStore(IDB_STORE).put(handle, IDB_KEY)\n    tx.oncomplete = () => resolve()\n    tx.onerror = () => reject(tx.error)\n  })\n}\n\nasync function loadHandle(): Promise<FileSystemDirectoryHandle | null> {\n  try {\n    const db = await openDB()\n    return new Promise((resolve, reject) => {\n      const tx = db.transaction(IDB_STORE, 'readonly')\n      const req = tx.objectStore(IDB_STORE).get(IDB_KEY)\n      req.onsuccess = () =>\n        resolve((req.result as FileSystemDirectoryHandle) ?? null)\n      req.onerror = () => reject(req.error)\n    })\n  } catch {\n    return null\n  }\n}\n\n/**\n * Traverses the directory handle tree to reach the target file.\n * Returns null if any segment of the path doesn't exist.\n */\nasync function getFileHandle(\n  dir: FileSystemDirectoryHandle,\n  relativePath: string,\n  create = false,\n): Promise<FileSystemFileHandle | null> {\n  const parts = relativePath.split('/').filter(Boolean)\n  if (parts.length === 0) return null\n\n  let current: FileSystemDirectoryHandle = dir\n\n  for (let i = 0; i < parts.length - 1; i++) {\n    try {\n      current = await current.getDirectoryHandle(parts[i]!, { create })\n    } catch {\n      return null\n    }\n  }\n\n  try {\n    return await current.getFileHandle(parts.at(-1)!, { create })\n  } catch {\n    return null\n  }\n}\n\nclass FileSystemServiceImpl implements FileSystemService {\n  private _handle: FileSystemDirectoryHandle | null = null\n  private _listeners = new Set<() => void>()\n\n  get isSupported(): boolean {\n    return typeof window !== 'undefined' && 'showDirectoryPicker' in window\n  }\n\n  get hasAccess(): boolean {\n    return this._handle !== null\n  }\n\n  subscribe(listener: () => void): () => void {\n    this._listeners.add(listener)\n    return () => this._listeners.delete(listener)\n  }\n\n  private notify(): void {\n    this._listeners.forEach((l) => l())\n  }\n\n  async tryRestore(): Promise<boolean> {\n    if (!this.isSupported) return false\n    try {\n      const handle = await loadHandle()\n      if (!handle) return false\n      const perm = await handle.requestPermission({ mode: 'readwrite' })\n      if (perm === 'granted') {\n        this._handle = handle\n        this.notify()\n        return true\n      }\n    } catch {\n      // handle gone or permission denied — fall through\n    }\n    return false\n  }\n\n  async requestAccess(): Promise<boolean> {\n    if (!this.isSupported) return false\n    try {\n      const handle = await window.showDirectoryPicker({ mode: 'readwrite' })\n      await saveHandle(handle)\n      this._handle = handle\n      this.notify()\n      return true\n    } catch {\n      // User cancelled the picker\n      return false\n    }\n  }\n\n  /** Ensure we have access — try restore silently first, then prompt. */\n  private async ensureAccess(): Promise<boolean> {\n    if (this._handle) return true\n    const restored = await this.tryRestore()\n    if (restored) return true\n    return this.requestAccess()\n  }\n\n  async read(relativePath: string): Promise<string> {\n    const ok = await this.ensureAccess()\n    if (!ok || !this._handle)\n      throw new Error('[react-trace] File system access denied')\n\n    const file = await getFileHandle(this._handle, relativePath)\n    if (!file) throw new Error(`[react-trace] File not found: ${relativePath}`)\n\n    return (await file.getFile()).text()\n  }\n\n  async write(relativePath: string, content: string): Promise<void> {\n    const ok = await this.ensureAccess()\n    if (!ok || !this._handle)\n      throw new Error('[react-trace] File system access denied')\n\n    const file = await getFileHandle(this._handle, relativePath, true)\n    if (!file)\n      throw new Error(\n        `[react-trace] Cannot open file for writing: ${relativePath}`,\n      )\n\n    const writable = await file.createWritable()\n    await writable.write(content)\n    await writable.close()\n  }\n}\n\nexport const fileSystemService: FileSystemService = new FileSystemServiceImpl()\n","import type { TraceSettings } from '@react-spot/core'\nimport { settingsPluginAtom } from '@react-spot/core'\nimport type { WritableAtom } from 'jotai'\nimport type { BundledTheme } from 'shiki'\n\ndeclare module '@react-spot/core' {\n  interface TraceSettings {\n    preview?: {\n      disabled: boolean\n      theme: BundledTheme\n    }\n  }\n}\n\nexport const previewSettingsAtom = settingsPluginAtom(\n  'preview',\n) as WritableAtom<TraceSettings['preview'], [TraceSettings['preview']], void>\n","import { useWidgetPortalContainer } from '@react-spot/core'\nimport { Combobox } from '@react-spot/ui-components'\nimport { useAtom } from 'jotai'\nimport type { CSSProperties } from 'react'\nimport { useRef, useState } from 'react'\nimport type { BundledTheme } from 'shiki'\nimport { bundledThemesInfo } from 'shiki'\n\nimport { previewSettingsAtom } from './store'\n\nconst themes = bundledThemesInfo.map((theme) => ({\n  value: theme.id as BundledTheme,\n  label: theme.displayName,\n}))\n\nconst themesLookup = themes.reduce<\n  Record<(typeof themes)[number]['value'], (typeof themes)[number]>\n>(\n  (acc, theme) => {\n    acc[theme.value] = theme\n    return acc\n  },\n  {} as Record<(typeof themes)[number]['value'], (typeof themes)[number]>,\n)\n\nconst LABEL_STYLE: CSSProperties = {\n  fontSize: 12,\n  color: '#d4d4d8',\n  fontFamily: 'system-ui, sans-serif',\n}\n\nexport function PreviewSettings() {\n  const portalContainer = useWidgetPortalContainer()\n  const [themesOpen, setThemesOpen] = useState(false)\n\n  const [\n    previewSettings = { disabled: false, theme: 'one-dark-pro' },\n    setPreviewSettings,\n  ] = useAtom(previewSettingsAtom)\n\n  const anchorRef = useRef<HTMLDivElement>(null)\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>\n        <label style={LABEL_STYLE}>\n          <input\n            type=\"checkbox\"\n            checked={previewSettings.disabled ?? false}\n            onChange={(e) =>\n              setPreviewSettings({\n                ...previewSettings,\n                disabled: e.target.checked,\n              })\n            }\n          />{' '}\n          Code editing disabled\n        </label>\n      </div>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>\n        <label style={LABEL_STYLE}>Theme</label>\n        <Combobox.Root\n          value={themesLookup[previewSettings.theme]}\n          onValueChange={(theme) => {\n            if (theme) {\n              setPreviewSettings({ ...previewSettings, theme: theme.value })\n            }\n          }}\n          items={themes}\n          open={themesOpen}\n          onOpenChange={setThemesOpen}\n        >\n          <div ref={anchorRef}>\n            <Combobox.Trigger\n              onClick={(e) => e.stopPropagation()}\n              onKeyDown={(e) => e.stopPropagation()}\n            >\n              <Combobox.Input />\n            </Combobox.Trigger>\n          </div>\n\n          <Combobox.Portal container={portalContainer}>\n            <Combobox.Positioner\n              style={{ zIndex: 100000000, pointerEvents: 'auto' }}\n              anchor={anchorRef}\n            >\n              <Combobox.Popup>\n                <Combobox.Empty>No themes found</Combobox.Empty>\n                <Combobox.List\n                  style={{\n                    overscrollBehavior: 'contain',\n                    maxHeight: 500,\n                    overflowY: 'auto',\n                  }}\n                >\n                  {(option: (typeof themes)[number]) => (\n                    <Combobox.Item\n                      key={option.value}\n                      value={option}\n                      onClick={(e) => e.stopPropagation()}\n                    >\n                      <span>{option.label}</span>\n                    </Combobox.Item>\n                  )}\n                </Combobox.List>\n              </Combobox.Popup>\n            </Combobox.Positioner>\n          </Combobox.Portal>\n        </Combobox.Root>\n      </div>\n    </div>\n  )\n}\n","import type { TracePlugin } from '@react-spot/core'\nimport {\n  useDeactivateInspector,\n  useProjectRoot,\n  useWidgetPortalContainer,\n} from '@react-spot/core'\nimport {\n  FolderIcon,\n  Popover,\n  ToolbarButton,\n  Tooltip,\n} from '@react-spot/ui-components'\nimport { useEffect, useRef, useState, useSyncExternalStore } from 'react'\n\nimport { FolderAccessPrompt, handleGrantAccess } from './FolderAccessPrompt'\nimport { fileSystemService } from './fs'\nimport { PreviewSettings } from './PreviewSettings'\nimport { SourcePreview } from './SourcePreview'\nimport type { PreviewPluginOptions } from './types'\n\nexport type { PreviewPluginOptions }\n\nfunction FolderToolbarIcon({ hasAccess }: { hasAccess: boolean }) {\n  return (\n    <span style={{ position: 'relative', display: 'inline-flex' }}>\n      <FolderIcon />\n      {hasAccess && (\n        <span\n          style={{\n            position: 'absolute',\n            top: -4,\n            right: -4,\n            width: 6,\n            height: 6,\n            borderRadius: '50%',\n            background: '#22c55e',\n            border: '1.5px solid #18181b',\n            pointerEvents: 'none',\n          }}\n        />\n      )}\n    </span>\n  )\n}\n\nfunction PreviewToolbar() {\n  const projectRoot = useProjectRoot()\n  const portalContainer = useWidgetPortalContainer()\n  const deactivateInspector = useDeactivateInspector()\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const [isPromptOpen, setIsPromptOpen] = useState(false)\n  const hasAccess = useSyncExternalStore(\n    fileSystemService.subscribe.bind(fileSystemService),\n    () => fileSystemService.hasAccess,\n    () => false,\n  )\n\n  // Silently try to restore a previously granted FS handle on mount\n  useEffect(() => {\n    fileSystemService.tryRestore().catch(() => {})\n  }, [])\n\n  const handleClick = () => {\n    deactivateInspector()\n\n    if (fileSystemService.hasAccess) {\n      fileSystemService.requestAccess().catch(() => {})\n      return\n    }\n\n    setIsPromptOpen(true)\n  }\n\n  const handleGrant = async () => {\n    const granted = await handleGrantAccess(projectRoot, () =>\n      fileSystemService.requestAccess(),\n    )\n    if (granted) setIsPromptOpen(false)\n  }\n\n  return (\n    <>\n      <Tooltip\n        label={hasAccess ? 'Project folder connected' : 'Select project folder'}\n        container={portalContainer}\n        render={<ToolbarButton ref={buttonRef} />}\n        aria-label=\"Project folder\"\n        style={{\n          color: hasAccess ? '#22c55e' : '#52525b',\n        }}\n        onClick={handleClick}\n      >\n        <FolderToolbarIcon hasAccess={hasAccess} />\n      </Tooltip>\n\n      <Popover.Root\n        open={isPromptOpen}\n        onOpenChange={(open: boolean) => {\n          if (!open) setIsPromptOpen(false)\n        }}\n      >\n        <Popover.Portal container={portalContainer}>\n          <Popover.Positioner\n            anchor={buttonRef.current}\n            side=\"top\"\n            align=\"end\"\n            sideOffset={8}\n            collisionPadding={8}\n            positionMethod=\"fixed\"\n            style={{ zIndex: 9999999, pointerEvents: 'auto' }}\n          >\n            <Popover.Popup\n              style={{ width: 280, overflow: 'hidden' }}\n              onClick={(event) => event.stopPropagation()}\n              onKeyDown={(event) => event.stopPropagation()}\n            >\n              <FolderAccessPrompt\n                root={projectRoot}\n                onGrant={handleGrant}\n                onCancel={() => setIsPromptOpen(false)}\n              />\n            </Popover.Popup>\n          </Popover.Positioner>\n        </Popover.Portal>\n      </Popover.Root>\n    </>\n  )\n}\n\nexport function PreviewPlugin(_options: PreviewPluginOptions = {}): TracePlugin {\n  return {\n    name: 'preview',\n    toolbar: PreviewToolbar,\n    settings: PreviewSettings,\n  }\n}\n"],"mappings":"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"}

package/dist/index.d.cts

@@ -0,0 +1,8 @@
+import { t as PreviewPluginOptions } from "./types-DM7rB7J1.cjs";
+import { TracePlugin } from "@react-spot/core";
+
+//#region src/index.d.ts
+declare function PreviewPlugin(_options?: PreviewPluginOptions): TracePlugin;
+//#endregion
+export { PreviewPlugin, type PreviewPluginOptions };
+//# 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":";;;;iBAiIgB,aAAA,CAAc,QAAA,GAAU,oBAAA,GAA4B,WAAA"}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { t as PreviewPluginOptions } from "./types-uxyW_RVb.js";
+import { TracePlugin } from "@react-spot/core";
+
+//#region src/index.d.ts
+declare function PreviewPlugin(_options?: PreviewPluginOptions): TracePlugin;
+//#endregion
+export { PreviewPlugin, type PreviewPluginOptions };
+//# 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":";;;;iBAiIgB,aAAA,CAAc,QAAA,GAAU,oBAAA,GAA4B,WAAA"}

package/dist/index.js

@@ -0,0 +1,419 @@
+import { IS_MAC, settingsPluginAtom, useDeactivateInspector, useProjectRoot, useWidgetPortalContainer } from "@react-spot/core";
+import { Button, Combobox, FolderIcon, Kbd, KbdGroup, Popover, ToolbarButton, Tooltip } from "@react-spot/ui-components";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useAtom } from "jotai";
+import { bundledThemesInfo } from "shiki";
+
+//#region src/FolderAccessPrompt.tsx
+function FolderAccessPrompt({ root, onGrant, onCancel }) {
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: 12,
+			padding: "20px 16px",
+			height: "100%",
+			boxSizing: "border-box",
+			textAlign: "center",
+			fontFamily: "system-ui, sans-serif"
+		},
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				style: { color: "#52525b" },
+				children: /* @__PURE__ */ jsx(FolderIcon, {})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: 12
+				},
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						style: {
+							fontSize: 13,
+							fontWeight: 600,
+							color: "#fafafa"
+						},
+						children: "Folder access needed"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						style: {
+							fontSize: 12,
+							color: "#71717a",
+							lineHeight: 1.5
+						},
+						children: root ? /* @__PURE__ */ jsxs("span", {
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								gap: 8
+							},
+							children: [/* @__PURE__ */ jsx("span", { children: "The project root path will be copied to your clipboard. Navigate to it in the folder picker." }), IS_MAC && /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsxs(KbdGroup, { children: [
+								/* @__PURE__ */ jsx(Kbd, { children: "⌘" }),
+								/* @__PURE__ */ jsx(Kbd, { children: "⇧" }),
+								/* @__PURE__ */ jsx(Kbd, { children: "G" })
+							] }), /* @__PURE__ */ jsx("span", { children: " to paste the path directly." })] })]
+						}) : "Grant access to your project folder to preview source files."
+					}),
+					root && /* @__PURE__ */ jsx("span", {
+						style: {
+							fontSize: 11,
+							fontFamily: "ui-monospace, monospace",
+							color: "#3b82f6",
+							wordBreak: "break-all"
+						},
+						children: root
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					gap: 8
+				},
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					onClick: onCancel,
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					onClick: onGrant,
+					children: "Grant access"
+				})]
+			})
+		]
+	});
+}
+/**
+* Copies the root path to clipboard then calls requestAccess().
+*/
+async function handleGrantAccess(root, requestAccess) {
+	await navigator.clipboard.writeText(root).catch(() => {});
+	return requestAccess();
+}
+
+//#endregion
+//#region src/fs.ts
+const IDB_NAME = "react-trace";
+const IDB_STORE = "handles";
+const IDB_KEY = "root-directory";
+function openDB() {
+	return new Promise((resolve, reject) => {
+		const req = indexedDB.open(IDB_NAME, 1);
+		req.onupgradeneeded = () => req.result.createObjectStore(IDB_STORE);
+		req.onsuccess = () => resolve(req.result);
+		req.onerror = () => reject(req.error);
+	});
+}
+async function saveHandle(handle) {
+	const db = await openDB();
+	return new Promise((resolve, reject) => {
+		const tx = db.transaction(IDB_STORE, "readwrite");
+		tx.objectStore(IDB_STORE).put(handle, IDB_KEY);
+		tx.oncomplete = () => resolve();
+		tx.onerror = () => reject(tx.error);
+	});
+}
+async function loadHandle() {
+	try {
+		const db = await openDB();
+		return new Promise((resolve, reject) => {
+			const req = db.transaction(IDB_STORE, "readonly").objectStore(IDB_STORE).get(IDB_KEY);
+			req.onsuccess = () => resolve(req.result ?? null);
+			req.onerror = () => reject(req.error);
+		});
+	} catch {
+		return null;
+	}
+}
+/**
+* Traverses the directory handle tree to reach the target file.
+* Returns null if any segment of the path doesn't exist.
+*/
+async function getFileHandle(dir, relativePath, create = false) {
+	const parts = relativePath.split("/").filter(Boolean);
+	if (parts.length === 0) return null;
+	let current = dir;
+	for (let i = 0; i < parts.length - 1; i++) try {
+		current = await current.getDirectoryHandle(parts[i], { create });
+	} catch {
+		return null;
+	}
+	try {
+		return await current.getFileHandle(parts.at(-1), { create });
+	} catch {
+		return null;
+	}
+}
+var FileSystemServiceImpl = class {
+	_handle = null;
+	_listeners = /* @__PURE__ */ new Set();
+	get isSupported() {
+		return typeof window !== "undefined" && "showDirectoryPicker" in window;
+	}
+	get hasAccess() {
+		return this._handle !== null;
+	}
+	subscribe(listener) {
+		this._listeners.add(listener);
+		return () => this._listeners.delete(listener);
+	}
+	notify() {
+		this._listeners.forEach((l) => l());
+	}
+	async tryRestore() {
+		if (!this.isSupported) return false;
+		try {
+			const handle = await loadHandle();
+			if (!handle) return false;
+			if (await handle.requestPermission({ mode: "readwrite" }) === "granted") {
+				this._handle = handle;
+				this.notify();
+				return true;
+			}
+		} catch {}
+		return false;
+	}
+	async requestAccess() {
+		if (!this.isSupported) return false;
+		try {
+			const handle = await window.showDirectoryPicker({ mode: "readwrite" });
+			await saveHandle(handle);
+			this._handle = handle;
+			this.notify();
+			return true;
+		} catch {
+			return false;
+		}
+	}
+	/** Ensure we have access — try restore silently first, then prompt. */
+	async ensureAccess() {
+		if (this._handle) return true;
+		if (await this.tryRestore()) return true;
+		return this.requestAccess();
+	}
+	async read(relativePath) {
+		if (!await this.ensureAccess() || !this._handle) throw new Error("[react-trace] File system access denied");
+		const file = await getFileHandle(this._handle, relativePath);
+		if (!file) throw new Error(`[react-trace] File not found: ${relativePath}`);
+		return (await file.getFile()).text();
+	}
+	async write(relativePath, content) {
+		if (!await this.ensureAccess() || !this._handle) throw new Error("[react-trace] File system access denied");
+		const file = await getFileHandle(this._handle, relativePath, true);
+		if (!file) throw new Error(`[react-trace] Cannot open file for writing: ${relativePath}`);
+		const writable = await file.createWritable();
+		await writable.write(content);
+		await writable.close();
+	}
+};
+const fileSystemService = new FileSystemServiceImpl();
+
+//#endregion
+//#region src/store.ts
+const previewSettingsAtom = settingsPluginAtom("preview");
+
+//#endregion
+//#region src/PreviewSettings.tsx
+const themes = bundledThemesInfo.map((theme) => ({
+	value: theme.id,
+	label: theme.displayName
+}));
+const themesLookup = themes.reduce((acc, theme) => {
+	acc[theme.value] = theme;
+	return acc;
+}, {});
+const LABEL_STYLE = {
+	fontSize: 12,
+	color: "#d4d4d8",
+	fontFamily: "system-ui, sans-serif"
+};
+function PreviewSettings() {
+	const portalContainer = useWidgetPortalContainer();
+	const [themesOpen, setThemesOpen] = useState(false);
+	const [previewSettings = {
+		disabled: false,
+		theme: "one-dark-pro"
+	}, setPreviewSettings] = useAtom(previewSettingsAtom);
+	const anchorRef = useRef(null);
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 12
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 6
+			},
+			children: /* @__PURE__ */ jsxs("label", {
+				style: LABEL_STYLE,
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						type: "checkbox",
+						checked: previewSettings.disabled ?? false,
+						onChange: (e) => setPreviewSettings({
+							...previewSettings,
+							disabled: e.target.checked
+						})
+					}),
+					" ",
+					"Code editing disabled"
+				]
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 6
+			},
+			children: [/* @__PURE__ */ jsx("label", {
+				style: LABEL_STYLE,
+				children: "Theme"
+			}), /* @__PURE__ */ jsxs(Combobox.Root, {
+				value: themesLookup[previewSettings.theme],
+				onValueChange: (theme) => {
+					if (theme) setPreviewSettings({
+						...previewSettings,
+						theme: theme.value
+					});
+				},
+				items: themes,
+				open: themesOpen,
+				onOpenChange: setThemesOpen,
+				children: [/* @__PURE__ */ jsx("div", {
+					ref: anchorRef,
+					children: /* @__PURE__ */ jsx(Combobox.Trigger, {
+						onClick: (e) => e.stopPropagation(),
+						onKeyDown: (e) => e.stopPropagation(),
+						children: /* @__PURE__ */ jsx(Combobox.Input, {})
+					})
+				}), /* @__PURE__ */ jsx(Combobox.Portal, {
+					container: portalContainer,
+					children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+						style: {
+							zIndex: 1e8,
+							pointerEvents: "auto"
+						},
+						anchor: anchorRef,
+						children: /* @__PURE__ */ jsxs(Combobox.Popup, { children: [/* @__PURE__ */ jsx(Combobox.Empty, { children: "No themes found" }), /* @__PURE__ */ jsx(Combobox.List, {
+							style: {
+								overscrollBehavior: "contain",
+								maxHeight: 500,
+								overflowY: "auto"
+							},
+							children: (option) => /* @__PURE__ */ jsx(Combobox.Item, {
+								value: option,
+								onClick: (e) => e.stopPropagation(),
+								children: /* @__PURE__ */ jsx("span", { children: option.label })
+							}, option.value)
+						})] })
+					})
+				})]
+			})]
+		})]
+	});
+}
+
+//#endregion
+//#region src/index.tsx
+function FolderToolbarIcon({ hasAccess }) {
+	return /* @__PURE__ */ jsxs("span", {
+		style: {
+			position: "relative",
+			display: "inline-flex"
+		},
+		children: [/* @__PURE__ */ jsx(FolderIcon, {}), hasAccess && /* @__PURE__ */ jsx("span", { style: {
+			position: "absolute",
+			top: -4,
+			right: -4,
+			width: 6,
+			height: 6,
+			borderRadius: "50%",
+			background: "#22c55e",
+			border: "1.5px solid #18181b",
+			pointerEvents: "none"
+		} })]
+	});
+}
+function PreviewToolbar() {
+	const projectRoot = useProjectRoot();
+	const portalContainer = useWidgetPortalContainer();
+	const deactivateInspector = useDeactivateInspector();
+	const buttonRef = useRef(null);
+	const [isPromptOpen, setIsPromptOpen] = useState(false);
+	const hasAccess = useSyncExternalStore(fileSystemService.subscribe.bind(fileSystemService), () => fileSystemService.hasAccess, () => false);
+	useEffect(() => {
+		fileSystemService.tryRestore().catch(() => {});
+	}, []);
+	const handleClick = () => {
+		deactivateInspector();
+		if (fileSystemService.hasAccess) {
+			fileSystemService.requestAccess().catch(() => {});
+			return;
+		}
+		setIsPromptOpen(true);
+	};
+	const handleGrant = async () => {
+		if (await handleGrantAccess(projectRoot, () => fileSystemService.requestAccess())) setIsPromptOpen(false);
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Tooltip, {
+		label: hasAccess ? "Project folder connected" : "Select project folder",
+		container: portalContainer,
+		render: /* @__PURE__ */ jsx(ToolbarButton, { ref: buttonRef }),
+		"aria-label": "Project folder",
+		style: { color: hasAccess ? "#22c55e" : "#52525b" },
+		onClick: handleClick,
+		children: /* @__PURE__ */ jsx(FolderToolbarIcon, { hasAccess })
+	}), /* @__PURE__ */ jsx(Popover.Root, {
+		open: isPromptOpen,
+		onOpenChange: (open) => {
+			if (!open) setIsPromptOpen(false);
+		},
+		children: /* @__PURE__ */ jsx(Popover.Portal, {
+			container: portalContainer,
+			children: /* @__PURE__ */ jsx(Popover.Positioner, {
+				anchor: buttonRef.current,
+				side: "top",
+				align: "end",
+				sideOffset: 8,
+				collisionPadding: 8,
+				positionMethod: "fixed",
+				style: {
+					zIndex: 9999999,
+					pointerEvents: "auto"
+				},
+				children: /* @__PURE__ */ jsx(Popover.Popup, {
+					style: {
+						width: 280,
+						overflow: "hidden"
+					},
+					onClick: (event) => event.stopPropagation(),
+					onKeyDown: (event) => event.stopPropagation(),
+					children: /* @__PURE__ */ jsx(FolderAccessPrompt, {
+						root: projectRoot,
+						onGrant: handleGrant,
+						onCancel: () => setIsPromptOpen(false)
+					})
+				})
+			})
+		})
+	})] });
+}
+function PreviewPlugin(_options = {}) {
+	return {
+		name: "preview",
+		toolbar: PreviewToolbar,
+		settings: PreviewSettings
+	};
+}
+
+//#endregion
+export { PreviewPlugin };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/FolderAccessPrompt.tsx","../src/fs.ts","../src/store.ts","../src/PreviewSettings.tsx","../src/index.tsx"],"sourcesContent":["import { IS_MAC } from '@react-spot/core'\nimport {\n  Button,\n  FolderIcon,\n  Kbd,\n  KbdGroup,\n} from '@react-spot/ui-components'\n\nexport function FolderAccessPrompt({\n  root,\n  onGrant,\n  onCancel,\n}: {\n  root: string | undefined\n  onGrant(): void\n  onCancel(): void\n}) {\n  return (\n    <div\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        gap: 12,\n        padding: '20px 16px',\n        height: '100%',\n        boxSizing: 'border-box',\n        textAlign: 'center',\n        fontFamily: 'system-ui, sans-serif',\n      }}\n    >\n      <span style={{ color: '#52525b' }}>\n        <FolderIcon />\n      </span>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>\n        <span style={{ fontSize: 13, fontWeight: 600, color: '#fafafa' }}>\n          Folder access needed\n        </span>\n        <span style={{ fontSize: 12, color: '#71717a', lineHeight: 1.5 }}>\n          {root ? (\n            <span style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>\n              <span>\n                The project root path will be copied to your clipboard. Navigate\n                to it in the folder picker.\n              </span>\n              {IS_MAC && (\n                <span>\n                  <KbdGroup>\n                    <Kbd>⌘</Kbd>\n                    <Kbd>⇧</Kbd>\n                    <Kbd>G</Kbd>\n                  </KbdGroup>\n                  <span> to paste the path directly.</span>\n                </span>\n              )}\n            </span>\n          ) : (\n            'Grant access to your project folder to preview source files.'\n          )}\n        </span>\n        {root && (\n          <span\n            style={{\n              fontSize: 11,\n              fontFamily: 'ui-monospace, monospace',\n              color: '#3b82f6',\n              wordBreak: 'break-all',\n            }}\n          >\n            {root}\n          </span>\n        )}\n      </div>\n      <div style={{ display: 'flex', gap: 8 }}>\n        <Button variant=\"secondary\" onClick={onCancel}>\n          Cancel\n        </Button>\n        <Button variant=\"primary\" onClick={onGrant}>\n          Grant access\n        </Button>\n      </div>\n    </div>\n  )\n}\n\n/**\n * Copies the root path to clipboard then calls requestAccess().\n */\nexport async function handleGrantAccess(\n  root: string,\n  requestAccess: () => Promise<boolean>,\n): Promise<boolean> {\n  await navigator.clipboard.writeText(root).catch(() => {})\n  return requestAccess()\n}\n","export interface FileSystemService {\n  /** Whether the File System Access API is available in this browser */\n  isSupported: boolean\n  /** Whether the user has already granted directory access */\n  hasAccess: boolean\n  /**\n   * Silently try to restore a previously granted directory handle from\n   * IndexedDB and re-request permission. Resolves true if successful.\n   * Call this on app mount to avoid prompting on every reload.\n   */\n  tryRestore(): Promise<boolean>\n  /**\n   * Prompt the user to pick the project root directory via showDirectoryPicker().\n   * The handle is persisted in IndexedDB for future sessions.\n   */\n  requestAccess(): Promise<boolean>\n  /**\n   * Subscribe to hasAccess changes (e.g. after requestAccess / tryRestore).\n   * Returns an unsubscribe function.\n   */\n  subscribe(listener: () => void): () => void\n  /**\n   * Read a file by its relative path (relative to the granted directory).\n   * If no access has been granted yet, triggers requestAccess() first.\n   */\n  read(relativePath: string): Promise<string>\n  /**\n   * Write content to a file by its relative path. Triggers requestAccess() if needed.\n   * Written files trigger HMR automatically in the dev server.\n   */\n  write(relativePath: string, content: string): Promise<void>\n}\n\nconst IDB_NAME = 'react-trace'\nconst IDB_STORE = 'handles'\nconst IDB_KEY = 'root-directory'\n\nfunction openDB(): Promise<IDBDatabase> {\n  return new Promise((resolve, reject) => {\n    const req = indexedDB.open(IDB_NAME, 1)\n    req.onupgradeneeded = () => req.result.createObjectStore(IDB_STORE)\n    req.onsuccess = () => resolve(req.result)\n    req.onerror = () => reject(req.error)\n  })\n}\n\nasync function saveHandle(handle: FileSystemDirectoryHandle): Promise<void> {\n  const db = await openDB()\n  return new Promise((resolve, reject) => {\n    const tx = db.transaction(IDB_STORE, 'readwrite')\n    tx.objectStore(IDB_STORE).put(handle, IDB_KEY)\n    tx.oncomplete = () => resolve()\n    tx.onerror = () => reject(tx.error)\n  })\n}\n\nasync function loadHandle(): Promise<FileSystemDirectoryHandle | null> {\n  try {\n    const db = await openDB()\n    return new Promise((resolve, reject) => {\n      const tx = db.transaction(IDB_STORE, 'readonly')\n      const req = tx.objectStore(IDB_STORE).get(IDB_KEY)\n      req.onsuccess = () =>\n        resolve((req.result as FileSystemDirectoryHandle) ?? null)\n      req.onerror = () => reject(req.error)\n    })\n  } catch {\n    return null\n  }\n}\n\n/**\n * Traverses the directory handle tree to reach the target file.\n * Returns null if any segment of the path doesn't exist.\n */\nasync function getFileHandle(\n  dir: FileSystemDirectoryHandle,\n  relativePath: string,\n  create = false,\n): Promise<FileSystemFileHandle | null> {\n  const parts = relativePath.split('/').filter(Boolean)\n  if (parts.length === 0) return null\n\n  let current: FileSystemDirectoryHandle = dir\n\n  for (let i = 0; i < parts.length - 1; i++) {\n    try {\n      current = await current.getDirectoryHandle(parts[i]!, { create })\n    } catch {\n      return null\n    }\n  }\n\n  try {\n    return await current.getFileHandle(parts.at(-1)!, { create })\n  } catch {\n    return null\n  }\n}\n\nclass FileSystemServiceImpl implements FileSystemService {\n  private _handle: FileSystemDirectoryHandle | null = null\n  private _listeners = new Set<() => void>()\n\n  get isSupported(): boolean {\n    return typeof window !== 'undefined' && 'showDirectoryPicker' in window\n  }\n\n  get hasAccess(): boolean {\n    return this._handle !== null\n  }\n\n  subscribe(listener: () => void): () => void {\n    this._listeners.add(listener)\n    return () => this._listeners.delete(listener)\n  }\n\n  private notify(): void {\n    this._listeners.forEach((l) => l())\n  }\n\n  async tryRestore(): Promise<boolean> {\n    if (!this.isSupported) return false\n    try {\n      const handle = await loadHandle()\n      if (!handle) return false\n      const perm = await handle.requestPermission({ mode: 'readwrite' })\n      if (perm === 'granted') {\n        this._handle = handle\n        this.notify()\n        return true\n      }\n    } catch {\n      // handle gone or permission denied — fall through\n    }\n    return false\n  }\n\n  async requestAccess(): Promise<boolean> {\n    if (!this.isSupported) return false\n    try {\n      const handle = await window.showDirectoryPicker({ mode: 'readwrite' })\n      await saveHandle(handle)\n      this._handle = handle\n      this.notify()\n      return true\n    } catch {\n      // User cancelled the picker\n      return false\n    }\n  }\n\n  /** Ensure we have access — try restore silently first, then prompt. */\n  private async ensureAccess(): Promise<boolean> {\n    if (this._handle) return true\n    const restored = await this.tryRestore()\n    if (restored) return true\n    return this.requestAccess()\n  }\n\n  async read(relativePath: string): Promise<string> {\n    const ok = await this.ensureAccess()\n    if (!ok || !this._handle)\n      throw new Error('[react-trace] File system access denied')\n\n    const file = await getFileHandle(this._handle, relativePath)\n    if (!file) throw new Error(`[react-trace] File not found: ${relativePath}`)\n\n    return (await file.getFile()).text()\n  }\n\n  async write(relativePath: string, content: string): Promise<void> {\n    const ok = await this.ensureAccess()\n    if (!ok || !this._handle)\n      throw new Error('[react-trace] File system access denied')\n\n    const file = await getFileHandle(this._handle, relativePath, true)\n    if (!file)\n      throw new Error(\n        `[react-trace] Cannot open file for writing: ${relativePath}`,\n      )\n\n    const writable = await file.createWritable()\n    await writable.write(content)\n    await writable.close()\n  }\n}\n\nexport const fileSystemService: FileSystemService = new FileSystemServiceImpl()\n","import type { TraceSettings } from '@react-spot/core'\nimport { settingsPluginAtom } from '@react-spot/core'\nimport type { WritableAtom } from 'jotai'\nimport type { BundledTheme } from 'shiki'\n\ndeclare module '@react-spot/core' {\n  interface TraceSettings {\n    preview?: {\n      disabled: boolean\n      theme: BundledTheme\n    }\n  }\n}\n\nexport const previewSettingsAtom = settingsPluginAtom(\n  'preview',\n) as WritableAtom<TraceSettings['preview'], [TraceSettings['preview']], void>\n","import { useWidgetPortalContainer } from '@react-spot/core'\nimport { Combobox } from '@react-spot/ui-components'\nimport { useAtom } from 'jotai'\nimport type { CSSProperties } from 'react'\nimport { useRef, useState } from 'react'\nimport type { BundledTheme } from 'shiki'\nimport { bundledThemesInfo } from 'shiki'\n\nimport { previewSettingsAtom } from './store'\n\nconst themes = bundledThemesInfo.map((theme) => ({\n  value: theme.id as BundledTheme,\n  label: theme.displayName,\n}))\n\nconst themesLookup = themes.reduce<\n  Record<(typeof themes)[number]['value'], (typeof themes)[number]>\n>(\n  (acc, theme) => {\n    acc[theme.value] = theme\n    return acc\n  },\n  {} as Record<(typeof themes)[number]['value'], (typeof themes)[number]>,\n)\n\nconst LABEL_STYLE: CSSProperties = {\n  fontSize: 12,\n  color: '#d4d4d8',\n  fontFamily: 'system-ui, sans-serif',\n}\n\nexport function PreviewSettings() {\n  const portalContainer = useWidgetPortalContainer()\n  const [themesOpen, setThemesOpen] = useState(false)\n\n  const [\n    previewSettings = { disabled: false, theme: 'one-dark-pro' },\n    setPreviewSettings,\n  ] = useAtom(previewSettingsAtom)\n\n  const anchorRef = useRef<HTMLDivElement>(null)\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>\n        <label style={LABEL_STYLE}>\n          <input\n            type=\"checkbox\"\n            checked={previewSettings.disabled ?? false}\n            onChange={(e) =>\n              setPreviewSettings({\n                ...previewSettings,\n                disabled: e.target.checked,\n              })\n            }\n          />{' '}\n          Code editing disabled\n        </label>\n      </div>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>\n        <label style={LABEL_STYLE}>Theme</label>\n        <Combobox.Root\n          value={themesLookup[previewSettings.theme]}\n          onValueChange={(theme) => {\n            if (theme) {\n              setPreviewSettings({ ...previewSettings, theme: theme.value })\n            }\n          }}\n          items={themes}\n          open={themesOpen}\n          onOpenChange={setThemesOpen}\n        >\n          <div ref={anchorRef}>\n            <Combobox.Trigger\n              onClick={(e) => e.stopPropagation()}\n              onKeyDown={(e) => e.stopPropagation()}\n            >\n              <Combobox.Input />\n            </Combobox.Trigger>\n          </div>\n\n          <Combobox.Portal container={portalContainer}>\n            <Combobox.Positioner\n              style={{ zIndex: 100000000, pointerEvents: 'auto' }}\n              anchor={anchorRef}\n            >\n              <Combobox.Popup>\n                <Combobox.Empty>No themes found</Combobox.Empty>\n                <Combobox.List\n                  style={{\n                    overscrollBehavior: 'contain',\n                    maxHeight: 500,\n                    overflowY: 'auto',\n                  }}\n                >\n                  {(option: (typeof themes)[number]) => (\n                    <Combobox.Item\n                      key={option.value}\n                      value={option}\n                      onClick={(e) => e.stopPropagation()}\n                    >\n                      <span>{option.label}</span>\n                    </Combobox.Item>\n                  )}\n                </Combobox.List>\n              </Combobox.Popup>\n            </Combobox.Positioner>\n          </Combobox.Portal>\n        </Combobox.Root>\n      </div>\n    </div>\n  )\n}\n","import type { TracePlugin } from '@react-spot/core'\nimport {\n  useDeactivateInspector,\n  useProjectRoot,\n  useWidgetPortalContainer,\n} from '@react-spot/core'\nimport {\n  FolderIcon,\n  Popover,\n  ToolbarButton,\n  Tooltip,\n} from '@react-spot/ui-components'\nimport { useEffect, useRef, useState, useSyncExternalStore } from 'react'\n\nimport { FolderAccessPrompt, handleGrantAccess } from './FolderAccessPrompt'\nimport { fileSystemService } from './fs'\nimport { PreviewSettings } from './PreviewSettings'\nimport { SourcePreview } from './SourcePreview'\nimport type { PreviewPluginOptions } from './types'\n\nexport type { PreviewPluginOptions }\n\nfunction FolderToolbarIcon({ hasAccess }: { hasAccess: boolean }) {\n  return (\n    <span style={{ position: 'relative', display: 'inline-flex' }}>\n      <FolderIcon />\n      {hasAccess && (\n        <span\n          style={{\n            position: 'absolute',\n            top: -4,\n            right: -4,\n            width: 6,\n            height: 6,\n            borderRadius: '50%',\n            background: '#22c55e',\n            border: '1.5px solid #18181b',\n            pointerEvents: 'none',\n          }}\n        />\n      )}\n    </span>\n  )\n}\n\nfunction PreviewToolbar() {\n  const projectRoot = useProjectRoot()\n  const portalContainer = useWidgetPortalContainer()\n  const deactivateInspector = useDeactivateInspector()\n  const buttonRef = useRef<HTMLButtonElement>(null)\n  const [isPromptOpen, setIsPromptOpen] = useState(false)\n  const hasAccess = useSyncExternalStore(\n    fileSystemService.subscribe.bind(fileSystemService),\n    () => fileSystemService.hasAccess,\n    () => false,\n  )\n\n  // Silently try to restore a previously granted FS handle on mount\n  useEffect(() => {\n    fileSystemService.tryRestore().catch(() => {})\n  }, [])\n\n  const handleClick = () => {\n    deactivateInspector()\n\n    if (fileSystemService.hasAccess) {\n      fileSystemService.requestAccess().catch(() => {})\n      return\n    }\n\n    setIsPromptOpen(true)\n  }\n\n  const handleGrant = async () => {\n    const granted = await handleGrantAccess(projectRoot, () =>\n      fileSystemService.requestAccess(),\n    )\n    if (granted) setIsPromptOpen(false)\n  }\n\n  return (\n    <>\n      <Tooltip\n        label={hasAccess ? 'Project folder connected' : 'Select project folder'}\n        container={portalContainer}\n        render={<ToolbarButton ref={buttonRef} />}\n        aria-label=\"Project folder\"\n        style={{\n          color: hasAccess ? '#22c55e' : '#52525b',\n        }}\n        onClick={handleClick}\n      >\n        <FolderToolbarIcon hasAccess={hasAccess} />\n      </Tooltip>\n\n      <Popover.Root\n        open={isPromptOpen}\n        onOpenChange={(open: boolean) => {\n          if (!open) setIsPromptOpen(false)\n        }}\n      >\n        <Popover.Portal container={portalContainer}>\n          <Popover.Positioner\n            anchor={buttonRef.current}\n            side=\"top\"\n            align=\"end\"\n            sideOffset={8}\n            collisionPadding={8}\n            positionMethod=\"fixed\"\n            style={{ zIndex: 9999999, pointerEvents: 'auto' }}\n          >\n            <Popover.Popup\n              style={{ width: 280, overflow: 'hidden' }}\n              onClick={(event) => event.stopPropagation()}\n              onKeyDown={(event) => event.stopPropagation()}\n            >\n              <FolderAccessPrompt\n                root={projectRoot}\n                onGrant={handleGrant}\n                onCancel={() => setIsPromptOpen(false)}\n              />\n            </Popover.Popup>\n          </Popover.Positioner>\n        </Popover.Portal>\n      </Popover.Root>\n    </>\n  )\n}\n\nexport function PreviewPlugin(_options: PreviewPluginOptions = {}): TracePlugin {\n  return {\n    name: 'preview',\n    toolbar: PreviewToolbar,\n    settings: PreviewSettings,\n  }\n}\n"],"mappings":"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"}

package/dist/index.prod.cjs

@@ -0,0 +1,13 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+//#region src/index.prod.ts
+/**
+* Production stub for @react-spot/plugin-preview.
+* Returns a no-op plugin object — Trace itself renders null in production
+* so the plugin is never used, but the import must resolve to a valid shape.
+*/
+const PreviewPlugin = () => ({ name: "preview" });
+
+//#endregion
+exports.PreviewPlugin = PreviewPlugin;
+//# 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 for @react-spot/plugin-preview.\n * Returns a no-op plugin object — Trace itself renders null in production\n * so the plugin is never used, but the import must resolve to a valid shape.\n */\nexport const PreviewPlugin = () => ({ name: 'preview' as const })\n\nexport type { PreviewPluginOptions } from './types'\n"],"mappings":";;;;;;;;AAKA,MAAa,uBAAuB,EAAE,MAAM,WAAoB"}

package/dist/index.prod.d.cts

@@ -0,0 +1,14 @@
+import { t as PreviewPluginOptions } from "./types-DM7rB7J1.cjs";
+
+//#region src/index.prod.d.ts
+/**
+ * Production stub for @react-spot/plugin-preview.
+ * Returns a no-op plugin object — Trace itself renders null in production
+ * so the plugin is never used, but the import must resolve to a valid shape.
+ */
+declare const PreviewPlugin: () => {
+  name: "preview";
+};
+//#endregion
+export { PreviewPlugin, type PreviewPluginOptions };
+//# 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":";;;;;;AAKA;;cAAa,aAAA;EAAoD,IAAA;AAAA"}

package/dist/index.prod.d.ts

@@ -0,0 +1,14 @@
+import { t as PreviewPluginOptions } from "./types-uxyW_RVb.js";
+
+//#region src/index.prod.d.ts
+/**
+ * Production stub for @react-spot/plugin-preview.
+ * Returns a no-op plugin object — Trace itself renders null in production
+ * so the plugin is never used, but the import must resolve to a valid shape.
+ */
+declare const PreviewPlugin: () => {
+  name: "preview";
+};
+//#endregion
+export { PreviewPlugin, type PreviewPluginOptions };
+//# 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":";;;;;;AAKA;;cAAa,aAAA;EAAoD,IAAA;AAAA"}

package/dist/index.prod.js

@@ -0,0 +1,11 @@
+//#region src/index.prod.ts
+/**
+* Production stub for @react-spot/plugin-preview.
+* Returns a no-op plugin object — Trace itself renders null in production
+* so the plugin is never used, but the import must resolve to a valid shape.
+*/
+const PreviewPlugin = () => ({ name: "preview" });
+
+//#endregion
+export { PreviewPlugin };
+//# 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 for @react-spot/plugin-preview.\n * Returns a no-op plugin object — Trace itself renders null in production\n * so the plugin is never used, but the import must resolve to a valid shape.\n */\nexport const PreviewPlugin = () => ({ name: 'preview' as const })\n\nexport type { PreviewPluginOptions } from './types'\n"],"mappings":";;;;;;AAKA,MAAa,uBAAuB,EAAE,MAAM,WAAoB"}

package/dist/types-DM7rB7J1.d.cts

@@ -0,0 +1,12 @@
+import { BundledTheme } from "shiki";
+
+//#region src/types.d.ts
+interface PreviewPluginOptions {
+  /** Disable editing. @default false */
+  disabled?: boolean;
+  /** Shiki theme ID. @default 'one-dark-pro' — any https://shiki.style/themes value works. */
+  theme?: BundledTheme;
+}
+//#endregion
+export { PreviewPluginOptions as t };
+//# sourceMappingURL=types-DM7rB7J1.d.cts.map

package/dist/types-DM7rB7J1.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types-DM7rB7J1.d.cts","names":[],"sources":["../src/types.ts"],"mappings":";;;UAEiB,oBAAA;;EAEf,QAAA;EAFmC;EAInC,KAAA,GAAQ,YAAA;AAAA"}

package/dist/types-uxyW_RVb.d.ts

@@ -0,0 +1,12 @@
+import { BundledTheme } from "shiki";
+
+//#region src/types.d.ts
+interface PreviewPluginOptions {
+  /** Disable editing. @default false */
+  disabled?: boolean;
+  /** Shiki theme ID. @default 'one-dark-pro' — any https://shiki.style/themes value works. */
+  theme?: BundledTheme;
+}
+//#endregion
+export { PreviewPluginOptions as t };
+//# sourceMappingURL=types-uxyW_RVb.d.ts.map

package/dist/types-uxyW_RVb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types-uxyW_RVb.d.ts","names":[],"sources":["../src/types.ts"],"mappings":";;;UAEiB,oBAAA;;EAEf,QAAA;EAFmC;EAInC,KAAA,GAAQ,YAAA;AAAA"}

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "@react-spot/plugin-preview",
+  "version": "0.0.1",
+  "description": "react-trace plugin: Monaco-powered source code preview for inspected components",
+  "keywords": [
+    "react-trace",
+    "react-trace-plugin"
+  ],
+  "license": "MIT",
+  "author": "Vitor Buzinaro",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/buzinas/react-trace",
+    "directory": "packages/plugin-preview"
+  },
+  "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": {
+    "@monaco-editor/react": "^4.7.0",
+    "@shikijs/monaco": "^4.0.1",
+    "shiki": "^4.0.1"
+  },
+  "devDependencies": {
+    "@types/node": "^24.11.0",
+    "@types/react": "^19",
+    "@types/react-dom": "^19.2.3",
+    "@types/wicg-file-system-access": "^2023.10.7",
+    "monaco-types": "^0.1.2",
+    "oxlint": "latest",
+    "react": "^19",
+    "react-dom": "^19.2.4",
+    "tsdown": "^0.21.0-beta.2",
+    "typescript": "^5"
+  },
+  "peerDependencies": {
+    "@react-spot/core": "^0.0.1",
+    "@react-spot/ui-components": "^0.0.1",
+    "jotai": "^2.18.0",
+    "react": ">=18"
+  }
+}