@marver-design/marver 0.2.0 → 0.2.2

package/README.md

@@ -18,11 +18,12 @@ Then, to your agent:
 - **Boards**: one canvas on screen at a time. Agents write `design/boards/<name>.json` (a frame list is enough); switch boards at the top of the sidebar. `all-scenes` is auto-managed.
 - **Devices view**: the Devices menu (or hotkeys `1`-`5`) sizes every frame to mobile / tablet / laptop / monitor / tv to sweep your breakpoints; `0` restores your own layout exactly. Widths live in `design/config.ts`.
 - `data-goto="scene/frame"` on any element links frames into a walkable prototype.
+- **Upgrade**: `npm i -D @marver-design/marver@latest && npx marver init`. The canvas tells you when a new version is out (one anonymous registry check per day, cached in `design/.local/`; `MARVER_NO_UPDATE_CHECK=1` disables). Re-running init refreshes the managed files (AGENTS.md, `design/instructions/`) - your edits to them are detected and preserved; when both you and a release changed a file, the fresh version is staged at `design/.local/latest/` for you (or your agent) to merge. Everything else in `design/` is yours and never touched.
 - Uninstall: delete `design/`, remove the dependency. (If `init` patched your tsconfig `exclude`, revert that one line.)
 
-The implementation contract is [SPEC.md](./SPEC.md). Deviations live in [DECISIONS.md](./DECISIONS.md).
+**Next.js**: supported with one caveat - frames render in Vite, outside Next. `next/font` CSS variables are undefined inside frames (give font tokens a fallback chain), `next/image`/`next/link` should be plain `img`/`data-goto` in frames, and Server Components cannot run there. `init` writes the specifics into `design/AGENTS.md` when it detects Next.
 
-; private; TNEP4.
+Implementation contracts (SPEC.md, DECISIONS.md) live in the [GitHub repo](https://github.com/TNEP4/marver).
 
 ## Shortcuts
 

package/dist/{build-D0GnIR4G.mjs → build-CNoXE13J.mjs}

@@ -1,8 +1,8 @@
 import { r as ROUTE, t as NAME } from "./cli.mjs";
-import { n as loadConfig, r as detectHost } from "./config-DMBEpdEN.mjs";
-import { i as scanFrames, n as tailwind3Css, r as tailwind4Plugin, t as marverPlugin } from "./plugin-DB5t2WUl.mjs";
-import { basename, dirname, join, sep } from "node:path";
+import { a as loadConfig, n as scanFrames, o as detectHost } from "./manifest-CHmKAAtG.mjs";
+import { n as tailwind3Css, r as tailwind4Plugin, t as marverPlugin } from "./plugin-DiDJA9n-.mjs";
 import { cpSync, existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync } from "node:fs";
+import { basename, dirname, join, sep } from "node:path";
 import { fileURLToPath } from "node:url";
 import { build } from "vite";
 import react from "@vitejs/plugin-react";

package/dist/cli.mjs

@@ -1,6 +1,8 @@
 #!/usr/bin/env node
 import { cac } from "cac";
-import { resolve } from "node:path";
+import { readFileSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
 //#region src/client/const.ts
 /** Client-safe constants. The single source - src/cli/name.ts re-exports for node-side code.
 *  Lives under src/client because that is the only source directory shipped in the package. */
@@ -14,16 +16,30 @@ if (major < 22 || major === 22 && minor < 18) {
 	console.error(`${NAME} needs Node >= 22.18 (native TypeScript config loading). You have ${process.versions.node}.`);
 	process.exit(1);
 }
+const emitWarning = process.emitWarning.bind(process);
+process.emitWarning = ((warning, ...rest) => {
+	const opt = rest[0];
+	if (((typeof opt === "object" && opt ? opt.code : rest[1]) ?? (warning && typeof warning === "object" ? warning.code : void 0)) === "MODULE_TYPELESS_PACKAGE_JSON") return;
+	emitWarning(warning, ...rest);
+});
+/** The real installed version - dist/cli.mjs lives one level under the package root. */
+function version() {
+	try {
+		return JSON.parse(readFileSync(join(dirname(fileURLToPath(import.meta.url)), "..", "package.json"), "utf8")).version;
+	} catch {
+		return "0.0.0";
+	}
+}
 const cli = cac(NAME);
-cli.command("init", "Scaffold design/ in this repo").option("--mode <mode>", "studio | embedded", { default: "studio" }).option("--no-demo", "Skip the demo scene").option("--root <dir>", "Host repo root", { default: "." }).action(async (opts) => {
-	const { init } = await import("./init-DcOy1krf.mjs");
+cli.command("init", "Scaffold design/ in this repo").option("--mode <mode>", "studio | embedded", { default: "studio" }).option("--no-demo", "Skip the demo scene (the demo ships unless this flag is passed)").option("--root <dir>", "Host repo root", { default: "." }).action(async (opts) => {
+	const { init } = await import("./init-3h9pXEzp.mjs");
 	init(resolve(opts.root), {
 		mode: opts.mode === "embedded" ? "embedded" : "studio",
 		demo: opts.demo !== false
 	});
 });
 cli.command("dev", "Start the canvas").option("--root <dir>", "Host repo root", { default: "." }).option("--port <port>", "Port (default 5199)").action(async (opts) => {
-	const { dev } = await import("./dev-BK4x3PBr.mjs");
+	const { dev } = await import("./dev-Blyy4jOL.mjs");
 	let port;
 	if (opts.port !== void 0) {
 		const n = Number(opts.port);
@@ -33,7 +49,7 @@ cli.command("dev", "Start the canvas").option("--root <dir>", "Host repo root",
 	await dev(resolve(opts.root), port);
 });
 cli.command("build", "Static export → design/.dist").option("--boards <names>", "Publish only these boards (comma-separated); the frame filter is applied at build time").option("--root <dir>", "Host repo root", { default: "." }).action(async (opts) => {
-	const { buildSite } = await import("./build-D0GnIR4G.mjs");
+	const { buildSite } = await import("./build-CNoXE13J.mjs");
 	try {
 		const boards = opts.boards === void 0 ? void 0 : typeof opts.boards === "string" ? opts.boards : "";
 		await buildSite(resolve(opts.root), boards);
@@ -43,7 +59,7 @@ cli.command("build", "Static export → design/.dist").option("--boards <names>"
 	}
 });
 cli.command("serve", "Serve design/.dist (set MARVER_PASSWORD to gate it)").option("--root <dir>", "Host repo root", { default: "." }).option("--port <port>", "Port (default $PORT or 4199)").action(async (opts) => {
-	const { serve } = await import("./serve-BPNmWeJx.mjs");
+	const { serve } = await import("./serve-BvbAbWeK.mjs");
 	let port;
 	if (opts.port !== void 0) {
 		const n = Number(opts.port);
@@ -52,7 +68,7 @@ cli.command("serve", "Serve design/.dist (set MARVER_PASSWORD to gate it)").opti
 	serve(resolve(opts.root), port);
 });
 cli.help();
-cli.version("0.1.0");
+cli.version(version());
 cli.parse();
 //#endregion
 export { PKG as n, ROUTE as r, NAME as t };

package/dist/{dev-BK4x3PBr.mjs → dev-Blyy4jOL.mjs}

@@ -1,9 +1,9 @@
 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 { a as loadConfig, o as detectHost } from "./manifest-CHmKAAtG.mjs";
+import { n as tailwind3Css, r as tailwind4Plugin, t as marverPlugin } from "./plugin-DiDJA9n-.mjs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
-import { createServer, searchForWorkspaceRoot } from "vite";
+import { createLogger, 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). */
@@ -19,7 +19,7 @@ async function dev(root, portFlag) {
 	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.");
+		else console.warn(`[marver] tailwindcss v4 detected but @tailwindcss/vite could not be loaded - utility classes WILL be missing from frames. Fix: npm i -D @tailwindcss/vite (used only by the canvas, never by your app's build).`);
 	}
 	let css;
 	if (host.tailwind === 3) css = await tailwind3Css(root) ?? void 0;
@@ -29,10 +29,21 @@ async function dev(root, portFlag) {
 		config,
 		detectedThemeCss: host.themeCss
 	}));
+	const logger = createLogger("info");
+	const noise = (msg) => /Sourcemap for .*node_modules.*points to/.test(msg);
+	const warnBase = logger.warn.bind(logger);
+	const warnOnceBase = logger.warnOnce.bind(logger);
+	logger.warn = (msg, opts) => {
+		if (!noise(msg)) warnBase(msg, opts);
+	};
+	logger.warnOnce = (msg, opts) => {
+		if (!noise(msg)) warnOnceBase(msg, opts);
+	};
 	const server = await createServer({
 		configFile: false,
 		root,
 		css,
+		customLogger: logger,
 		plugins,
 		server: {
 			port: portFlag ?? config.port,
@@ -46,7 +57,15 @@ async function dev(root, portFlag) {
 				"**/design/manifest.json",
 				"**/design/boards/**",
 				"**/design/.local/**",
-				"**/design/.dist/**"
+				"**/design/.dist/**",
+				"**/.next/**",
+				"**/.turbo/**",
+				"**/.vercel/**",
+				"**/.output/**",
+				"**/dist/**",
+				"**/build/**",
+				"**/out/**",
+				"**/coverage/**"
 			] }
 		},
 		resolve: {

package/dist/init-3h9pXEzp.mjs

@@ -0,0 +1,337 @@
+import { t as NAME } from "./cli.mjs";
+import { i as DEFAULTS, n as scanFrames, o as detectHost, r as writeManifest } from "./manifest-CHmKAAtG.mjs";
+import { cpSync, existsSync, mkdirSync, readFileSync, readdirSync, renameSync, rmSync, writeFileSync } from "node:fs";
+import { dirname, join, relative } from "node:path";
+import { fileURLToPath } from "node:url";
+import { createHash } from "node:crypto";
+//#region src/cli/init.ts
+/** Package root = the nearest ancestor holding templates/ (one hop from dist/, two
+*  from src/cli/ - the walk serves both, and tests run init from source). */
+const pkgDir = () => {
+	let dir = dirname(fileURLToPath(import.meta.url));
+	for (let i = 0; i < 4; i++) {
+		if (existsSync(join(dir, "templates"))) return dir;
+		dir = dirname(dir);
+	}
+	return 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 fileHas = (rel, needle) => {
+		try {
+			return readFileSync(join(design, rel), "utf8").includes(needle);
+		} catch {
+			return false;
+		}
+	};
+	const marverShaped = fileHas("config.ts", "marver") || fileHas("AGENTS.md", "agent contract");
+	if (existsSync(design) && !marverShaped && readdirSync(design).some((f) => !f.startsWith("."))) {
+		console.error(`
+[${NAME}] design/ already exists in this repo and does not look like a ${NAME} workspace.
+         Refusing to merge into it - your files and ${NAME}'s would interleave, and
+         "uninstall = delete design/" would stop being safe.
+
+         Move or rename the existing design/ folder, then re-run \`npx ${NAME} init\`.
+         (If you need marver to live in a differently-named folder, say so at
+         github.com/TNEP4/marver - a --dir flag is planned.)`);
+		process.exit(1);
+	}
+	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}`);
+	};
+	const writeManaged = (rel, body) => {
+		const file = join(design, rel);
+		const next = managedFile(body);
+		const latest = join(design, ".local", "latest", rel);
+		if (!existsSync(file)) return write(rel, next);
+		const current = readFileSync(file, "utf8");
+		if (current === next) {
+			rmSync(latest, { force: true });
+			return;
+		}
+		if (current.startsWith(MANAGED_PREFIX)) {
+			const recorded = current.slice(MANAGED_PREFIX.length).split(" ")[0];
+			const nl = current.indexOf("\n");
+			const currentBody = nl >= 0 ? current.slice(nl + 1) : "";
+			if (nl >= 0 && hashBody(currentBody) === recorded) {
+				writeFileSync(file, next);
+				rmSync(latest, { force: true });
+				created.push(`design/${rel} (updated)`);
+			} else if (recorded !== hashBody(body)) {
+				mkdirSync(dirname(latest), { recursive: true });
+				writeFileSync(latest, body);
+				if (nl >= 0) {
+					const tmp = file + ".tmp";
+					writeFileSync(tmp, managedFile(body).split("\n")[0] + "\n" + currentBody);
+					renameSync(tmp, file);
+				}
+				console.warn(`  ~ design/${rel}: you customized it and a newer version exists - your edits are untouched. Merge what you want from design/.local/latest/${rel}`);
+			}
+		} else if (current.startsWith(LEGACY_PREFIX)) {
+			writeFileSync(file, next);
+			rmSync(latest, { force: true });
+			created.push(`design/${rel} (updated)`);
+		} else if (current !== body) {
+			rmSync(latest, { force: true });
+			console.warn(`  note: design/${rel} exists without a marver marker - left untouched. If you did not author it, delete it and re-run init to restore the managed version.`);
+		}
+	};
+	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 - create design/theme.css importing your app's stylesheet when you have one (or set \`theme\` in design/config.ts).`);
+	write("providers.tsx", providersTemplate(host.router, host.toaster, host.routerPkg));
+	writeManaged("AGENTS.md", readFileSync(join(templates, `AGENTS-${opts.mode}.md`), "utf8").replaceAll("{{UI_GUIDANCE}}", uiGuidance(host, noApp(host))).replace(/\{\{NEXT_NOTES\}\}\n?/, host.router === "next" ? NEXT_NOTES : ""));
+	const agentsNow = readFileSync(join(design, "AGENTS.md"), "utf8");
+	if (!agentsNow.startsWith(MANAGED_PREFIX) && !agentsNow.startsWith(LEGACY_PREFIX) && agentsNow.includes("# Design canvas - agent contract") && !agentsNow.includes("## The method (binding)")) console.warn(`  note: design/AGENTS.md predates managed regeneration - if you never edited it, delete it and re-run init to get the current contract (incl. the design/instructions routing).`);
+	const instrRoot = join(templates, "instructions");
+	for (const e of readdirSync(instrRoot, { withFileTypes: true })) if (e.isDirectory()) {
+		for (const f of readdirSync(join(instrRoot, e.name))) if (f.endsWith(".md")) writeManaged(`instructions/${e.name}/${f}`, readFileSync(join(instrRoot, e.name, f), "utf8"));
+	} else if (e.name.endsWith(".md")) writeManaged(`instructions/${e.name}`, readFileSync(join(instrRoot, e.name), "utf8"));
+	const setupPath = join(design, "instructions", "setup.md");
+	const ourSetup = () => {
+		try {
+			const s = readFileSync(setupPath, "utf8");
+			return s.startsWith("# Setup required") && s.includes("marver init");
+		} catch {
+			return false;
+		}
+	};
+	if (noApp(host)) {
+		if (!existsSync(setupPath)) write("instructions/setup.md", SETUP_MD);
+	} else if (existsSync(setupPath) && ourSetup()) {
+		rmSync(setupPath);
+		console.log(`  - design/instructions/setup.md removed (app detected - setup complete)`);
+	}
+	write("tsconfig.json", existsSync(join(root, "tsconfig.json")) ? readFileSync(join(templates, "design-tsconfig.json"), "utf8") : STANDALONE_TSCONFIG);
+	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);
+	writeManifest(root, scanFrames(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 - frames render outside Next, so next/font, next/image and Server Components do not exist inside them (details in design/AGENTS.md).`);
+	if (noApp(host)) console.warn(`
+  ┌─ NO APP DETECTED ─────────────────────────────────────────────────────┐
+  │ No framework, no theme CSS, no component library. ${NAME} builds      │
+  │ frames from YOUR components - with none, designs get thrown away.     │
+  │                                                                       │
+  │ Setup instructions: design/instructions/setup.md. Set up the app,     │
+  │ re-run init, and that file removes itself. AGENTS.md carries a STOP   │
+  │ so your agent does not design against components that do not exist.   │
+  └───────────────────────────────────────────────────────────────────────┘`);
+	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`);
+	if (!noApp(host)) console.log(`  then, to your agent: "Read design/AGENTS.md. Build an onboarding scene - welcome, form, done - mobile-first, using our components."\n`);
+}
+const MANAGED_PREFIX = "<!-- marver:managed ";
+const LEGACY_PREFIX = "<!-- generated by marver init";
+const hashBody = (s) => createHash("sha256").update(s).digest("hex");
+/** The marker carries a hash of the generated body: edits are DETECTED, not assumed.
+*  Edit freely - init preserves edits and stages upstream updates for merging.
+*  Deleting the marker line detaches the file from updates entirely. */
+const managedFile = (body) => `${MANAGED_PREFIX}${hashBody(body)} - edit freely: init preserves your edits and stages upstream updates at design/.local/latest/ for you to merge. Delete this line to detach this file from updates entirely. -->\n${body}`;
+/** No framework, no theme, no component alias = nothing to build frames FROM. */
+const noApp = (host) => !host.router && !host.tailwind && !host.shadcn && !host.themeCss;
+/** The UI line of AGENTS.md, matched to what detection actually found (friction log #1).
+*  The STOP branch fires only on the same condition that creates SETUP.md - an app
+*  without Tailwind (plain React + CSS) gets guidance, never a dead pointer. */
+function uiGuidance(host, isNoApp) {
+	if (isNoApp) return `STOP - this repo has no app yet. Read design/instructions/setup.md before designing anything.`;
+	if (host.shadcn) return `Use the app's UI: import from ${host.shadcn.uiAlias}; style with the app's Tailwind classes.`;
+	if (host.tailwind) return `Style with the app's Tailwind classes and design tokens; there is no detected component library - extract shared pieces into design/components/.`;
+	return `Use the app's existing components and stylesheets (import them directly); there is no Tailwind or component library detected - extract shared pieces into design/components/.`;
+}
+const SETUP_MD = `# Setup required - this repo has no app yet
+
+> This file exists because \`${NAME} init\` ran in a repo with no framework, no theme
+> CSS, and no component library. It disappears automatically: set up the app, re-run
+> \`npx ${NAME} init\`, and init deletes this file and regenerates AGENTS.md against
+> the real stack. While this file exists, DO NOT design.
+
+${NAME} builds frames from YOUR components and YOUR theme. With none, frames become
+hand-rolled CSS that shares nothing with the future app and cannot be promoted into
+it later - work that gets thrown away.
+
+## Do this first
+
+For a web app or marketing site, the blessed stack:
+
+\`\`\`bash
+npx create-next-app@latest . --ts --tailwind --app --src-dir
+npx shadcn@latest init
+\`\`\`
+
+Any React + CSS setup works; the point is that components and a theme EXIST.
+
+## Then
+
+\`\`\`bash
+npx ${NAME} init
+\`\`\`
+
+init is idempotent: it fills in what it now detects (theme wrapper, providers, a
+shadcn-aware AGENTS.md), deletes this file, and you design from real parts.
+`;
+/** Next.js frames render OUTSIDE Next - say concretely what that means (friction log #10/#11). */
+const NEXT_NOTES = `- Next.js caveats (frames render in Vite, outside Next):
+  next/font does not exist here - CSS variables it injects (e.g. --font-geist-sans) are
+  undefined in frames, so give every font token a real fallback chain in the app's CSS:
+  --font-sans: var(--font-geist-sans, ui-sans-serif, system-ui, sans-serif).
+  next/image and next/link render as plain img/a via shims at best - prefer <img> and
+  data-goto in frames. Server Components and server actions cannot run: frames are
+  client components importing client components.
+`;
+const STANDALONE_TSCONFIG = `{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["."]
+}
+`;
+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 };