@react-trace-enhancer/plugin-preview 0.0.1

package/dist/index.js

@@ -0,0 +1,691 @@
+import { IS_MAC, settingsPluginAtom, useDeactivateInspector, useProjectRoot, useSelectedSource, useWidgetPortalContainer } from "@react-trace-enhancer/core";
+import { Button, CollapseIcon, Combobox, ExpandIcon, FolderIcon, IconButton, Kbd, KbdGroup, Popover, SaveIcon, ToolbarButton, Tooltip, panelPopupStyle } from "@react-trace-enhancer/ui-components";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useAtom } from "jotai";
+import { bundledThemes, bundledThemesInfo, createHighlighter } from "shiki";
+import Editor, { loader } from "@monaco-editor/react";
+import { shikiToMonaco } from "@shikijs/monaco";
+
+//#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/highlight.ts
+/** Injects the CSS animation for the highlighted source line — idempotent. */
+function ensureHighlightStyle() {
+	if (document.getElementById("react-trace-highlighted-line")) return;
+	const style = document.createElement("style");
+	style.id = "react-trace-highlighted-line";
+	style.textContent = `
+    .react-trace-highlighted-line {
+      background-color: rgba(0, 200, 255, 0.25);
+      animation: react-trace-highlight-flash 1.2s ease-out;
+    }
+
+    @keyframes react-trace-highlight-flash {
+      from { background-color: rgba(0, 200, 255, 0.6); }
+      to   { background-color: rgba(0, 200, 255, 0.25); }
+    }
+  `;
+	document.head.appendChild(style);
+}
+
+//#endregion
+//#region src/monaco.ts
+loader.init();
+const langs = [
+	"typescript",
+	"javascript",
+	"graphql",
+	"css"
+];
+const highlighterPromise = createHighlighter({
+	themes: Object.values(bundledThemes),
+	langs
+});
+/**
+* Monaco `beforeMount` callback — disables the built-in TS/JS language server
+* (no project types available in the browser) and wires Shiki for highlighting.
+*/
+function configureBefore(monaco) {
+	const noValidation = {
+		noSemanticValidation: true,
+		noSyntaxValidation: true
+	};
+	const { typescriptDefaults, javascriptDefaults } = monaco.languages.typescript;
+	typescriptDefaults.setDiagnosticsOptions(noValidation);
+	javascriptDefaults.setDiagnosticsOptions(noValidation);
+	const compilerOptions = {
+		jsx: monaco.languages.typescript.JsxEmit.ReactJSX,
+		allowJs: true
+	};
+	typescriptDefaults.setCompilerOptions(compilerOptions);
+	javascriptDefaults.setCompilerOptions(compilerOptions);
+	for (const id of langs) monaco.languages.register({ id });
+	highlighterPromise.then((h) => shikiToMonaco(h, monaco));
+}
+
+//#endregion
+//#region src/styles.ts
+const LINE_HEIGHT = 19;
+const INLINE_LINES = 12;
+const INLINE_HEIGHT = INLINE_LINES * LINE_HEIGHT;
+const EDITOR_WIDTH = 480;
+const TOOLBAR_HEIGHT = 33;
+
+//#endregion
+//#region src/utils.ts
+function detectLanguage(fileName) {
+	return {
+		ts: "typescript",
+		tsx: "typescript",
+		js: "javascript",
+		jsx: "javascript",
+		mjs: "javascript",
+		cjs: "javascript"
+	}[fileName.split(".").pop()?.toLowerCase() ?? ""] ?? "plaintext";
+}
+/** Convert a file path (URL or absolute) to a monaco file:// URI. */
+function pathToUri(monaco, path) {
+	try {
+		const { pathname } = new URL(path);
+		return monaco.Uri.parse(`file://${pathname}`);
+	} catch {
+		const normalized = path.replace(/\\/g, "/");
+		return monaco.Uri.parse(normalized.startsWith("/") ? `file://${normalized}` : `file:///${normalized}`);
+	}
+}
+
+//#endregion
+//#region src/SourcePreview.tsx
+function SourcePreview({ options }) {
+	let { theme = "one-dark-pro", disabled = false } = options;
+	const [persistedOptions, setPreviewSettings] = useAtom(previewSettingsAtom);
+	if (!persistedOptions) setPreviewSettings({
+		theme,
+		disabled
+	});
+	theme = persistedOptions?.theme || theme;
+	disabled = persistedOptions?.disabled ?? disabled;
+	const root = useProjectRoot();
+	const source = useSelectedSource();
+	const [expanded, setExpanded] = useState(false);
+	const [dirty, setDirty] = useState(false);
+	const [loadState, setLoadState] = useState(fileSystemService.hasAccess ? "loading" : "needs-access");
+	const editorRef = useRef(null);
+	if (!source) return null;
+	const currentPath = source.relativePath;
+	const handleGrant = async () => {
+		if (await handleGrantAccess(root, () => fileSystemService.requestAccess())) setLoadState("loading");
+	};
+	const handleSave = () => {
+		const val = editorRef.current?.getValue();
+		if (val != null) fileSystemService.write(currentPath, val).then(() => setDirty(false)).catch(() => {});
+	};
+	const editorHeight = expanded ? `calc(80vh - ${!disabled ? TOOLBAR_HEIGHT : 0}px)` : INLINE_HEIGHT - (!disabled ? TOOLBAR_HEIGHT : 0);
+	const toolbar = !disabled ? /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			height: TOOLBAR_HEIGHT,
+			padding: "0 10px",
+			borderBottom: "1px solid #27272a",
+			flexShrink: 0
+		},
+		children: [/* @__PURE__ */ jsxs("span", {
+			style: {
+				fontSize: 11,
+				fontFamily: "ui-monospace, monospace",
+				color: "#52525b"
+			},
+			children: [source.relativePath.split("/").slice(-2).join("/"), /* @__PURE__ */ jsxs("span", {
+				style: { color: "#3f3f46" },
+				children: [":", source.lineNumber]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 4
+			},
+			children: [dirty && /* @__PURE__ */ jsxs(Button, {
+				variant: "accent",
+				onClick: handleSave,
+				title: "Save (⌘S)",
+				children: [/* @__PURE__ */ jsx(SaveIcon, {}), " Save"]
+			}), /* @__PURE__ */ jsx(IconButton, {
+				onClick: () => setExpanded((prev) => !prev),
+				title: expanded ? "Collapse (Esc)" : "Expand",
+				children: expanded ? /* @__PURE__ */ jsx(CollapseIcon, {}) : /* @__PURE__ */ jsx(ExpandIcon, {})
+			})]
+		})]
+	}) : null;
+	const [dismissed, setDismissed] = useState(false);
+	const panel = /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			width: "100%",
+			height: "100%",
+			background: "#18181b",
+			overflow: "hidden"
+		},
+		onKeyDown: (e) => e.stopPropagation(),
+		children: [toolbar, loadState === "needs-access" && !dismissed ? /* @__PURE__ */ jsx(FolderAccessPrompt, {
+			root,
+			onGrant: handleGrant,
+			onCancel: () => setDismissed(true)
+		}) : /* @__PURE__ */ jsx(Editor, {
+			height: editorHeight,
+			width: "100%",
+			theme,
+			options: {
+				readOnly: disabled,
+				minimap: { enabled: false },
+				lineNumbers: "on",
+				scrollBeyondLastLine: false,
+				fontSize: 12,
+				lineHeight: LINE_HEIGHT,
+				folding: false,
+				glyphMargin: false,
+				automaticLayout: true,
+				padding: {
+					top: 6,
+					bottom: 6
+				},
+				fixedOverflowWidgets: true
+			},
+			beforeMount: configureBefore,
+			onMount: (editor, monaco) => {
+				editorRef.current = editor;
+				if (!disabled) {
+					editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, handleSave);
+					editor.addCommand(monaco.KeyCode.Escape, () => setExpanded(false));
+				}
+				editor.updateOptions({ theme });
+				const key = source.relativePath;
+				const uri = pathToUri(monaco, key);
+				fileSystemService.read(key).then((fileContent) => {
+					if (!monaco.editor.getModel(uri)) monaco.editor.createModel(fileContent, detectLanguage(key), uri);
+					const model = monaco.editor.getModel(uri);
+					if (model) {
+						const { lineNumber } = source;
+						editor.setModel(model);
+						editor.revealLineInCenter(lineNumber);
+						ensureHighlightStyle();
+						editor.createDecorationsCollection().set([{
+							range: new monaco.Range(lineNumber, 1, lineNumber, 1),
+							options: {
+								isWholeLine: true,
+								className: "react-trace-highlighted-line"
+							}
+						}]);
+					}
+				}).catch(() => {});
+			},
+			onChange: () => setDirty(true),
+			loading: /* @__PURE__ */ jsx("div", {
+				style: {
+					padding: "8px 12px",
+					color: "#52525b",
+					fontSize: 11
+				},
+				children: "Loading…"
+			})
+		})]
+	});
+	if (!expanded) return /* @__PURE__ */ jsx("div", {
+		onClick: (e) => e.stopPropagation(),
+		style: { width: EDITOR_WIDTH },
+		children: panel
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref: (el) => {
+			const parentElement = el?.parentElement?.parentElement;
+			if (!parentElement) return;
+			const transform = parentElement.style.transform;
+			parentElement.style.transform = "";
+			return () => {
+				parentElement.style.transform = transform;
+			};
+		},
+		style: {
+			position: "absolute",
+			inset: 0,
+			zIndex: 9999999,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		onClick: () => setExpanded(false),
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				...panelPopupStyle,
+				position: "fixed",
+				top: "10vw",
+				left: "10vw",
+				overflow: "hidden",
+				width: "80vw",
+				height: "80vh"
+			},
+			onClick: (e) => e.stopPropagation(),
+			children: panel
+		})
+	});
+}
+
+//#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 = {}) {
+	function PreviewActionPanel() {
+		return /* @__PURE__ */ jsx(SourcePreview, { options });
+	}
+	return {
+		name: "preview",
+		toolbar: PreviewToolbar,
+		actionPanel: PreviewActionPanel,
+		settings: PreviewSettings
+	};
+}
+
+//#endregion
+export { PreviewPlugin };
+//# sourceMappingURL=index.js.map