@marver-design/marver 0.2.0 → 0.2.2

package/dist/manifest-CHmKAAtG.mjs

@@ -0,0 +1,298 @@
+import { existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync } from "node:fs";
+import { join, relative, sep } from "node:path";
+import { pathToFileURL } from "node:url";
+import { createHash } from "node:crypto";
+//#region src/server/detect.ts
+function readJson(file) {
+	try {
+		return JSON.parse(stripJsonComments(readFileSync(file, "utf8")));
+	} catch {
+		return null;
+	}
+}
+function stripJsonComments(s) {
+	let out = "", inStr = false, inLine = false, inBlock = false;
+	for (let i = 0; i < s.length; i++) {
+		const c = s[i], n = s[i + 1];
+		if (inLine) {
+			if (c === "\n") {
+				inLine = false;
+				out += c;
+			}
+			continue;
+		}
+		if (inBlock) {
+			if (c === "*" && n === "/") {
+				inBlock = false;
+				i++;
+			}
+			continue;
+		}
+		if (inStr) {
+			out += c;
+			if (c === "\\") {
+				out += n ?? "";
+				i++;
+			} else if (c === "\"") inStr = false;
+			continue;
+		}
+		if (c === "\"") {
+			inStr = true;
+			out += c;
+			continue;
+		}
+		if (c === "/" && n === "/") {
+			inLine = true;
+			i++;
+			continue;
+		}
+		if (c === "/" && n === "*") {
+			inBlock = true;
+			i++;
+			continue;
+		}
+		out += c;
+	}
+	let res = "", inS = false;
+	for (let i = 0; i < out.length; i++) {
+		const c = out[i];
+		if (inS) {
+			res += c;
+			if (c === "\\") {
+				res += out[i + 1] ?? "";
+				i++;
+			} else if (c === "\"") inS = false;
+			continue;
+		}
+		if (c === "\"") {
+			inS = true;
+			res += c;
+			continue;
+		}
+		if (c === ",") {
+			let j = i + 1;
+			while (j < out.length && /\s/.test(out[j])) j++;
+			if (out[j] === "}" || out[j] === "]") continue;
+		}
+		res += c;
+	}
+	return res;
+}
+function detectHost(root) {
+	const pkg = readJson(join(root, "package.json")) ?? {};
+	const deps = {
+		...pkg.dependencies,
+		...pkg.devDependencies
+	};
+	const twRange = deps["tailwindcss"];
+	const tailwind = !twRange ? null : /(^|[^\d])4\./.test(twRange) || twRange.startsWith("^4") || twRange.startsWith("~4") ? 4 : 3;
+	const router = deps["next"] ? "next" : deps["react-router"] || deps["react-router-dom"] ? "react-router" : null;
+	const routerPkg = deps["react-router-dom"] ? "react-router-dom" : "react-router";
+	const toaster = deps["sonner"] ? "sonner" : deps["react-hot-toast"] ? "react-hot-toast" : null;
+	let shadcn = null;
+	const comp = readJson(join(root, "components.json"));
+	if (comp?.tailwind?.css) shadcn = {
+		themeCss: comp.tailwind.css,
+		uiAlias: comp.aliases?.ui ?? "@/components/ui"
+	};
+	const themeCss = shadcn?.themeCss && existsSync(join(root, shadcn.themeCss)) ? shadcn.themeCss : firstExisting(root, [
+		"src/index.css",
+		"src/styles/theme.css",
+		"src/styles/globals.css",
+		"src/app/globals.css",
+		"app/globals.css",
+		"src/globals.css",
+		"src/style.css",
+		"styles/globals.css"
+	]);
+	const ts = readJson(join(root, "tsconfig.json"));
+	const include = ts?.include;
+	const exclude = ts?.exclude ?? [];
+	const sweeps = ts != null && !exclude.some((e) => e === "design" || e.startsWith("design/")) && (!include || include.some((i) => i === "." || i.startsWith("**") || i.startsWith("design")));
+	return {
+		tailwind,
+		router,
+		routerPkg,
+		toaster,
+		shadcn,
+		themeCss,
+		tsconfigSweepsDesign: !!sweeps
+	};
+}
+function firstExisting(root, candidates) {
+	for (const c of candidates) if (existsSync(join(root, c))) return c;
+	return null;
+}
+//#endregion
+//#region src/server/config.ts
+const DEFAULTS = {
+	mode: "studio",
+	theme: null,
+	viewports: {
+		mobile: {
+			width: 390,
+			height: 844
+		},
+		tablet: {
+			width: 768,
+			height: 1024
+		},
+		laptop: {
+			width: 1280,
+			height: 800
+		},
+		monitor: {
+			width: 1920,
+			height: 1080
+		}
+	},
+	themes: ["light", "dark"],
+	port: 5199,
+	zoomSpeed: 1,
+	share: { branding: true }
+};
+/** Load design/config.ts via native TS import (Node >= 22.18). Missing or broken fields fall back to defaults. */
+async function loadConfig(root) {
+	const file = join(root, "design", "config.ts");
+	if (!existsSync(file)) return { ...DEFAULTS };
+	try {
+		const user = (await import(`${pathToFileURL(file).href}?t=${Date.now()}`)).default ?? {};
+		return {
+			...DEFAULTS,
+			...user,
+			viewports: validViewports(user.viewports) ?? DEFAULTS.viewports,
+			themes: Array.isArray(user.themes) && user.themes.length ? user.themes.map(String) : DEFAULTS.themes,
+			port: validPort(user.port) ?? DEFAULTS.port,
+			zoomSpeed: validZoom(user.zoomSpeed) ?? DEFAULTS.zoomSpeed,
+			share: {
+				branding: user.share?.branding !== false,
+				name: typeof user.share?.name === "string" ? user.share.name : void 0,
+				logo: typeof user.share?.logo === "string" ? user.share.logo : void 0
+			}
+		};
+	} catch (err) {
+		console.error(`[marver] design/config.ts failed to load, using defaults:\n  ${err.message}`);
+		return { ...DEFAULTS };
+	}
+}
+const validDim = (n) => typeof n === "number" && Number.isFinite(n) && n >= 1 && n <= 2e4;
+function validPort(n) {
+	return typeof n === "number" && Number.isInteger(n) && n > 0 && n < 65536 ? n : null;
+}
+function validZoom(n) {
+	return typeof n === "number" && Number.isFinite(n) && n >= .1 && n <= 10 ? n : null;
+}
+function validViewports(v) {
+	if (!v || typeof v !== "object") return null;
+	const out = {};
+	for (const [k, val] of Object.entries(v)) {
+		const vp = val;
+		if (validDim(vp?.width) && validDim(vp?.height)) out[k] = {
+			width: Math.round(vp.width),
+			height: Math.round(vp.height)
+		};
+	}
+	return Object.keys(out).length ? out : null;
+}
+//#endregion
+//#region src/server/manifest.ts
+const FRAME_EXT = /\.(tsx|jsx|html)$/;
+const RESERVED_SCENES = /* @__PURE__ */ new Set(["components", "screens"]);
+/** Extract `export const meta = {...}` with literal string values only. Anything else is silently omitted (spec §6). */
+function extractMeta(src) {
+	const m = /export\s+const\s+meta\s*=\s*\{([\s\S]*?)\}/.exec(src);
+	if (!m) return {};
+	const body = m[1];
+	const pick = (key) => {
+		const r = new RegExp(`${key}\\s*:\\s*(['"\`])([^'"\`]*)\\1`).exec(body);
+		return r ? r[2] : void 0;
+	};
+	const out = {};
+	const title = pick("title");
+	if (title) out.title = title;
+	const viewport = pick("viewport");
+	if (viewport) out.viewport = viewport;
+	const theme = pick("theme");
+	if (theme) out.theme = theme;
+	return out;
+}
+/** id = path relative to design/, extension dropped, `scenes/` prefix dropped. Always `/`-separated. */
+function toFrameId(designRelPath) {
+	const noExt = designRelPath.split(sep).join("/").replace(FRAME_EXT, "");
+	return noExt.startsWith("scenes/") ? noExt.slice(7) : noExt;
+}
+function walk(dir, out = []) {
+	if (!existsSync(dir)) return out;
+	for (const e of readdirSync(dir, { withFileTypes: true })) {
+		if (e.name.startsWith(".")) continue;
+		const p = join(dir, e.name);
+		if (e.isDirectory()) walk(p, out);
+		else out.push(p);
+	}
+	return out;
+}
+function scanFrames(root) {
+	const design = join(root, "design");
+	const frames = [];
+	for (const base of ["scenes", "components"]) for (const abs of walk(join(design, base))) {
+		const name = abs.split(sep).pop();
+		if (name.startsWith("_") || !FRAME_EXT.test(name)) continue;
+		const rel = relative(design, abs).split(sep).join("/");
+		const id = toFrameId(rel);
+		const scene = id.includes("/") ? id.split("/")[0] : "";
+		if (base === "scenes" && RESERVED_SCENES.has(scene)) {
+			console.error(`[marver] scene "${scene}" is a reserved name - "${rel}" skipped. Rename the scene.`);
+			continue;
+		}
+		const kind = name.endsWith(".html") ? "html" : "tsx";
+		const entry = {
+			id,
+			file: `design/${rel}`,
+			kind,
+			scene
+		};
+		if (kind === "tsx") {
+			const meta = extractMeta(readFileSync(abs, "utf8"));
+			if (meta.title) entry.title = meta.title;
+			if (meta.viewport) entry.viewport = meta.viewport;
+			if (meta.theme) entry.theme = meta.theme;
+		}
+		frames.push(entry);
+	}
+	const extRank = (file) => file.endsWith(".tsx") ? 0 : file.endsWith(".jsx") ? 1 : 2;
+	frames.sort((a, b) => a.id.localeCompare(b.id) || extRank(a.file) - extRank(b.file) || a.file.localeCompare(b.file));
+	const seen = /* @__PURE__ */ new Map();
+	const deduped = frames.filter((f) => {
+		const prev = seen.get(f.id);
+		if (prev) {
+			console.error(`[marver] duplicate frame id "${f.id}" (${prev} vs ${f.file}) - keeping ${prev}.`);
+			return false;
+		}
+		seen.set(f.id, f.file);
+		return true;
+	});
+	frames.length = 0;
+	frames.push(...deduped);
+	const sceneCounts = /* @__PURE__ */ new Map();
+	for (const f of frames) sceneCounts.set(f.scene, (sceneCounts.get(f.scene) ?? 0) + 1);
+	return {
+		frames,
+		scenes: [...sceneCounts.entries()].map(([name, n]) => ({
+			name,
+			frames: n
+		})).sort((a, b) => a.name.localeCompare(b.name))
+	};
+}
+/** Write design/manifest.json only when content changed. Returns the manifest either way. */
+function writeManifest(root, manifest) {
+	const file = join(root, "design", "manifest.json");
+	const next = JSON.stringify(manifest, null, 2) + "\n";
+	const prev = existsSync(file) ? readFileSync(file, "utf8") : "";
+	if (hash(prev) === hash(next)) return false;
+	mkdirSync(join(root, "design"), { recursive: true });
+	writeFileSync(file, next);
+	return true;
+}
+const hash = (s) => createHash("sha256").update(s).digest("hex");
+//#endregion
+export { loadConfig as a, DEFAULTS as i, scanFrames as n, detectHost as o, writeManifest as r, hash as t };

package/dist/{plugin-DB5t2WUl.mjs → plugin-DiDJA9n-.mjs}

@@ -1,107 +1,9 @@
-import { r as ROUTE } from "./cli.mjs";
-import { join, relative, resolve, sep } from "node:path";
+import { n as PKG, r as ROUTE, t as NAME } from "./cli.mjs";
+import { n as scanFrames, r as writeManifest, t as hash } from "./manifest-CHmKAAtG.mjs";
 import { copyFileSync, existsSync, mkdirSync, readFileSync, readdirSync, realpathSync, renameSync, rmSync, watch, writeFileSync } from "node:fs";
-import { createHash, randomBytes } from "node:crypto";
-//#region src/server/manifest.ts
-const FRAME_EXT = /\.(tsx|jsx|html)$/;
-const RESERVED_SCENES = /* @__PURE__ */ new Set(["components", "screens"]);
-/** Extract `export const meta = {...}` with literal string values only. Anything else is silently omitted (spec §6). */
-function extractMeta(src) {
-	const m = /export\s+const\s+meta\s*=\s*\{([\s\S]*?)\}/.exec(src);
-	if (!m) return {};
-	const body = m[1];
-	const pick = (key) => {
-		const r = new RegExp(`${key}\\s*:\\s*(['"\`])([^'"\`]*)\\1`).exec(body);
-		return r ? r[2] : void 0;
-	};
-	const out = {};
-	const title = pick("title");
-	if (title) out.title = title;
-	const viewport = pick("viewport");
-	if (viewport) out.viewport = viewport;
-	const theme = pick("theme");
-	if (theme) out.theme = theme;
-	return out;
-}
-/** id = path relative to design/, extension dropped, `scenes/` prefix dropped. Always `/`-separated. */
-function toFrameId(designRelPath) {
-	const noExt = designRelPath.split(sep).join("/").replace(FRAME_EXT, "");
-	return noExt.startsWith("scenes/") ? noExt.slice(7) : noExt;
-}
-function walk(dir, out = []) {
-	if (!existsSync(dir)) return out;
-	for (const e of readdirSync(dir, { withFileTypes: true })) {
-		if (e.name.startsWith(".")) continue;
-		const p = join(dir, e.name);
-		if (e.isDirectory()) walk(p, out);
-		else out.push(p);
-	}
-	return out;
-}
-function scanFrames(root) {
-	const design = join(root, "design");
-	const frames = [];
-	for (const base of ["scenes", "components"]) for (const abs of walk(join(design, base))) {
-		const name = abs.split(sep).pop();
-		if (name.startsWith("_") || !FRAME_EXT.test(name)) continue;
-		const rel = relative(design, abs).split(sep).join("/");
-		const id = toFrameId(rel);
-		const scene = id.includes("/") ? id.split("/")[0] : "";
-		if (base === "scenes" && RESERVED_SCENES.has(scene)) {
-			console.error(`[marver] scene "${scene}" is a reserved name - "${rel}" skipped. Rename the scene.`);
-			continue;
-		}
-		const kind = name.endsWith(".html") ? "html" : "tsx";
-		const entry = {
-			id,
-			file: `design/${rel}`,
-			kind,
-			scene
-		};
-		if (kind === "tsx") {
-			const meta = extractMeta(readFileSync(abs, "utf8"));
-			if (meta.title) entry.title = meta.title;
-			if (meta.viewport) entry.viewport = meta.viewport;
-			if (meta.theme) entry.theme = meta.theme;
-		}
-		frames.push(entry);
-	}
-	const extRank = (file) => file.endsWith(".tsx") ? 0 : file.endsWith(".jsx") ? 1 : 2;
-	frames.sort((a, b) => a.id.localeCompare(b.id) || extRank(a.file) - extRank(b.file) || a.file.localeCompare(b.file));
-	const seen = /* @__PURE__ */ new Map();
-	const deduped = frames.filter((f) => {
-		const prev = seen.get(f.id);
-		if (prev) {
-			console.error(`[marver] duplicate frame id "${f.id}" (${prev} vs ${f.file}) - keeping ${prev}.`);
-			return false;
-		}
-		seen.set(f.id, f.file);
-		return true;
-	});
-	frames.length = 0;
-	frames.push(...deduped);
-	const sceneCounts = /* @__PURE__ */ new Map();
-	for (const f of frames) sceneCounts.set(f.scene, (sceneCounts.get(f.scene) ?? 0) + 1);
-	return {
-		frames,
-		scenes: [...sceneCounts.entries()].map(([name, n]) => ({
-			name,
-			frames: n
-		})).sort((a, b) => a.name.localeCompare(b.name))
-	};
-}
-/** Write design/manifest.json only when content changed. Returns the manifest either way. */
-function writeManifest(root, manifest) {
-	const file = join(root, "design", "manifest.json");
-	const next = JSON.stringify(manifest, null, 2) + "\n";
-	const prev = existsSync(file) ? readFileSync(file, "utf8") : "";
-	if (hash(prev) === hash(next)) return false;
-	mkdirSync(join(root, "design"), { recursive: true });
-	writeFileSync(file, next);
-	return true;
-}
-const hash = (s) => createHash("sha256").update(s).digest("hex");
-//#endregion
+import { dirname, join, resolve, sep } from "node:path";
+import { fileURLToPath } from "node:url";
+import { randomBytes } from "node:crypto";
 //#region src/server/api.ts
 const BOARD_NAME = /^[a-z0-9][a-z0-9-]*$/;
 const BODY_LIMIT = 1e6;
@@ -188,7 +90,7 @@ function apiMiddleware(root) {
 				const p = boardPath(boardMatch[1]);
 				if (!p) return json(res, 400, { error: "invalid board name" });
 				if (req.method === "GET") {
-					if (!existsSync(p)) return json(res, 404, { error: "not found" });
+					if (!existsSync(p)) return json(res, 200, { board: null });
 					const content = readFileSync(p, "utf8");
 					try {
 						return json(res, 200, {
@@ -275,6 +177,7 @@ function routesMiddleware(server, clientDir) {
 		try {
 			const html = await server.transformIndexHtml(req.url ?? "/", page(dir));
 			res.setHeader("content-type", "text/html");
+			res.setHeader("cache-control", "no-store");
 			res.end(html);
 		} catch (err) {
 			res.statusCode = 500;
@@ -283,6 +186,73 @@ function routesMiddleware(server, clientDir) {
 	};
 }
 //#endregion
+//#region src/server/update.ts
+/**
+* Update discovery - dev only, and deliberately boring about privacy: one anonymous
+* registry metadata GET per day (the same request `npm view` makes), cached in
+* design/.local/, nothing sent beyond the request itself. Offline, slow, or
+* firewalled registries degrade to silence. MARVER_NO_UPDATE_CHECK=1 disables it.
+* Published bundles never check anything - viewers are not the owner.
+*/
+const TTL = 864e5;
+/** Installed version: walk up from this module to the package's own package.json
+*  (one level from dist/, two from src/server/ - the walk covers both). */
+function installedVersion() {
+	let dir = dirname(fileURLToPath(import.meta.url));
+	for (let i = 0; i < 4; i++) {
+		try {
+			const pkg = JSON.parse(readFileSync(join(dir, "package.json"), "utf8"));
+			if (pkg.name === "@marver-design/marver") return pkg.version;
+		} catch {}
+		dir = dirname(dir);
+	}
+	return null;
+}
+/** Strictly-newer numeric compare; anything non-numeric (prerelease tags) compares false. */
+const newer = (a, b) => {
+	const pa = a.split(".").map((n) => parseInt(n, 10));
+	const pb = b.split(".").map((n) => parseInt(n, 10));
+	for (let i = 0; i < 3; i++) {
+		const x = pa[i] ?? 0, y = pb[i] ?? 0;
+		if (!Number.isFinite(x) || !Number.isFinite(y)) return false;
+		if (x !== y) return x > y;
+	}
+	return false;
+};
+/** The latest published version when strictly newer than installed, else null. Never throws. */
+async function checkUpdate(root) {
+	if (process.env.MARVER_NO_UPDATE_CHECK) return null;
+	const current = installedVersion();
+	if (!current) return null;
+	const latest = await latestVersion(root);
+	return latest && newer(latest, current) ? latest : null;
+}
+async function latestVersion(root) {
+	const cacheFile = join(root, "design", ".local", "update-check.json");
+	const wellFormed = (v) => typeof v === "string" && /^\d+\.\d+\.\d+$/.test(v);
+	try {
+		const c = JSON.parse(readFileSync(cacheFile, "utf8"));
+		const age = Date.now() - c.checkedAt;
+		if (typeof c.checkedAt === "number" && age >= 0 && age < TTL) return wellFormed(c.latest) ? c.latest : null;
+	} catch {}
+	let latest = null;
+	try {
+		const res = await fetch(`https://registry.npmjs.org/${encodeURIComponent(PKG)}/latest`, { signal: AbortSignal.timeout(3e3) });
+		if (res.ok) {
+			const v = (await res.json())?.version;
+			if (wellFormed(v)) latest = v;
+		}
+	} catch {}
+	try {
+		mkdirSync(join(root, "design", ".local"), { recursive: true });
+		writeFileSync(cacheFile, JSON.stringify({
+			checkedAt: Date.now(),
+			latest
+		}) + "\n");
+	} catch {}
+	return latest;
+}
+//#endregion
 //#region src/server/plugin.ts
 const VIRTUAL_THEME = "virtual:sh-theme";
 const VIRTUAL_CONFIG = "virtual:sh-config";
@@ -306,15 +276,26 @@ function marverPlugin(ctx) {
 		},
 		load(id) {
 			if (id === "\0virtual:sh-theme.css") {
-				console.warn("[marver] no theme detected - frames render unstyled. Set `theme` in design/config.ts.");
+				console.warn("[marver] no theme detected - frames render unstyled. Create design/theme.css importing your app's stylesheet (or set `theme` in design/config.ts).");
 				return "/* marver: no theme configured */";
 			}
-			if (id === "\0virtual:sh-config") return `export default ${JSON.stringify({
-				viewports: config.viewports,
-				themes: config.themes,
-				zoomSpeed: config.zoomSpeed,
-				noTheme: themeFile() == null
-			})}`;
+			if (id === "\0virtual:sh-config") {
+				const setupPending = (() => {
+					try {
+						const s = readFileSync(join(root, "design", "instructions", "setup.md"), "utf8");
+						return s.startsWith("# Setup required") && s.includes("marver init");
+					} catch {
+						return false;
+					}
+				})();
+				return `export default ${JSON.stringify({
+					viewports: config.viewports,
+					themes: config.themes,
+					zoomSpeed: config.zoomSpeed,
+					noTheme: themeFile() == null,
+					setup: setupPending
+				})}`;
+			}
 			if (id === "\0virtual:sh-data") return "export default null";
 		},
 		/** HTML frames: inject theme + bridge into any design/**.html Vite serves.
@@ -354,6 +335,28 @@ function marverPlugin(ctx) {
 			if (hctx.modules.length === 0) return [];
 		},
 		configureServer(server) {
+			server.middlewares.use((req, res, next) => {
+				if (req.url && req.url.includes("/frame-host/registry.ts")) {
+					const orig = res.setHeader.bind(res);
+					res.setHeader = ((name, value) => orig(name, String(name).toLowerCase() === "cache-control" ? "no-cache" : value));
+				}
+				next();
+			});
+			const update = checkUpdate(root).catch(() => null);
+			update.then((latest) => {
+				if (latest) console.log(`\n  update: ${PKG} ${latest} is out (installed ${installedVersion() ?? "?"}) → npm i -D ${PKG}@latest && npx ${NAME} init\n`);
+			});
+			server.middlewares.use((req, res, next) => {
+				if (new URL(req.url ?? "/", "http://x").pathname !== `/__mv/api/update`) return next();
+				update.then((latest) => {
+					res.setHeader("content-type", "application/json");
+					res.setHeader("cache-control", "no-store");
+					res.end(JSON.stringify({
+						latest,
+						current: installedVersion()
+					}));
+				});
+			});
 			server.middlewares.use(apiMiddleware(root));
 			server.middlewares.use(routesMiddleware(server, clientDir));
 			const regen = debounce(() => {
@@ -362,8 +365,39 @@ function marverPlugin(ctx) {
 			}, 150);
 			const watched = [join(root, "design", "scenes"), join(root, "design", "components")];
 			const inScope = (file) => watched.some((w) => file.startsWith(w));
-			server.watcher.on("add", (f) => inScope(f) && regen());
-			server.watcher.on("unlink", (f) => inScope(f) && regen());
+			const themeModules = () => {
+				const f = themeFile();
+				if (!f) return [];
+				const out = [];
+				const seen = /* @__PURE__ */ new Set();
+				const walk = (mod) => {
+					if (!mod || seen.has(mod)) return;
+					seen.add(mod);
+					out.push(mod);
+					for (const im of mod.clientImportedModules ?? mod.importedModules ?? []) if (String(im.id ?? "").split("?")[0].endsWith(".css")) walk(im);
+				};
+				for (const mod of server.moduleGraph.getModulesByFile(f) ?? []) walk(mod);
+				return out;
+			};
+			const pushTheme = debounce(() => {
+				for (const mod of themeModules()) server.reloadModule(mod).catch(() => {});
+			}, 150);
+			const rescanTheme = () => {
+				for (const mod of themeModules()) server.moduleGraph.invalidateModule(mod);
+				pushTheme();
+			};
+			server.watcher.on("add", (f) => {
+				if (inScope(f)) {
+					regen();
+					rescanTheme();
+				}
+			});
+			server.watcher.on("unlink", (f) => {
+				if (inScope(f)) {
+					regen();
+					rescanTheme();
+				}
+			});
 			server.watcher.on("change", (f) => inScope(f) && /\.(tsx|jsx)$/.test(f) && regen());
 			writeManifest(root, scanFrames(root));
 			const boardsDir = join(root, "design", "boards");
@@ -397,15 +431,18 @@ function debounce(fn, ms) {
 		t = setTimeout(() => fn(...a), ms);
 	});
 }
-/** Extra vite plugin when the host runs Tailwind v4: use their own @tailwindcss/vite. */
+/** Extra vite plugin when the host runs Tailwind v4. The host's own @tailwindcss/vite
+*  wins (version-matched to their tailwindcss); the fallback is marver's bundled copy -
+*  Next.js hosts use @tailwindcss/postcss and never have the vite plugin (the blessed
+*  stack would otherwise render every frame without its utility classes). */
 async function tailwind4Plugin(root) {
-	try {
-		const mod = await import(join(root, "node_modules", "@tailwindcss", "vite", "dist", "index.mjs"));
+	const factories = [() => import(join(root, "node_modules", "@tailwindcss", "vite", "dist", "index.mjs")), () => import("@tailwindcss/vite")];
+	for (const load of factories) try {
+		const mod = await load();
 		const result = (mod.default ?? mod)();
 		return Array.isArray(result) ? result : [result];
-	} catch {
-		return null;
-	}
+	} catch {}
+	return null;
 }
 /** Tailwind v3: inline PostCSS config extending the host's tailwind config with design/ globs. Host files untouched. */
 async function tailwind3Css(root) {
@@ -434,4 +471,4 @@ async function tailwind3Css(root) {
 	return null;
 }
 //#endregion
-export { scanFrames as i, tailwind3Css as n, tailwind4Plugin as r, marverPlugin as t };
+export { tailwind3Css as n, tailwind4Plugin as r, marverPlugin as t };

package/dist/{serve-BPNmWeJx.mjs → serve-BvbAbWeK.mjs}

@@ -1,6 +1,6 @@
 import { t as NAME } from "./cli.mjs";
-import { extname, isAbsolute, join, relative, resolve } from "node:path";
 import { existsSync, readFileSync, realpathSync } from "node:fs";
+import { extname, isAbsolute, join, relative, resolve } from "node:path";
 import { createHmac, randomBytes, scryptSync, timingSafeEqual } from "node:crypto";
 import { createServer } from "node:http";
 //#region src/server/serve.ts
@@ -115,6 +115,13 @@ function serve(root, portFlag) {
 		}
 	});
 	const port = portFlag ?? (Number(process.env.PORT) || 4199);
+	server.on("error", (err) => {
+		if (err.code === "EADDRINUSE") {
+			console.error(`[${NAME}] port ${port} is already in use - another \`${NAME} serve\` still running? Stop it, or pass --port <n>.`);
+			process.exit(1);
+		}
+		throw err;
+	});
 	server.listen(port, () => {
 		console.log(`\n  ${NAME} serving design/.dist → http://localhost:${port}/`);
 		console.log(verifier ? "  gate: ON (MARVER_PASSWORD set)\n" : "  gate: off - set MARVER_PASSWORD to require a password\n");

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@marver-design/marver",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "The agent-native design canvas. A design/ folder, one command, a canvas of live frames built from your repo's real components. The tool ships no AI - your coding agent is the designer.",
   "type": "module",
   "private": false,
   "license": "Apache-2.0",
   "bin": {
-    "marver": "./dist/cli.mjs"
+    "marver": "dist/cli.mjs"
   },
   "files": [
     "dist",
@@ -27,6 +27,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.0.0",
     "@vitejs/plugin-react": "^6.0.0",
     "cac": "^7.0.0",
     "react-zoom-pan-pinch": "^3.6.1",
@@ -56,4 +57,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}