@marver-design/marver 0.2.0

package/dist/config-DMBEpdEN.mjs

@@ -0,0 +1,132 @@
+import { join } from "node:path";
+import { existsSync, readFileSync } from "node:fs";
+import { pathToFileURL } from "node:url";
+//#region src/server/detect.ts
+function readJson(file) {
+	try {
+		return JSON.parse(stripJsonComments(readFileSync(file, "utf8")));
+	} catch {
+		return null;
+	}
+}
+function stripJsonComments(s) {
+	return s.replace(/\/\*[\s\S]*?\*\//g, "").replace(/(^|[^:])\/\/.*$/gm, "$1").replace(/,\s*([}\]])/g, "$1");
+}
+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 === "**/*" || 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
+export { loadConfig as n, detectHost as r, DEFAULTS as t };

package/dist/dev-BK4x3PBr.mjs

@@ -0,0 +1,76 @@
+import { n as PKG, t as NAME } from "./cli.mjs";
+import { n as loadConfig, r as detectHost } from "./config-DMBEpdEN.mjs";
+import { n as tailwind3Css, r as tailwind4Plugin, t as marverPlugin } from "./plugin-DB5t2WUl.mjs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { createServer, searchForWorkspaceRoot } from "vite";
+import react from "@vitejs/plugin-react";
+//#region src/server/dev.ts
+/** packageDir = the installed marver package root (dist/cli.js lives one level down). */
+function packageDir() {
+	return join(dirname(fileURLToPath(import.meta.url)), "..");
+}
+async function dev(root, portFlag) {
+	const config = await loadConfig(root);
+	const host = detectHost(root);
+	const pkgDir = packageDir();
+	const clientDir = join(pkgDir, "src", "client");
+	const plugins = [react()];
+	if (host.tailwind === 4) {
+		const tw = await tailwind4Plugin(root);
+		if (tw) plugins.push(...tw);
+		else console.warn("[marver] tailwindcss v4 detected but @tailwindcss/vite not found in the host - theme classes may be missing.");
+	}
+	let css;
+	if (host.tailwind === 3) css = await tailwind3Css(root) ?? void 0;
+	plugins.push(marverPlugin({
+		root,
+		clientDir,
+		config,
+		detectedThemeCss: host.themeCss
+	}));
+	const server = await createServer({
+		configFile: false,
+		root,
+		css,
+		plugins,
+		server: {
+			port: portFlag ?? config.port,
+			strictPort: false,
+			fs: { allow: [.../* @__PURE__ */ new Set([
+				root,
+				pkgDir,
+				searchForWorkspaceRoot(root)
+			])] },
+			watch: { ignored: [
+				"**/design/manifest.json",
+				"**/design/boards/**",
+				"**/design/.local/**",
+				"**/design/.dist/**"
+			] }
+		},
+		resolve: {
+			dedupe: ["react", "react-dom"],
+			tsconfigPaths: true
+		},
+		optimizeDeps: {
+			exclude: [PKG],
+			include: [
+				"react",
+				"react-dom",
+				"react-dom/client",
+				"react/jsx-runtime",
+				"react/jsx-dev-runtime"
+			],
+			entries: [join(clientDir, "frame-host", "index.html"), "design/**/*.{tsx,jsx}"]
+		},
+		logLevel: "info"
+	});
+	await server.listen();
+	const addr = server.httpServer?.address();
+	const port = typeof addr === "object" && addr ? addr.port : config.port;
+	console.log(`\n  ${NAME} canvas → http://localhost:${port}/\n`);
+	return server;
+}
+//#endregion
+export { dev };

package/dist/init-DcOy1krf.mjs

@@ -0,0 +1,168 @@
+import { t as NAME } from "./cli.mjs";
+import { r as detectHost, t as DEFAULTS } from "./config-DMBEpdEN.mjs";
+import { dirname, join, relative } from "node:path";
+import { cpSync, existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+//#region src/cli/init.ts
+const pkgDir = () => join(dirname(fileURLToPath(import.meta.url)), "..");
+/** Idempotent scaffolder: never overwrites existing files; every host-repo touch prints a diff. */
+function init(root, opts) {
+	const host = detectHost(root);
+	const design = join(root, "design");
+	const templates = join(pkgDir(), "templates");
+	const created = [];
+	const write = (rel, content) => {
+		const file = join(design, rel);
+		if (existsSync(file)) return;
+		mkdirSync(dirname(file), { recursive: true });
+		writeFileSync(file, content);
+		created.push(`design/${rel}`);
+	};
+	write("config.ts", configTemplate(opts.mode));
+	if (host.themeCss) {
+		const relCss = relative(design, join(root, host.themeCss)).split("\\").join("/");
+		write("theme.css", themeWrapper(relCss, host.tailwind === 4));
+	} else console.warn(`[${NAME}] no theme CSS detected - set \`theme\` in design/config.ts when you have one.`);
+	write("providers.tsx", providersTemplate(host.router, host.toaster, host.routerPkg));
+	write("AGENTS.md", readFileSync(join(templates, `AGENTS-${opts.mode}.md`), "utf8").replaceAll("{{UI_ALIAS}}", host.shadcn?.uiAlias ?? "@/components/ui"));
+	write("tsconfig.json", readFileSync(join(templates, "design-tsconfig.json"), "utf8"));
+	write(".gitignore", ".local/\n.dist/\n");
+	write("scenes/_layout.tsx", readFileSync(join(templates, "root-layout.tsx"), "utf8"));
+	if (!existsSync(join(design, "boards"))) {
+		mkdirSync(join(design, "boards"), { recursive: true });
+		writeFileSync(join(design, "boards", ".gitkeep"), "");
+		created.push("design/boards/");
+	}
+	if (opts.demo && !existsSync(join(design, "scenes", "demo"))) {
+		cpSync(join(templates, "demo"), join(design, "scenes", "demo"), { recursive: true });
+		created.push("design/scenes/demo/ (3 frames)");
+	}
+	if (host.tsconfigSweepsDesign) patchTsconfigExclude(root);
+	console.log(`\n${NAME} initialized (${opts.mode} mode). Created:`);
+	for (const f of created) console.log(`  + ${f}`);
+	if (host.router === "next") console.log(`\n  note: Next.js support is partial until M3 - HTML frames and next-free components work today.`);
+	console.log(`\n  commit design/ - only .local/ is ignored`);
+	console.log(`  uninstall = delete design/, remove the ${NAME} dependency${host.tsconfigSweepsDesign ? ", revert the \"design\" line in tsconfig exclude" : ""}`);
+	console.log(`\n  next: npx ${NAME} dev   (canvas on http://localhost:${DEFAULTS.port} by default)\n`);
+	console.log(`  then, to your agent: "Read design/AGENTS.md. Build an onboarding scene - welcome, form, done - mobile-first, using our components."\n`);
+}
+function patchTsconfigExclude(root) {
+	const file = join(root, "tsconfig.json");
+	if (!existsSync(file)) return;
+	const raw = readFileSync(file, "utf8");
+	try {
+		let next;
+		if (/"exclude"\s*:/.test(raw)) next = raw.replace(/("exclude"\s*:\s*\[)/, "$1\"design\", ");
+		else {
+			const at = firstJsonBrace(raw);
+			if (at < 0) throw new Error("no object brace found");
+			next = raw.slice(0, at + 1) + "\n  \"exclude\": [\"design\"]," + raw.slice(at + 1);
+		}
+		if (next === raw) throw new Error("no anchor matched");
+		writeFileSync(file, next);
+		console.log(`\n  patched tsconfig.json (the only host file touched):`);
+		console.log(`    + "design" added to "exclude"  (revert this line to fully uninstall)`);
+	} catch {
+		console.warn(`  could not patch tsconfig.json - add "design" to its "exclude" yourself.`);
+	}
+}
+/** Index of the first `{` outside //, /* *\/ comments and strings (tsconfig is JSONC). */
+function firstJsonBrace(src) {
+	let inLine = false, inBlock = false, inStr = false;
+	for (let i = 0; i < src.length; i++) {
+		const c = src[i], n = src[i + 1];
+		if (inLine) {
+			if (c === "\n") inLine = false;
+			continue;
+		}
+		if (inBlock) {
+			if (c === "*" && n === "/") {
+				inBlock = false;
+				i++;
+			}
+			continue;
+		}
+		if (inStr) {
+			if (c === "\\") i++;
+			else if (c === "\"") inStr = false;
+			continue;
+		}
+		if (c === "/" && n === "/") {
+			inLine = true;
+			i++;
+			continue;
+		}
+		if (c === "/" && n === "*") {
+			inBlock = true;
+			i++;
+			continue;
+		}
+		if (c === "\"") {
+			inStr = true;
+			continue;
+		}
+		if (c === "{") return i;
+	}
+	return -1;
+}
+const configTemplate = (mode) => `// ${NAME} config - OPTIONAL. Delete this file and everything still works on defaults.
+// Theme lives in design/theme.css (it imports your app's real stylesheet) - not here.
+// Sharp edges (native Node TS import): erasable syntax only (no enums/namespaces),
+// relative imports need extensions, tsconfig paths are ignored here.
+export default {
+  mode: ${JSON.stringify(mode)},
+  // Device widths for frames and the Devices view. Rename, retune, or uncomment tv.
+  viewports: {
+    mobile: { width: 390, height: 844 },
+    tablet: { width: 768, height: 1024 },
+    laptop: { width: 1280, height: 800 },
+    monitor: { width: 1920, height: 1080 },
+    // tv: { width: 3840, height: 2160 },
+  },
+  themes: ["light", "dark"],
+  port: ${DEFAULTS.port},
+  // Canvas zoom feel: 1 = default, 1.2 = 20% faster, 0.8 = 20% slower.
+  // zoomSpeed: 1,
+  // Publishing (\`${NAME} build\` + \`${NAME} serve\`): gate identity + branding footer.
+  // name/logo default to the host package.json name and design/logo.svg (then public/).
+  // branding is the small "Powered by Marver.design" line under the gate. Marver is
+  // free, and that line is how it spreads - we'd love it if you leave it on, but it
+  // is yours to remove, no strings: share: { branding: false }.
+  // share: { name: "My App", logo: "design/logo.svg", branding: true },
+}
+`;
+const themeWrapper = (relCss, v4) => `/* ${NAME} theme wrapper - imports the app's real theme; the app's own build never sees design/. */
+@import "${relCss}";
+${v4 ? `@source "./";\n` : ""}`;
+function providersTemplate(router, toaster, routerPkg = "react-router-dom") {
+	const imports = [`import type { ReactNode } from 'react'`];
+	let open = "", close = "";
+	if (router === "react-router") {
+		imports.push(`import { MemoryRouter } from '${routerPkg}'`);
+		open += "<MemoryRouter>";
+		close = "</MemoryRouter>" + close;
+	}
+	let toasterEl = "";
+	if (toaster === "sonner") {
+		imports.push(`import { Toaster } from 'sonner'`);
+		toasterEl = "<Toaster />";
+	}
+	if (toaster === "react-hot-toast") {
+		imports.push(`import { Toaster } from 'react-hot-toast'`);
+		toasterEl = "<Toaster />";
+	}
+	return `// Mock contexts wrapped around every frame. Scaffolded by ${NAME} init from what it detected - yours to edit.
+${imports.join("\n")}
+
+export default function Providers({ children }: { children: ReactNode }) {
+  return (
+    ${open || "<>"}
+      {children}
+      ${toasterEl}
+    ${close || "</>"}
+  )
+}
+`;
+}
+//#endregion
+export { init };