framer-code-link 0.4.3 → 0.4.5

package/dist/index.mjs

@@ -3,11 +3,11 @@ import { createRequire } from "node:module";
 import { Command } from "commander";
 import fs from "fs/promises";
 import { WebSocketServer } from "ws";
-import chokidar from "chokidar";
 import path from "path";
 import { createHash } from "crypto";
 import { setupTypeAcquisition } from "@typescript/ata";
 import ts from "typescript";
+import chokidar from "chokidar";
 
 //#region rolldown:runtime
 var __create = Object.create;
@@ -36,6 +36,173 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	enumerable: true
 }) : target, mod));
 
+//#endregion
+//#region ../code-link-shared/src/hash.ts
+/**
+* Base58 alphabet (no 0/O/I/l to avoid confusion)
+*/
+const BASE58 = "123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz";
+/**
+* Derive a short, deterministic hash from the full Framer project hash.
+* Uses a simple numeric hash encoded in base58 for compactness.
+* Idempotent: if input is already the target length, returns it unchanged.
+*/
+function shortProjectHash(fullHash, length = 8) {
+	if (fullHash.length === length) return fullHash;
+	let h1 = 0;
+	let h2 = 0;
+	for (let i = 0; i < fullHash.length; i++) {
+		const char = fullHash.charCodeAt(i);
+		h1 = Math.imul(h1 ^ char, 2246822507);
+		h2 = Math.imul(h2 ^ char, 3266489909);
+	}
+	h1 ^= h2 >>> 16;
+	h2 ^= h1 >>> 13;
+	let result = "";
+	const combined = [Math.abs(h1), Math.abs(h2)];
+	for (const num of combined) {
+		let n = num >>> 0;
+		while (n > 0 && result.length < length) {
+			result += BASE58[n % 58];
+			n = Math.floor(n / 58);
+		}
+	}
+	while (result.length < length) result += BASE58[0];
+	return result.slice(0, length);
+}
+
+//#endregion
+//#region ../code-link-shared/src/paths.ts
+/**
+* File path normalization utilities
+* Framer code files include extensions in their paths (.tsx, .ts, etc.)
+*/
+const firstCharacterRegex = /^[a-zA-Z$_]/;
+const remainingCharactersRegex = /[^a-zA-Z0-9$_]/g;
+const onlyDotsRegex = /^\.+$/;
+const tsxExtension = ".tsx";
+var NameType = /* @__PURE__ */ function(NameType$1) {
+	NameType$1["Variable"] = "Variable";
+	NameType$1["Selector"] = "Selector";
+	NameType$1["Directory"] = "Directory";
+	return NameType$1;
+}(NameType || {});
+function sanitizedName(type, name) {
+	if (!name) return null;
+	let validName = name.trim();
+	if (validName.length === 0) return null;
+	const validFirstChar = type === NameType.Selector ? "_" : "$";
+	if (type === NameType.Directory) {
+		if (onlyDotsRegex.test(validName)) return null;
+	} else if (!firstCharacterRegex.test(validName)) validName = validFirstChar + validName;
+	validName = validName.replace(remainingCharactersRegex, "_");
+	validName = validName.replace(/_+/g, "_");
+	validName = validName.replace(/^\$_/u, validFirstChar);
+	return validName;
+}
+function sanitizedVariableName(name) {
+	return sanitizedName(NameType.Variable, name);
+}
+function sanitizedDirectoryName(name) {
+	return sanitizedName(NameType.Directory, name);
+}
+function capitalizeFirstLetter(str) {
+	if (str.length === 0) return str;
+	return str.charAt(0).toUpperCase() + str.slice(1);
+}
+function hasValidExtension(fileName) {
+	if (fileName.endsWith(".json")) return true;
+	return /\.[tj]sx?$/u.test(fileName);
+}
+function splitExtension(fileName) {
+	const lastDot = fileName.lastIndexOf(".");
+	if (lastDot <= 0) return [fileName, ""];
+	return [fileName.slice(0, lastDot), fileName.slice(lastDot + 1)];
+}
+function dirname(filePath) {
+	const at = filePath.lastIndexOf("/");
+	if (at < 0) return "";
+	return filePath.slice(0, at);
+}
+function filename(filePath) {
+	const at = filePath.lastIndexOf("/") + 1;
+	return filePath.slice(at);
+}
+function pathJoin(...parts) {
+	let res = "";
+	parts.forEach((part) => {
+		while (part.startsWith("/")) part = part.slice(1);
+		while (part.endsWith("/")) part = part.slice(0, -1);
+		if (part === "") return;
+		if (res !== "") res += "/";
+		res += part;
+	});
+	return res;
+}
+function normalizePath(filePath) {
+	if (!filePath) return "";
+	const isAbsolute = filePath.startsWith("/");
+	const segments = filePath.replace(/\\/g, "/").split("/");
+	const stack = [];
+	for (const segment of segments) {
+		if (!segment || segment === ".") continue;
+		if (segment === "..") {
+			if (stack.length > 0) stack.pop();
+			continue;
+		}
+		stack.push(segment);
+	}
+	const normalized = stack.join("/");
+	if (isAbsolute) return `/${normalized}`;
+	return normalized;
+}
+function sanitizeFilePath(input, capitalizeReactComponent = true) {
+	const trimmed = input.trim();
+	const [inputName, extension] = splitExtension(filename(trimmed));
+	const extensionWithDot = extension ? `.${extension}` : "";
+	const dirName = dirname(trimmed).split("/").map((part) => sanitizedDirectoryName(part)).filter((part) => Boolean(part)).join("/");
+	let name = sanitizedVariableName(inputName) ?? "MyComponent";
+	if ((!hasValidExtension(extension) || extension === tsxExtension) && capitalizeReactComponent) name = capitalizeFirstLetter(name);
+	return {
+		path: pathJoin(dirName, name + extensionWithDot),
+		dirName,
+		name,
+		extension
+	};
+}
+function isSupportedExtension(filePath) {
+	return /\.(tsx?|jsx?|json)$/i.test(filePath);
+}
+/**
+* Pluralize a word based on count
+* @example pluralize(1, "file") => "1 file"
+* @example pluralize(3, "file") => "3 files"
+* @example pluralize(0, "conflict") => "0 conflicts"
+*/
+function pluralize(count, singular, plural) {
+	return `${count} ${count === 1 ? singular : plural ?? `${singular}s`}`;
+}
+
+//#endregion
+//#region ../code-link-shared/src/ports.ts
+/**
+* Generate a deterministic port number from a project hash (full or short).
+* Port range: 3847-4096 (250 possible ports)
+* Must match between CLI and plugin.
+*
+* Internally normalizes to the short id so both full and short inputs yield the same port.
+*/
+function getPortFromHash(projectHash) {
+	const shortId = shortProjectHash(projectHash);
+	let hash = 0;
+	for (let i = 0; i < shortId.length; i++) {
+		const char = shortId.charCodeAt(i);
+		hash = (hash << 5) - hash + char;
+		hash = hash & hash;
+	}
+	return 3847 + Math.abs(hash) % 250;
+}
+
 //#endregion
 //#region ../../node_modules/picocolors/picocolors.js
 var require_picocolors = /* @__PURE__ */ __commonJSMin(((exports, module) => {
@@ -294,11 +461,6 @@ function resetDisconnectState() {
 //#endregion
 //#region src/helpers/connection.ts
 /**
-* WebSocket connection helper
-*
-* Wrapper around ws.Server that normalizes handshake and surfaces callbacks.
-*/
-/**
 * Initializes a WebSocket server and returns a connection interface
 * Returns a Promise that resolves when the server is ready, or rejects on startup errors
 */
@@ -419,283 +581,48 @@ function sendMessage(socket, message) {
 }
 
 //#endregion
-//#region ../code-link-shared/src/hash.ts
+//#region src/utils/node-paths.ts
 /**
-* Base58 alphabet (no 0/O/I/l to avoid confusion)
+* Path manipulation utilities
 */
-const BASE58 = "123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz";
 /**
-* Derive a short, deterministic hash from the full Framer project hash.
-* Uses a simple numeric hash encoded in base58 for compactness.
-* Idempotent: if input is already the target length, returns it unchanged.
+* Gets a relative path from the project directory
 */
-function shortProjectHash(fullHash, length = 8) {
-	if (fullHash.length === length) return fullHash;
-	let h1 = 0;
-	let h2 = 0;
-	for (let i = 0; i < fullHash.length; i++) {
-		const char = fullHash.charCodeAt(i);
-		h1 = Math.imul(h1 ^ char, 2246822507);
-		h2 = Math.imul(h2 ^ char, 3266489909);
-	}
-	h1 ^= h2 >>> 16;
-	h2 ^= h1 >>> 13;
-	let result = "";
-	const combined = [Math.abs(h1), Math.abs(h2)];
-	for (const num of combined) {
-		let n = num >>> 0;
-		while (n > 0 && result.length < length) {
-			result += BASE58[n % 58];
-			n = Math.floor(n / 58);
-		}
-	}
-	while (result.length < length) result += BASE58[0];
-	return result.slice(0, length);
+function getRelativePath(projectDir, absolutePath) {
+	return path.relative(projectDir, absolutePath);
 }
-
-//#endregion
-//#region ../code-link-shared/src/ports.ts
 /**
-* Generate a deterministic port number from a project hash (full or short).
-* Port range: 3847-4096 (250 possible ports)
-* Must match between CLI and plugin.
-*
-* Internally normalizes to the short id so both full and short inputs yield the same port.
+* Normalizes a file path by:
+* - Converting backslashes to forward slashes
+* - Resolving . and .. segments
+* - Removing duplicate slashes
 */
-function getPortFromHash(projectHash) {
-	const shortId = shortProjectHash(projectHash);
-	let hash = 0;
-	for (let i = 0; i < shortId.length; i++) {
-		const char = shortId.charCodeAt(i);
-		hash = (hash << 5) - hash + char;
-		hash = hash & hash;
+function normalizePath$1(filePath) {
+	if (!filePath) return "";
+	const isAbsolute = filePath.startsWith("/");
+	const segments = filePath.replace(/\\/g, "/").split("/");
+	const stack = [];
+	for (const segment of segments) {
+		if (!segment || segment === ".") continue;
+		if (segment === "..") {
+			if (stack.length > 0) stack.pop();
+			continue;
+		}
+		stack.push(segment);
 	}
-	return 3847 + Math.abs(hash) % 250;
+	const normalized = stack.join("/");
+	if (isAbsolute) return `/${normalized}`;
+	return normalized;
 }
 
 //#endregion
-//#region ../code-link-shared/src/paths.ts
+//#region src/utils/state-persistence.ts
 /**
-* File path normalization utilities
-* Framer code files include extensions in their paths (.tsx, .ts, etc.)
-*/
-const firstCharacterRegex = /^[a-zA-Z$_]/;
-const remainingCharactersRegex = /[^a-zA-Z0-9$_]/g;
-const onlyDotsRegex = /^\.+$/;
-const tsxExtension = ".tsx";
-var NameType = /* @__PURE__ */ function(NameType$1) {
-	NameType$1["Variable"] = "Variable";
-	NameType$1["Selector"] = "Selector";
-	NameType$1["Directory"] = "Directory";
-	return NameType$1;
-}(NameType || {});
-function sanitizedName(type, name) {
-	if (!name) return null;
-	let validName = name.trim();
-	if (validName.length === 0) return null;
-	const validFirstChar = type === NameType.Selector ? "_" : "$";
-	if (type === NameType.Directory) {
-		if (onlyDotsRegex.test(validName)) return null;
-	} else if (!firstCharacterRegex.test(validName)) validName = validFirstChar + validName;
-	validName = validName.replace(remainingCharactersRegex, "_");
-	validName = validName.replace(/_+/g, "_");
-	validName = validName.replace(/^\$_/u, validFirstChar);
-	return validName;
-}
-function sanitizedVariableName(name) {
-	return sanitizedName(NameType.Variable, name);
-}
-function sanitizedDirectoryName(name) {
-	return sanitizedName(NameType.Directory, name);
-}
-function capitalizeFirstLetter(str) {
-	if (str.length === 0) return str;
-	return str.charAt(0).toUpperCase() + str.slice(1);
-}
-function hasValidExtension(fileName) {
-	if (fileName.endsWith(".json")) return true;
-	return /\.[tj]sx?$/u.test(fileName);
-}
-function splitExtension(fileName) {
-	const lastDot = fileName.lastIndexOf(".");
-	if (lastDot <= 0) return [fileName, ""];
-	return [fileName.slice(0, lastDot), fileName.slice(lastDot + 1)];
-}
-function dirname(filePath) {
-	const at = filePath.lastIndexOf("/");
-	if (at < 0) return "";
-	return filePath.slice(0, at);
-}
-function filename(filePath) {
-	const at = filePath.lastIndexOf("/") + 1;
-	return filePath.slice(at);
-}
-function pathJoin(...parts) {
-	let res = "";
-	parts.forEach((part) => {
-		while (part.startsWith("/")) part = part.slice(1);
-		while (part.endsWith("/")) part = part.slice(0, -1);
-		if (part === "") return;
-		if (res !== "") res += "/";
-		res += part;
-	});
-	return res;
-}
-function normalizePath(filePath) {
-	if (!filePath) return "";
-	const isAbsolute = filePath.startsWith("/");
-	const segments = filePath.replace(/\\/g, "/").split("/");
-	const stack = [];
-	for (const segment of segments) {
-		if (!segment || segment === ".") continue;
-		if (segment === "..") {
-			if (stack.length > 0) stack.pop();
-			continue;
-		}
-		stack.push(segment);
-	}
-	const normalized = stack.join("/");
-	if (isAbsolute) return `/${normalized}`;
-	return normalized;
-}
-function sanitizeFilePath(input, capitalizeReactComponent = true) {
-	const trimmed = input.trim();
-	const [inputName, extension] = splitExtension(filename(trimmed));
-	const extensionWithDot = extension ? `.${extension}` : "";
-	const dirName = dirname(trimmed).split("/").map((part) => sanitizedDirectoryName(part)).filter((part) => Boolean(part)).join("/");
-	let name = sanitizedVariableName(inputName) ?? "MyComponent";
-	if ((!hasValidExtension(extension) || extension === tsxExtension) && capitalizeReactComponent) name = capitalizeFirstLetter(name);
-	return {
-		path: pathJoin(dirName, name + extensionWithDot),
-		dirName,
-		name,
-		extension
-	};
-}
-function isSupportedExtension$1(filePath) {
-	return /\.(tsx?|jsx?|json)$/i.test(filePath);
-}
-/**
-* Pluralize a word based on count
-* @example pluralize(1, "file") => "1 file"
-* @example pluralize(3, "file") => "3 files"
-* @example pluralize(0, "conflict") => "0 conflicts"
-*/
-function pluralize(count, singular, plural) {
-	return `${count} ${count === 1 ? singular : plural ?? `${singular}s`}`;
-}
-
-//#endregion
-//#region src/utils/node-paths.ts
-/**
-* Path manipulation utilities
-*/
-/**
-* Gets a relative path from the project directory
-*/
-function getRelativePath(projectDir, absolutePath) {
-	return path.relative(projectDir, absolutePath);
-}
-/**
-* Normalizes a file path by:
-* - Converting backslashes to forward slashes
-* - Resolving . and .. segments
-* - Removing duplicate slashes
-*/
-function normalizePath$1(filePath) {
-	if (!filePath) return "";
-	const isAbsolute = filePath.startsWith("/");
-	const segments = filePath.replace(/\\/g, "/").split("/");
-	const stack = [];
-	for (const segment of segments) {
-		if (!segment || segment === ".") continue;
-		if (segment === "..") {
-			if (stack.length > 0) stack.pop();
-			continue;
-		}
-		stack.push(segment);
-	}
-	const normalized = stack.join("/");
-	if (isAbsolute) return `/${normalized}`;
-	return normalized;
-}
-
-//#endregion
-//#region src/helpers/watcher.ts
-/**
-* File watcher helper
-*
-* Wrapper around chokidar that normalizes file paths and filters to ts, tsx, js, json.
-*/
-/**
-* Initializes a file watcher for the given directory
-*/
-function initWatcher(filesDir) {
-	const handlers = [];
-	const watcher = chokidar.watch(filesDir, {
-		ignored: /(^|[/\\])\.\./,
-		persistent: true,
-		ignoreInitial: false
-	});
-	debug(`Watching directory: ${filesDir}`);
-	const emitEvent = async (kind, absolutePath) => {
-		if (!isSupportedExtension$1(absolutePath)) return;
-		const rawRelativePath = normalizePath(getRelativePath(filesDir, absolutePath));
-		const relativePath = sanitizeFilePath(rawRelativePath, false).path;
-		let effectiveAbsolutePath = absolutePath;
-		if (relativePath !== rawRelativePath && kind === "add") {
-			const newAbsolutePath = path.join(filesDir, relativePath);
-			try {
-				await fs.mkdir(path.dirname(newAbsolutePath), { recursive: true });
-				await fs.rename(absolutePath, newAbsolutePath);
-				debug(`Renamed ${rawRelativePath} -> ${relativePath}`);
-				effectiveAbsolutePath = newAbsolutePath;
-			} catch (err) {
-				warn(`Failed to rename ${rawRelativePath}`, err);
-			}
-		}
-		let content;
-		if (kind !== "delete") try {
-			content = await fs.readFile(effectiveAbsolutePath, "utf-8");
-		} catch (err) {
-			debug(`Failed to read file ${relativePath}:`, err);
-			return;
-		}
-		const event = {
-			kind,
-			relativePath,
-			content
-		};
-		debug(`Watcher event: ${kind} ${relativePath}`);
-		for (const handler of handlers) handler(event);
-	};
-	watcher.on("add", (filePath) => {
-		emitEvent("add", filePath);
-	});
-	watcher.on("change", (filePath) => {
-		emitEvent("change", filePath);
-	});
-	watcher.on("unlink", (filePath) => {
-		emitEvent("delete", filePath);
-	});
-	return {
-		on(_event, handler) {
-			handlers.push(handler);
-		},
-		async close() {
-			await watcher.close();
-		}
-	};
-}
-
-//#endregion
-//#region src/utils/state-persistence.ts
-/**
-* State persistence helper
-*
-* Persists last sync timestamps along with content hashes.
-* We only trust persisted timestamps if the file content hasn't changed
-* (hash matches), because that means the file wasn't edited while CLI was offline.
+* State persistence helper
+*
+* Persists last sync timestamps along with content hashes.
+* We only trust persisted timestamps if the file content hasn't changed
+* (hash matches), because that means the file wasn't edited while CLI was offline.
 */
 const STATE_FILE_NAME = ".framer-sync-state.json";
 const CURRENT_VERSION = 1;
@@ -803,7 +730,7 @@ async function listFiles(filesDir) {
 				await walk(entryPath);
 				continue;
 			}
-			if (!isSupportedExtension(entry.name)) continue;
+			if (!isSupportedExtension$1(entry.name)) continue;
 			const sanitizedPath = sanitizeFilePath(normalizePath(path.relative(filesDir, entryPath)), false).path;
 			try {
 				const [content, stats] = await Promise.all([fs.readFile(entryPath, "utf-8"), fs.stat(entryPath)]);
@@ -1054,7 +981,7 @@ function sanitizeRelativePath(relativePath) {
 		extension: sanitized.extension || path.extname(normalized) || DEFAULT_EXTENSION
 	};
 }
-function isSupportedExtension(fileName) {
+function isSupportedExtension$1(fileName) {
 	const lower = fileName.toLowerCase();
 	return SUPPORTED_EXTENSIONS.some((ext) => lower.endsWith(ext));
 }
@@ -1109,6 +1036,7 @@ function extractPackageFromUrl(url) {
 */
 const FETCH_TIMEOUT_MS = 6e4;
 const MAX_FETCH_RETRIES = 3;
+const MAX_CONSECUTIVE_FAILURES = 10;
 const REACT_TYPES_VERSION = "18.3.12";
 const REACT_DOM_TYPES_VERSION = "18.3.1";
 const CORE_LIBRARIES = ["framer-motion", "framer"];
@@ -1265,7 +1193,6 @@ var Installer = class {
 			return;
 		}
 		if (/node_modules\/@types\/[^/]+\/index\.d\.ts$/.exec(normalized)) await this.ensureTypesPackageJson(normalized);
-		if (normalized.includes("node_modules/@types/react/index.d.ts")) await this.patchReactTypes(destination);
 	}
 	async ensureTypesPackageJson(normalizedPath) {
 		const pkgMatch = /node_modules\/(@types\/[^/]+)\//.exec(normalizedPath);
@@ -1285,17 +1212,6 @@ var Installer = class {
 			await fs.writeFile(pkgJsonPath, JSON.stringify(pkg, null, 2));
 		} catch {}
 	}
-	async patchReactTypes(destination) {
-		try {
-			let content = await fs.readFile(destination, "utf-8");
-			if (content.includes("function useRef<T = undefined>()")) return;
-			const overloadPattern = /function useRef<T>\(initialValue: T \| undefined\): RefObject<T \| undefined>;/;
-			if (!content.includes("function useRef<T>(initialValue: T | undefined)")) return;
-			content = content.replace(overloadPattern, `function useRef<T>(initialValue: T | undefined): RefObject<T | undefined>;
-    function useRef<T = undefined>(): MutableRefObject<T | undefined>;`);
-			await fs.writeFile(destination, content, "utf-8");
-		} catch {}
-	}
 	async ensureTsConfig() {
 		const tsconfigPath = path.join(this.projectDir, "tsconfig.json");
 		try {
@@ -1438,6 +1354,20 @@ function fixExportTypes(value) {
 	if ((value.import ?? value.require) && !value.types) value.types = (value.import ?? value.require)?.replace(/\.js$/, ".d.ts").replace(/\.cjs$/, ".d.cts");
 	return value;
 }
+/** Tracks consecutive network failures across all fetches */
+let consecutiveFailures = 0;
+/** Reset failure counter on successful fetch */
+function resetFailureCounter() {
+	consecutiveFailures = 0;
+}
+/** Check if we should give up due to persistent network issues */
+function checkFatalFailure(url) {
+	consecutiveFailures++;
+	if (consecutiveFailures >= MAX_CONSECUTIVE_FAILURES) {
+		error(`Network unavailable - ${MAX_CONSECUTIVE_FAILURES} fetch failures.\n  Check your internet connection and try again.\n  Last failed URL: ${url}`);
+		process.exit(1);
+	}
+}
 async function fetchWithRetry(url, init, retries = MAX_FETCH_RETRIES) {
 	let urlString;
 	if (typeof url === "string") urlString = url;
@@ -1454,11 +1384,13 @@ async function fetchWithRetry(url, init, retries = MAX_FETCH_RETRIES) {
 				signal: controller.signal
 			});
 			clearTimeout(timeout);
+			resetFailureCounter();
 			return response;
 		} catch (err) {
 			clearTimeout(timeout);
 			const error$1 = err;
 			const isRetryable = error$1.cause?.code === "ECONNRESET" || error$1.cause?.code === "ETIMEDOUT" || error$1.cause?.code === "UND_ERR_CONNECT_TIMEOUT" || error$1.message.includes("timeout");
+			if (isRetryable) checkFatalFailure(urlString);
 			if (attempt < retries && isRetryable) {
 				const delay = attempt * 1e3;
 				warn(`Fetch failed (${error$1.cause?.code ?? error$1.message}) for ${urlString}, retrying in ${delay}ms...`);
@@ -1473,148 +1405,14 @@ async function fetchWithRetry(url, init, retries = MAX_FETCH_RETRIES) {
 }
 
 //#endregion
-//#region src/utils/hash-tracker.ts
-/**
-* Hash tracking utilities for echo prevention
-*
-* The hash tracker prevents echo loops by remembering content hashes
-* and skipping watcher events for files we just wrote.
-*/
-/**
-* Creates a hash tracker instance for echo prevention
-*/
-function createHashTracker() {
-	const hashes = /* @__PURE__ */ new Map();
-	const pendingDeletes = /* @__PURE__ */ new Map();
-	return {
-		remember(filePath, content) {
-			const hash = hashContent(content);
-			hashes.set(filePath, hash);
-		},
-		shouldSkip(filePath, content) {
-			const currentHash = hashContent(content);
-			return hashes.get(filePath) === currentHash;
-		},
-		forget(filePath) {
-			hashes.delete(filePath);
-		},
-		clear() {
-			hashes.clear();
-		},
-		markDelete(filePath) {
-			const existingTimer = pendingDeletes.get(filePath);
-			if (existingTimer) clearTimeout(existingTimer);
-			const timeout = setTimeout(() => {
-				pendingDeletes.delete(filePath);
-			}, 5e3);
-			pendingDeletes.set(filePath, timeout);
-		},
-		shouldSkipDelete(filePath) {
-			return pendingDeletes.has(filePath);
-		},
-		clearDelete(filePath) {
-			const timeout = pendingDeletes.get(filePath);
-			if (timeout) clearTimeout(timeout);
-			pendingDeletes.delete(filePath);
-		}
-	};
-}
-/**
-* Computes a SHA256 hash of file content for comparison
-*/
-function hashContent(content) {
-	return createHash("sha256").update(content).digest("hex");
-}
-
-//#endregion
-//#region src/utils/file-metadata-cache.ts
-var FileMetadataCache = class {
-	metadata = /* @__PURE__ */ new Map();
-	persisted = /* @__PURE__ */ new Map();
-	projectDir = null;
-	initialized = false;
-	pendingPersist = null;
-	async initialize(projectDir) {
-		if (this.initialized && this.projectDir === projectDir) return;
-		this.projectDir = projectDir;
-		const loaded = await loadPersistedState(projectDir);
-		this.persisted = loaded;
-		this.metadata = /* @__PURE__ */ new Map();
-		for (const [fileName, state] of loaded.entries()) this.metadata.set(fileName, {
-			localHash: state.contentHash,
-			lastSyncedHash: state.contentHash,
-			lastRemoteTimestamp: state.timestamp
-		});
-		this.initialized = true;
-	}
-	get(fileName) {
-		return this.metadata.get(fileName);
-	}
-	has(fileName) {
-		return this.metadata.has(fileName);
-	}
-	size() {
-		return this.metadata.size;
-	}
-	getPersistedState() {
-		return this.persisted;
-	}
-	recordRemoteWrite(fileName, content, remoteModifiedAt) {
-		const contentHash = hashFileContent(content);
-		this.metadata.set(fileName, {
-			localHash: contentHash,
-			lastSyncedHash: contentHash,
-			lastRemoteTimestamp: remoteModifiedAt
-		});
-		this.persisted.set(fileName, {
-			contentHash,
-			timestamp: remoteModifiedAt
-		});
-		this.schedulePersist();
-	}
-	recordSyncedSnapshot(fileName, contentHash, remoteModifiedAt) {
-		this.metadata.set(fileName, {
-			localHash: contentHash,
-			lastSyncedHash: contentHash,
-			lastRemoteTimestamp: remoteModifiedAt
-		});
-		this.persisted.set(fileName, {
-			contentHash,
-			timestamp: remoteModifiedAt
-		});
-		this.schedulePersist();
-	}
-	recordDelete(fileName) {
-		this.metadata.delete(fileName);
-		this.persisted.delete(fileName);
-		this.schedulePersist();
-	}
-	async flush() {
-		if (this.pendingPersist) await this.pendingPersist;
-	}
-	schedulePersist() {
-		const projectDir = this.projectDir;
-		if (!projectDir) return;
-		this.pendingPersist ??= (async () => {
-			try {
-				await Promise.resolve();
-				await savePersistedState(projectDir, this.persisted);
-			} finally {
-				this.pendingPersist = null;
-			}
-		})();
-	}
-};
-
-//#endregion
-//#region src/helpers/user-actions.ts
+//#region src/helpers/plugin-prompts.ts
 var PluginDisconnectedError = class extends Error {
 	constructor() {
 		super("Plugin disconnected");
 		this.name = "PluginDisconnectedError";
 	}
 };
-var UserActionCoordinator = class {
+var PluginUserPromptCoordinator = class {
 	pendingActions = /* @__PURE__ */ new Map();
 	/**
 	* Register a pending action and return a typed promise
@@ -1744,6 +1542,208 @@ function validateIncomingChange(fileMeta, currentMode) {
 	};
 }
 
+//#endregion
+//#region src/helpers/watcher.ts
+/**
+* File watcher helper
+*
+* Wrapper around chokidar that normalizes file paths and filters to ts, tsx, js, json.
+*/
+/**
+* Initializes a file watcher for the given directory
+*/
+function initWatcher(filesDir) {
+	const handlers = [];
+	const watcher = chokidar.watch(filesDir, {
+		ignored: /(^|[/\\])\.\./,
+		persistent: true,
+		ignoreInitial: false
+	});
+	debug(`Watching directory: ${filesDir}`);
+	const emitEvent = async (kind, absolutePath) => {
+		if (!isSupportedExtension(absolutePath)) return;
+		const rawRelativePath = normalizePath(getRelativePath(filesDir, absolutePath));
+		const relativePath = sanitizeFilePath(rawRelativePath, false).path;
+		let effectiveAbsolutePath = absolutePath;
+		if (relativePath !== rawRelativePath && kind === "add") {
+			const newAbsolutePath = path.join(filesDir, relativePath);
+			try {
+				await fs.mkdir(path.dirname(newAbsolutePath), { recursive: true });
+				await fs.rename(absolutePath, newAbsolutePath);
+				debug(`Renamed ${rawRelativePath} -> ${relativePath}`);
+				effectiveAbsolutePath = newAbsolutePath;
+			} catch (err) {
+				warn(`Failed to rename ${rawRelativePath}`, err);
+			}
+		}
+		let content;
+		if (kind !== "delete") try {
+			content = await fs.readFile(effectiveAbsolutePath, "utf-8");
+		} catch (err) {
+			debug(`Failed to read file ${relativePath}:`, err);
+			return;
+		}
+		const event = {
+			kind,
+			relativePath,
+			content
+		};
+		debug(`Watcher event: ${kind} ${relativePath}`);
+		for (const handler of handlers) handler(event);
+	};
+	watcher.on("add", (filePath) => {
+		emitEvent("add", filePath);
+	});
+	watcher.on("change", (filePath) => {
+		emitEvent("change", filePath);
+	});
+	watcher.on("unlink", (filePath) => {
+		emitEvent("delete", filePath);
+	});
+	return {
+		on(_event, handler) {
+			handlers.push(handler);
+		},
+		async close() {
+			await watcher.close();
+		}
+	};
+}
+
+//#endregion
+//#region src/utils/file-metadata-cache.ts
+var FileMetadataCache = class {
+	metadata = /* @__PURE__ */ new Map();
+	persisted = /* @__PURE__ */ new Map();
+	projectDir = null;
+	initialized = false;
+	pendingPersist = null;
+	async initialize(projectDir) {
+		if (this.initialized && this.projectDir === projectDir) return;
+		this.projectDir = projectDir;
+		const loaded = await loadPersistedState(projectDir);
+		this.persisted = loaded;
+		this.metadata = /* @__PURE__ */ new Map();
+		for (const [fileName, state] of loaded.entries()) this.metadata.set(fileName, {
+			localHash: state.contentHash,
+			lastSyncedHash: state.contentHash,
+			lastRemoteTimestamp: state.timestamp
+		});
+		this.initialized = true;
+	}
+	get(fileName) {
+		return this.metadata.get(fileName);
+	}
+	has(fileName) {
+		return this.metadata.has(fileName);
+	}
+	size() {
+		return this.metadata.size;
+	}
+	getPersistedState() {
+		return this.persisted;
+	}
+	recordRemoteWrite(fileName, content, remoteModifiedAt) {
+		const contentHash = hashFileContent(content);
+		this.metadata.set(fileName, {
+			localHash: contentHash,
+			lastSyncedHash: contentHash,
+			lastRemoteTimestamp: remoteModifiedAt
+		});
+		this.persisted.set(fileName, {
+			contentHash,
+			timestamp: remoteModifiedAt
+		});
+		this.schedulePersist();
+	}
+	recordSyncedSnapshot(fileName, contentHash, remoteModifiedAt) {
+		this.metadata.set(fileName, {
+			localHash: contentHash,
+			lastSyncedHash: contentHash,
+			lastRemoteTimestamp: remoteModifiedAt
+		});
+		this.persisted.set(fileName, {
+			contentHash,
+			timestamp: remoteModifiedAt
+		});
+		this.schedulePersist();
+	}
+	recordDelete(fileName) {
+		this.metadata.delete(fileName);
+		this.persisted.delete(fileName);
+		this.schedulePersist();
+	}
+	async flush() {
+		if (this.pendingPersist) await this.pendingPersist;
+	}
+	schedulePersist() {
+		const projectDir = this.projectDir;
+		if (!projectDir) return;
+		this.pendingPersist ??= (async () => {
+			try {
+				await Promise.resolve();
+				await savePersistedState(projectDir, this.persisted);
+			} finally {
+				this.pendingPersist = null;
+			}
+		})();
+	}
+};
+
+//#endregion
+//#region src/utils/hash-tracker.ts
+/**
+* Hash tracking utilities for echo prevention
+*
+* The hash tracker prevents echo loops by remembering content hashes
+* and skipping watcher events for files we just wrote.
+*/
+/**
+* Creates a hash tracker instance for echo prevention
+*/
+function createHashTracker() {
+	const hashes = /* @__PURE__ */ new Map();
+	const pendingDeletes = /* @__PURE__ */ new Map();
+	return {
+		remember(filePath, content) {
+			const hash = hashContent(content);
+			hashes.set(filePath, hash);
+		},
+		shouldSkip(filePath, content) {
+			const currentHash = hashContent(content);
+			return hashes.get(filePath) === currentHash;
+		},
+		forget(filePath) {
+			hashes.delete(filePath);
+		},
+		clear() {
+			hashes.clear();
+		},
+		markDelete(filePath) {
+			const existingTimer = pendingDeletes.get(filePath);
+			if (existingTimer) clearTimeout(existingTimer);
+			const timeout = setTimeout(() => {
+				pendingDeletes.delete(filePath);
+			}, 5e3);
+			pendingDeletes.set(filePath, timeout);
+		},
+		shouldSkipDelete(filePath) {
+			return pendingDeletes.has(filePath);
+		},
+		clearDelete(filePath) {
+			const timeout = pendingDeletes.get(filePath);
+			if (timeout) clearTimeout(timeout);
+			pendingDeletes.delete(filePath);
+		}
+	};
+}
+/**
+* Computes a SHA256 hash of file content for comparison
+*/
+function hashContent(content) {
+	return createHash("sha256").update(content).digest("hex");
+}
+
 //#endregion
 //#region src/utils/project.ts
 function toPackageName(name) {
@@ -1810,12 +1810,6 @@ async function matchesProject(packageJsonPath, projectHash) {
 
 //#endregion
 //#region src/controller.ts
-/**
-* CLI Controller
-*
-* All runtime state and orchestrates the sync lifecycle.
-* Helpers should provide data, nevering hold control or callbacks.
-*/
 /** Log helper */
 function log(level, message) {
 	return {
@@ -1898,9 +1892,9 @@ function transition(state, event) {
 				state,
 				effects
 			};
-		case "FILE_LIST":
+		case "REMOTE_FILE_LIST":
 			if (state.mode !== "handshaking") {
-				effects.push(log("warn", `Received FILE_LIST in mode ${state.mode}, ignoring`));
+				effects.push(log("warn", `Received REMOTE_FILE_LIST in mode ${state.mode}, ignoring`));
 				return {
 					state,
 					effects
@@ -1977,7 +1971,7 @@ function transition(state, event) {
 				effects
 			};
 		}
-		case "FILE_CHANGE": {
+		case "REMOTE_FILE_CHANGE": {
 			const validation = validateIncomingChange(event.fileMeta, state.mode);
 			if (validation.action === "queue") {
 				effects.push(log("debug", `Queueing file change: ${event.file.name} (${validation.reason})`));
@@ -2413,7 +2407,7 @@ async function start(config) {
 		pendingOperations: /* @__PURE__ */ new Map(),
 		nextOperationId: 1
 	};
-	const userActions = new UserActionCoordinator();
+	const userActions = new PluginUserPromptCoordinator();
 	async function processEvent(event) {
 		const socketState = syncState.socket?.readyState;
 		debug(`[STATE] Processing event: ${event.type} (mode: ${syncState.mode}, socket: ${socketState ?? "none"})`);
@@ -2478,13 +2472,13 @@ async function start(config) {
 			case "file-list":
 				debug(`Received file list: ${message.files.length} files`);
 				event = {
-					type: "FILE_LIST",
+					type: "REMOTE_FILE_LIST",
 					files: message.files
 				};
 				break;
 			case "file-change":
 				event = {
-					type: "FILE_CHANGE",
+					type: "REMOTE_FILE_CHANGE",
 					file: {
 						name: message.fileName,
 						content: message.content,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framer-code-link",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "description": "CLI tool for syncing Framer code components - controller-centric architecture",
   "main": "dist/index.mjs",
   "type": "module",