truecanvas 0.2.0 → 0.3.0

package/dist/cli.js

@@ -7,6 +7,7 @@ import {
   assertCanvasName,
   clearCompare,
   componentsDir,
+  configStatus,
   describeComponent,
   detectPm,
   findByPath,
@@ -16,8 +17,6 @@ import {
   initProject,
   layoutFiles,
   listRoutes,
-  loadConfig,
-  nextConfigStatus,
   outlineDoc,
   parseCanvas,
   readDesignTokens,
@@ -26,11 +25,15 @@ import {
   shadcnAdd,
   shadcnRegistry,
   shadcnStatus,
+  shellSafe,
   syncComponentRegistry,
   toolEnv,
   writeCompare
-} from "./chunk-ZPARY6OD.js";
-import "./chunk-T2TCBSTG.js";
+} from "./chunk-XWQ5MS24.js";
+import {
+  loadConfig
+} from "./chunk-PBKX3SBC.js";
+import "./chunk-WU7NBTJH.js";
 import {
   ICON_LIBRARIES,
   iconLibraries,
@@ -577,7 +580,7 @@ ${source.slice(hit.node.start, hit.node.end)}
     async ({ name }) => {
       try {
         ws.createCanvas(name, actor());
-        return text(`\u2713 Created canvas ${name} (${ws.relFile(name)}). Next.js picks the new route up in a second.`);
+        return text(`\u2713 Created canvas ${name} (${ws.relFile(name)}). The app picks it up in a second.`);
       } catch (e) {
         return fail(e);
       }
@@ -936,17 +939,27 @@ import os from "os";
 import path2 from "path";
 function findChromium() {
   if (process.env.TRUECANVAS_CHROME) return process.env.TRUECANVAS_CHROME;
-  const cache2 = path2.join(os.homedir(), ".cache", "ms-playwright");
+  const cache2 = process.env.PLAYWRIGHT_BROWSERS_PATH || (process.platform === "win32" ? path2.join(process.env.LOCALAPPDATA ?? path2.join(os.homedir(), "AppData", "Local"), "ms-playwright") : process.platform === "darwin" ? path2.join(os.homedir(), "Library", "Caches", "ms-playwright") : path2.join(os.homedir(), ".cache", "ms-playwright"));
   if (fs2.existsSync(cache2)) {
     const shells = fs2.readdirSync(cache2).filter((d) => d.startsWith("chromium_headless_shell-")).sort().reverse();
     for (const d of shells) {
-      for (const sub of ["chrome-headless-shell-linux64/chrome-headless-shell", "chrome-linux/headless_shell", "chrome-headless-shell-mac-arm64/chrome-headless-shell", "chrome-headless-shell-mac-x64/chrome-headless-shell"]) {
+      for (const sub of [
+        "chrome-headless-shell-linux64/chrome-headless-shell",
+        "chrome-linux/headless_shell",
+        "chrome-headless-shell-mac-arm64/chrome-headless-shell",
+        "chrome-headless-shell-mac-x64/chrome-headless-shell",
+        "chrome-headless-shell-win64/chrome-headless-shell.exe",
+        "chrome-win/headless_shell.exe"
+      ]) {
         const p = path2.join(cache2, d, sub);
         if (fs2.existsSync(p)) return p;
       }
     }
   }
+  const programFiles = [process.env.PROGRAMFILES, process.env["PROGRAMFILES(X86)"], process.env.LOCALAPPDATA].filter(Boolean);
   for (const p of [
+    ...programFiles.flatMap((dir) => [path2.join(dir, "Google", "Chrome", "Application", "chrome.exe"), path2.join(dir, "Microsoft", "Edge", "Application", "msedge.exe")]),
+    "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge",
     "/usr/bin/chromium-browser",
     "/usr/bin/chromium",
     "/usr/bin/google-chrome-stable",
@@ -1104,7 +1117,7 @@ async function reviewPage(ws, canvas, ref, since) {
       }
     }
   }
-  const comments = path3.join(ws.config.canvasDir, `${canvas}.comments.json`);
+  const comments = `${ws.config.canvasDir}/${canvas}.comments.json`;
   if (await ws.git.show(ref, comments) !== readNow(ws, comments)) files.push(comments);
   if (!files.length) return null;
   const history = exists ? ws.changesSince(canvas, since) : [];
@@ -1132,7 +1145,7 @@ async function reviewAll(ws) {
   const linked = new Set(ws.linkedFiles());
   const out = [];
   for (const canvas of names) {
-    const own = [ws.relFile(canvas), path3.join(ws.config.canvasDir, `${canvas}.comments.json`)];
+    const own = [ws.relFile(canvas), `${ws.config.canvasDir}/${canvas}.comments.json`];
     const touchesLinked = [...linked].some((f) => changed.has(f));
     if (!own.some((f) => changed.has(f)) && !touchesLinked) continue;
     const page = await reviewPage(ws, canvas, ref, since).catch(() => null);
@@ -1299,6 +1312,7 @@ async function startServer(ws) {
       case "GET /api/state":
         return json(res, 200, {
           appUrl: config.appUrl,
+          framework: config.framework,
           root: config.root,
           projectName: path4.basename(config.root),
           canvases: ws.canvases(),
@@ -1669,7 +1683,7 @@ async function startServer(ws) {
   watchCanvasDir();
   setInterval(watchCanvasDir, 2e3).unref();
   const appDirAbs = path4.join(config.root, config.appDir);
-  if (fs4.existsSync(appDirAbs)) {
+  if (config.framework === "next" && fs4.existsSync(appDirAbs)) {
     const appPending = /* @__PURE__ */ new Map();
     const appWatcher = fs4.watch(appDirAbs, { recursive: true }, (_event, filename) => {
       if (!filename || !/(^|[\\/])(page|layout)\.[jt]sx$/.test(filename) || /^truecanvas[\\/]/.test(filename)) return;
@@ -1765,6 +1779,9 @@ async function runStdioBridge(mcpUrl) {
   await server.connect(new StdioServerTransport());
 }
 
+// src/cli/index.ts
+import { createRequire } from "module";
+
 // src/hub/server.ts
 import http2 from "http";
 import fs8 from "fs";
@@ -1835,7 +1852,7 @@ function inspect(dir) {
     } catch {
     }
   }
-  return { next: "next" in deps, ready: "truecanvas" in deps, canvases, exists: true };
+  return { next: "next" in deps || "vite" in deps && "react" in deps, ready: "truecanvas" in deps, canvases, exists: true };
 }
 function discover() {
   const home = os2.homedir();
@@ -1864,7 +1881,7 @@ function discover() {
   return found;
 }
 function listDirs(dir) {
-  const abs = path5.resolve(dir.replace(/^~(?=$|\/)/, os2.homedir()));
+  const abs = path5.resolve(dir.replace(/^~(?=$|[\\/])/, os2.homedir()));
   const dirs = fs5.readdirSync(abs, { withFileTypes: true }).filter((e) => e.isDirectory() && !e.name.startsWith(".") && e.name !== "node_modules").map((e) => ({ name: e.name, next: inspect(path5.join(abs, e.name)).next })).sort((a, b) => Number(b.next) - Number(a.next) || a.name.localeCompare(b.name));
   return { path: abs, dirs };
 }
@@ -1889,7 +1906,8 @@ function runScript(pm, script) {
   return pm === "npm" ? `npm run ${script}` : `${pm} ${script}`;
 }
 var execInherit = (cmd, args, cwd) => new Promise((resolve, reject) => {
-  const p = spawn(cmd, args, { cwd, stdio: "inherit", env: toolEnv() });
+  const safe = shellSafe(cmd, args);
+  const p = spawn(safe.cmd, safe.args, { cwd, stdio: "inherit", env: toolEnv(), shell: safe.shell });
   p.on("error", reject);
   p.on("exit", (code) => code === 0 ? resolve() : reject(new Error(`${cmd} ${args.join(" ")} exited with ${code}`)));
 });
@@ -2120,7 +2138,8 @@ var Runner = class {
 };
 function killTree(proc, signal) {
   try {
-    if (process.platform !== "win32" && proc.pid) process.kill(-proc.pid, signal);
+    if (process.platform === "win32" && proc.pid) spawn2("taskkill", ["/pid", String(proc.pid), "/T", "/F"], { stdio: "ignore" }).on("error", () => proc.kill());
+    else if (proc.pid) process.kill(-proc.pid, signal);
     else proc.kill(signal);
   } catch {
     proc.kill(signal);
@@ -2144,9 +2163,10 @@ async function install(job, cmd, args, cwd) {
 function run2(job, cmd, args, cwd) {
   job.log.push(`$ ${cmd} ${args.join(" ")}`);
   return new Promise((resolve, reject) => {
-    const p = spawn2(cmd, args, { cwd, env: toolEnv({ CI: "1", FORCE_COLOR: "0" }), stdio: ["ignore", "pipe", "pipe"], shell: process.platform === "win32" });
+    const safe = shellSafe(cmd, args);
+    const p = spawn2(safe.cmd, safe.args, { cwd, env: toolEnv({ CI: "1", FORCE_COLOR: "0" }), stdio: ["ignore", "pipe", "pipe"], shell: safe.shell });
     const capture2 = (c2) => {
-      for (const line of c2.toString().split("\n")) if (line.trim()) job.log.push(line.replace(/\x1b\[[0-9;?]*[a-zA-Z]/g, ""));
+      for (const line of c2.toString().split(/\r?\n/)) if (line.trim()) job.log.push(line.replace(/\x1b\[[0-9;?]*[a-zA-Z]/g, ""));
       if (job.log.length > 300) job.log.splice(0, job.log.length - 300);
     };
     p.stdout.on("data", capture2);
@@ -2186,7 +2206,7 @@ function setupJob(dir, pkgDir, cli) {
 }
 function createJob(name, parent, pkgDir, cli) {
   const safe = name.trim().toLowerCase().replace(/[^a-z0-9-_]+/g, "-").replace(/^-+|-+$/g, "");
-  const parentDir = path7.resolve(parent.replace(/^~(?=$|\/)/, os4.homedir()));
+  const parentDir = path7.resolve(parent.replace(/^~(?=$|[\\/])/, os4.homedir()));
   const dir = path7.join(parentDir, safe);
   return startJob(`Create ${safe}`, async (job) => {
     if (!safe) throw new Error("Pick a project name.");
@@ -2202,16 +2222,17 @@ function createJob(name, parent, pkgDir, cli) {
 }
 function capture(cmd, args, cwd) {
   return new Promise((resolve) => {
+    const safe = shellSafe(cmd, args);
     execFile(
-      cmd,
-      args,
-      { cwd, timeout: 6e4, maxBuffer: 8 * 1024 * 1024, env: { ...process.env, GH_PROMPT_DISABLED: "1", GIT_TERMINAL_PROMPT: "0" } },
+      safe.cmd,
+      safe.args,
+      { shell: safe.shell, cwd, timeout: 6e4, maxBuffer: 8 * 1024 * 1024, env: { ...process.env, GH_PROMPT_DISABLED: "1", GIT_TERMINAL_PROMPT: "0" } },
       (err, stdout, stderr) => resolve({ ok: !err, out: err ? (stderr || err.message).trim() : stdout })
     );
   });
 }
 function cloneJob(repo, parent, pkgDir, cli) {
-  const parentDir = path7.resolve(parent.replace(/^~(?=$|\/)/, os4.homedir()));
+  const parentDir = path7.resolve(parent.replace(/^~(?=$|[\\/])/, os4.homedir()));
   const name = repo.replace(/\.git$/, "").split(/[/:]/).pop() ?? "";
   const dir = path7.join(parentDir, name);
   return startJob(`Clone ${name}`, async (job) => {
@@ -2221,7 +2242,7 @@ function cloneJob(repo, parent, pkgDir, cli) {
     const url = /^(https?:|git@|ssh:|file:)/.test(repo);
     if (url) await run2(job, "git", ["clone", repo, dir], parentDir);
     else await run2(job, "gh", ["repo", "clone", repo, dir], parentDir);
-    if (!fs7.existsSync(path7.join(dir, "package.json"))) throw new Error("Cloned, but there's no package.json at the root: Truecanvas needs a Next.js app.");
+    if (!fs7.existsSync(path7.join(dir, "package.json"))) throw new Error("Cloned, but there's no package.json at the root: Truecanvas needs a Next.js or Vite app.");
     const pm = packageManager(dir);
     await install(job, pm.cmd, ["install"], dir).catch(async (err) => {
       if (!fs7.existsSync(path7.join(dir, "node_modules"))) throw err;
@@ -2245,7 +2266,7 @@ var MIME2 = {
   ".woff2": "font/woff2",
   ".png": "image/png"
 };
-var HUB_INSTRUCTIONS = `Truecanvas hub: several projects, each a Next.js app with canvases of real React components.
+var HUB_INSTRUCTIONS = `Truecanvas hub: several projects, each a Next.js or Vite + React app with canvases of real React components.
 Your tools act on the current project (the active tab in the Truecanvas window, unless you pick one with open_project).
 Use list_projects to see them. All other tools are the regular Truecanvas canvas tools for that project.`;
 async function startHub(opts) {
@@ -2423,8 +2444,8 @@ async function startHub(opts) {
         req.on("close", () => clients.delete(res));
         return;
       case "POST /api/hub/add": {
-        const dir = path8.resolve(body.path.replace(/^~(?=$|\/)/, process.env.HOME ?? "~"));
-        if (!fs8.existsSync(path8.join(dir, "package.json"))) return json2(res, 400, { error: "No package.json in that folder. Pick the root of a Next.js app." });
+        const dir = path8.resolve(body.path.replace(/^~(?=$|[\\/])/, os5.homedir()));
+        if (!fs8.existsSync(path8.join(dir, "package.json"))) return json2(res, 400, { error: "No package.json in that folder. Pick the root of a Next.js or Vite app." });
         store.touch(dir);
         broadcast();
         return json2(res, 200, { path: dir, ready: store.all().find((p) => p.path === dir)?.ready ?? false });
@@ -2701,35 +2722,39 @@ async function doctor(root, cliVersion) {
   const checks = [];
   const add = (c2) => checks.push(c2);
   const node = process.versions.node;
-  add(major(node) >= 20 ? { label: "Node.js", status: "ok", detail: node } : { label: "Node.js", status: "fail", detail: node, fix: "Install Node.js 20 or newer (https://nodejs.org)" });
+  add(major(node) >= 22 ? { label: "Node.js", status: "ok", detail: node } : { label: "Node.js", status: "fail", detail: node, fix: "Install Node.js 22 or newer (24 LTS recommended: https://nodejs.org)" });
   const pkg = readPackage(root);
   if (!pkg) {
-    add({ label: "Project", status: "fail", detail: "no package.json here", fix: "Run truecanvas from the root of your Next.js app, or create one: npm create truecanvas" });
+    add({ label: "Project", status: "fail", detail: "no package.json here", fix: "Run truecanvas from the root of your Next.js or Vite app, or create one: npm create truecanvas" });
     return checks;
   }
   const pm = detectPm(root);
   const next = depVersion(root, "next");
-  if (!next) add({ label: "Next.js", status: "fail", detail: "not a dependency", fix: "Truecanvas works with Next.js (App Router) apps for now. Create one: npm create truecanvas" });
+  const vite = !next ? depVersion(root, "vite") : null;
+  if (vite) add(major(vite) >= 5 ? { label: "Vite", status: "ok", detail: vite } : { label: "Vite", status: "fail", detail: vite, fix: `Upgrade to Vite 5 or newer: ${pm} ${pm === "npm" ? "install -D" : "add -D"} vite@latest` });
+  else if (!next) add({ label: "Next.js or Vite", status: "fail", detail: "neither is a dependency", fix: "Truecanvas works with Next.js (App Router) and Vite + React apps. Create one: npm create truecanvas" });
   else if (major(next) < 15) add({ label: "Next.js", status: "fail", detail: next, fix: `Upgrade to Next.js 15 or newer: ${pm} ${pm === "npm" ? "install" : "add"} next@latest` });
   else add({ label: "Next.js", status: "ok", detail: next });
   const react = depVersion(root, "react");
-  add(react && major(react) >= 19 ? { label: "React", status: "ok", detail: react } : { label: "React", status: "fail", detail: react ?? "missing", fix: "Truecanvas needs React 19 (comes with Next.js 15+)" });
+  add(react && major(react) >= 19 ? { label: "React", status: "ok", detail: react } : { label: "React", status: "fail", detail: react ?? "missing", fix: `Truecanvas needs React 19: ${pm} ${pm === "npm" ? "install" : "add"} react@latest react-dom@latest` });
   const tw = depVersion(root, "tailwindcss");
   add(tw ? { label: "Tailwind CSS", status: "ok", detail: tw } : { label: "Tailwind CSS", status: "warn", detail: "not installed", fix: "Optional, but the layout and style controls write Tailwind classes" });
   const config = loadConfig(root);
-  add(fs10.existsSync(path10.join(root, config.appDir)) ? { label: "App Router", status: "ok", detail: config.appDir } : { label: "App Router", status: "fail", detail: `no ${config.appDir}/`, fix: "Truecanvas renders through the App Router (app/ or src/app/)" });
+  if (config.framework === "next") add(fs10.existsSync(path10.join(root, config.appDir)) ? { label: "App Router", status: "ok", detail: config.appDir } : { label: "App Router", status: "fail", detail: `no ${config.appDir}/`, fix: "Truecanvas renders through the App Router (app/ or src/app/)" });
   const tc = installedIn(root);
   if (!tc.declared) add({ label: "Truecanvas in the project", status: "fail", detail: "not a dependency", fix: "npx truecanvas  (sets it up)" });
   else if (!tc.installed) add({ label: "Truecanvas in the project", status: "fail", detail: "declared but not installed", fix: `${pm} install` });
   else if (tc.version !== cliVersion) add({ label: "Truecanvas in the project", status: "warn", detail: `${tc.version} (this CLI is ${cliVersion})`, fix: `Use the project's version: ${runScript(pm, "canvas")}, or update: ${pm} ${pm === "npm" ? "install -D" : "add -D"} truecanvas@latest` });
   else add({ label: "Truecanvas in the project", status: "ok", detail: tc.version ?? "" });
-  const wrapped = nextConfigStatus(root);
-  add(wrapped.wrapped ? { label: "next.config", status: "ok", detail: `${path10.basename(wrapped.file)} uses withTruecanvas()` } : { label: "next.config", status: "fail", detail: wrapped.file ? "not wrapped" : "missing", fix: "npx truecanvas init" });
+  const wrapped = configStatus(root, config.framework);
+  const configLabel = config.framework === "vite" ? "vite.config" : "next.config";
+  const uses = config.framework === "vite" ? "has the truecanvas() plugin" : "uses withTruecanvas()";
+  add(wrapped.wrapped ? { label: configLabel, status: "ok", detail: `${path10.basename(wrapped.file)} ${uses}` } : { label: configLabel, status: "fail", detail: wrapped.file ? "Truecanvas not enabled" : "missing", fix: "npx truecanvas init" });
   const scripts = pkg.scripts ?? {};
   const script = Object.entries(scripts).find(([, v]) => v.includes("truecanvas"));
   add(script ? { label: "Start script", status: "ok", detail: runScript(pm, script[0]) } : { label: "Start script", status: "warn", detail: "none", fix: 'npx truecanvas init  (adds "canvas": "truecanvas dev")' });
   const ignore = fs10.existsSync(path10.join(root, ".gitignore")) ? fs10.readFileSync(path10.join(root, ".gitignore"), "utf8") : "";
-  add(ignore.includes(`${config.appDir}/truecanvas`) ? { label: "Generated route ignored", status: "ok" } : { label: "Generated route ignored", status: "warn", detail: `${config.appDir}/truecanvas/ isn't in .gitignore`, fix: "npx truecanvas init" });
+  add(ignore.includes(config.routeDir) ? { label: "Generated route ignored", status: "ok" } : { label: "Generated route ignored", status: "warn", detail: `${config.routeDir}/ isn't in .gitignore`, fix: "npx truecanvas init" });
   add(hasAgentConfig(root) ? { label: "Agents", status: "ok", detail: ".mcp.json lists Truecanvas" } : { label: "Agents", status: "warn", detail: "not connected for this project", fix: "npx truecanvas connect  (then commit .mcp.json)" });
   const chrome = findChromium();
   add(chrome ? { label: "Screenshots", status: "ok", detail: path10.basename(chrome) } : { label: "Screenshots", status: "warn", detail: "no Chromium found", fix: "npx playwright install chromium-headless-shell  (or install Chrome)" });
@@ -2746,14 +2771,14 @@ async function doctor(root, cliVersion) {
 var HELP = `truecanvas: design with your real React components
 
 Usage
-  truecanvas           In a Next.js app: set it up (asks once) and start the editor.
+  truecanvas           In a Next.js or Vite app: set it up (asks once) and start the editor.
                        Elsewhere: open the Truecanvas window.
   truecanvas connect   Add Truecanvas to this project's .mcp.json (Claude Code, Cursor,
                        VS Code): commit it and every teammate's agent connects
   truecanvas doctor    Check this project and machine, with a fix for each problem
   truecanvas dev       Start the editor + MCP server for this project (no window)
   truecanvas setup     Install and set up Truecanvas in this project, without starting
-  truecanvas init      Only write the config (next.config, script, canvas folder)
+  truecanvas init      Only write the config (next/vite config, script, canvas folder)
   truecanvas open      Open the Truecanvas window (projects dashboard + tabs)
   truecanvas quit      Quit the window and every app it started
   truecanvas desktop   Add Truecanvas to your app launcher (Linux); "desktop remove" undoes it
@@ -2762,8 +2787,8 @@ Usage
 Options
   -y, --yes            Don't ask: set up and connect agents
   --port <n>           Editor/MCP port (default 4800)
-  --app <url>          Your Next.js dev URL (default http://localhost:3000)
-  --no-next            Don't start \`next dev\` (by default it starts when the app isn't running)
+  --app <url>          Your app's dev URL (default http://localhost:3000, Vite :5173)
+  --no-next            Don't start the app's dev server (by default it starts when the app isn't running)
   --no-open            Don't open the editor in your browser
   --cursor, --vscode   connect: also write .cursor/mcp.json / .vscode/mcp.json
   -v, --version        Print the version
@@ -2807,7 +2832,8 @@ async function main() {
   const yes = !!values.yes;
   if (command === "start") {
     const root2 = process.cwd();
-    if (!readPackage(root2) || !("next" in { ...readPackage(root2).dependencies, ...readPackage(root2).devDependencies })) {
+    const deps = { ...readPackage(root2)?.dependencies, ...readPackage(root2)?.devDependencies };
+    if (!("next" in deps) && !("vite" in deps && "react" in deps)) {
       return openWindow(cli, values.port ? Number(values.port) : 4800);
     }
     if (!await ensureSetup(root2, pkgDir, version, yes)) return;
@@ -2881,6 +2907,7 @@ async function main() {
     return console.log(`${c.green("\u2713")} Truecanvas quit. Project apps it started are stopped too.`);
   }
   if (command === "desktop") {
+    if (process.platform !== "linux") return console.log(`The app launcher entry is Linux-only for now. Run ${c.accent("truecanvas open")} to open the window.`);
     if (positionals[1] === "remove") {
       const removed = uninstallDesktop();
       console.log(removed.length ? `${c.green("\u2713")} Removed the launcher.` : "Nothing to remove.");
@@ -2895,7 +2922,7 @@ async function main() {
   }
   const root = process.cwd();
   if (!fs11.existsSync(path11.join(root, "package.json"))) {
-    console.error("Run truecanvas from your Next.js project root (no package.json here).");
+    console.error("Run truecanvas from your app's root (no package.json here).");
     process.exit(1);
   }
   const config = loadConfig(root, { port: values.port ? Number(values.port) : void 0, appUrl: values.app });
@@ -2907,7 +2934,7 @@ async function main() {
   ${c.accent("\u25C6")} ${c.bold("Truecanvas")} is set up in ${c.bold(path11.basename(root))}
 `);
     for (const line of report.done) console.log(`  ${c.green("\u2713")} ${line}`);
-    console.log(`  ${c.green("\u2713")} Canvas folder ${c.bold(config.canvasDir)} and dev route ${c.bold(`${config.appDir}/truecanvas`)}`);
+    console.log(`  ${c.green("\u2713")} Canvas folder ${c.bold(config.canvasDir)} and dev route ${c.bold(config.routeDir)}`);
     for (const line of report.todo) console.log(`  ${c.dim("!")} ${line}`);
     console.log(`
   Next: ${c.accent("npm run canvas")} ${c.dim("(starts your app and the editor)")}
@@ -2934,7 +2961,7 @@ async function main() {
     process.exit(1);
   }
   if (command === "dev" && await openInWindow(root, config.port)) return;
-  const status = nextConfigStatus(root);
+  const status = configStatus(root, config.framework);
   if (!status.wrapped) {
     const report = initProject(config);
     for (const line of report.done) console.log(`  ${c.green("\u2713")} ${line}`);
@@ -2955,13 +2982,14 @@ async function main() {
   const mcp = `${origin}/mcp`;
   let next = null;
   const appUp = await reachable(config.appUrl);
-  if (!appUp && values.next && !values["no-next"]) next = startNext(root, config.appUrl);
+  const devCommand = config.framework === "vite" ? "vite" : "next dev";
+  if (!appUp && values.next && !values["no-next"]) next = startApp(root, config.appUrl, config.framework);
   console.log(`
   ${c.accent("\u25C6")} ${c.bold("Truecanvas")} ${c.dim(`v${version}`)}
 
   ${c.dim("Editor")}   ${c.bold(origin)}
   ${c.dim("MCP")}      ${mcp}
-  ${c.dim("App")}      ${config.appUrl} ${c.dim(appUp ? "(already running)" : next ? "(starting next dev\u2026)" : "(not running)")}
+  ${c.dim("App")}      ${config.appUrl} ${c.dim(appUp ? "(already running)" : next ? `(starting ${devCommand}\u2026)` : "(not running)")}
   ${c.dim("Canvases")} ${ws.canvases().join(", ") || "none"}
 
 ${hasAgentConfig(root, config.port) ? `  ${c.dim("Agents")}   connected through .mcp.json` : `  ${c.dim("Connect your agent:")} ${c.accent("npx truecanvas connect")} ${c.dim("(writes .mcp.json; commit it for your team)")}`}
@@ -2971,9 +2999,9 @@ ${hasAgentConfig(root, config.port) ? `  ${c.dim("Agents")}   connected through
     const result = await Promise.race([waitFor(config.appUrl, 9e4), exited]);
     if (result === true) console.log(`  ${c.green("\u2713")} App ready at ${config.appUrl}
 `);
-    else if (result === "exited") console.log(`  ${c.dim("next dev stopped (see above). Start your app, the editor connects as soon as it's up.")}
+    else if (result === "exited") console.log(`  ${c.dim(`${devCommand} stopped (see above). Start your app, the editor connects as soon as it's up.`)}
 `);
-    else console.log(`  ${c.dim("next dev is taking a while. The editor will connect when it's up.")}
+    else console.log(`  ${c.dim(`${devCommand} is taking a while. The editor will connect when it's up.`)}
 `);
   }
   if (values.open && !values["no-open"]) openBrowser(origin);
@@ -2982,15 +3010,15 @@ ${hasAgentConfig(root, config.port) ? `  ${c.dim("Agents")}   connected through
     if (stopping) return;
     stopping = true;
     const nextGone = next && next.exitCode === null ? new Promise((r) => next.once("exit", r)) : Promise.resolve();
-    next?.kill("SIGINT");
+    if (next) stopTree(next, "SIGINT");
     await Promise.all([shutdown(), Promise.race([nextGone, new Promise((r) => setTimeout(r, 4e3))])]);
-    if (next && next.exitCode === null) next.kill("SIGKILL");
+    if (next && next.exitCode === null) stopTree(next, "SIGKILL");
     process.exit(0);
   };
   process.on("SIGINT", stop);
   process.on("SIGTERM", stop);
   next?.on("exit", (code) => {
-    if (!stopping) console.log(`  ${c.dim(`next dev exited (${code ?? "signal"}).`)}`);
+    if (!stopping) console.log(`  ${c.dim(`${devCommand} exited (${code ?? "signal"}).`)}`);
   });
 }
 async function openWindow(cli, port) {
@@ -3029,7 +3057,7 @@ async function ask(question) {
 }
 async function ensureSetup(root, pkgDir, version, yes, force = false) {
   const tc = installedIn(root);
-  const wrapped = nextConfigStatus(root).wrapped;
+  const wrapped = configStatus(root).wrapped;
   if (tc.declared && tc.installed && wrapped && !force) return true;
   const name = readPackage(root)?.name ?? path11.basename(root);
   if (!yes) {
@@ -3040,7 +3068,7 @@ async function ensureSetup(root, pkgDir, version, yes, force = false) {
     console.log(`
   ${c.accent("\u25C6")} ${c.bold("Truecanvas")} ${c.dim(`v${version}`)}
 `);
-    console.log(`  This adds Truecanvas to ${c.bold(name)}: a dev dependency, a wrapper in next.config,`);
+    console.log(`  This adds Truecanvas to ${c.bold(name)}: a dev dependency, a plugin in ${configStatus(root).framework === "vite" ? "vite.config" : "next.config"},`);
     console.log(`  a ${c.bold("canvas")} script and a canvas with your homepage. Nothing changes in production builds.
 `);
     if (!await ask("Set it up?")) return false;
@@ -3098,19 +3126,21 @@ async function waitFor(url, ms) {
   }
   return false;
 }
-function startNext(root, appUrl) {
-  const port = new URL(appUrl).port || "3000";
-  const bin = path11.join(root, "node_modules", ".bin", "next");
-  const devArgs = ["dev", "-p", port, "-H", "127.0.0.1"];
-  const [cmd, args] = fs11.existsSync(bin) ? [bin, devArgs] : ["npx", ["next", ...devArgs]];
-  const child = spawn3(cmd, args, { cwd: root, env: toolEnv(process.env.NO_COLOR ? {} : { FORCE_COLOR: "1" }), stdio: ["ignore", "pipe", "pipe"], shell: process.platform === "win32" });
-  child.on("error", (err) => console.error(`  ${c.dim("next \u2502")} couldn't start next dev: ${err.message}`));
-  const prefix = c.dim("next \u2502 ");
+function startApp(root, appUrl, framework) {
+  const port = new URL(appUrl).port || (framework === "vite" ? "5173" : "3000");
+  const devArgs = framework === "vite" ? ["--port", port, "--strictPort", "--host", "127.0.0.1"] : ["dev", "-p", port, "-H", "127.0.0.1"];
+  const pkg = framework === "vite" ? "vite" : "next";
+  const bin = binScript(root, pkg);
+  const [cmd, args] = bin ? [process.execPath, [bin, ...devArgs]] : [process.platform === "win32" ? "npx.cmd" : "npx", [pkg, ...devArgs]];
+  const label = framework === "vite" ? "vite" : "next";
+  const child = spawn3(cmd, args, { cwd: root, env: toolEnv(process.env.NO_COLOR ? {} : { FORCE_COLOR: "1" }), stdio: ["ignore", "pipe", "pipe"], shell: !bin && process.platform === "win32" });
+  child.on("error", (err) => console.error(`  ${c.dim(`${label} \u2502`)} couldn't start ${pkg}: ${err.message}`));
+  const prefix = c.dim(`${label} \u2502 `);
   for (const stream of [child.stdout, child.stderr]) {
     let buf = "";
     stream.on("data", (chunk) => {
       buf += chunk.toString();
-      const lines = buf.split("\n");
+      const lines = buf.split(/\r?\n/);
       buf = lines.pop();
       for (const line of lines) if (line.trim()) process.stdout.write(`  ${prefix}${line}
 `);
@@ -3118,6 +3148,22 @@ function startNext(root, appUrl) {
   }
   return child;
 }
+function binScript(root, pkg) {
+  try {
+    const req = createRequire(path11.join(root, "package.json"));
+    const manifest = req.resolve(`${pkg}/package.json`);
+    const { bin } = JSON.parse(fs11.readFileSync(manifest, "utf8"));
+    const rel = typeof bin === "string" ? bin : bin?.[pkg];
+    return rel ? path11.join(path11.dirname(manifest), rel) : null;
+  } catch {
+    return null;
+  }
+}
+function stopTree(child, signal) {
+  if (process.platform === "win32" && child.pid) spawn3("taskkill", ["/pid", String(child.pid), "/T", "/F"], { stdio: "ignore" }).on("error", () => {
+  });
+  else child.kill(signal);
+}
 function openBrowser(url) {
   const cmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
   try {

package/dist/core/index.d.ts

@@ -252,16 +252,23 @@ interface DarkMode {
     /** Value written for light mode with the attribute strategy. */
     lightValue?: string;
 }
+type Framework = "next" | "vite";
 interface TruecanvasConfig {
     root: string;
-    /** Where your Next.js dev server runs. */
+    /** The app's framework: Next.js (App Router) or Vite + React. Detected from package.json. */
+    framework: Framework;
+    /** Where your app's dev server runs. */
     appUrl: string;
     /** Port of the Truecanvas editor + MCP server. */
     port: number;
     /** Folder holding *.canvas.tsx files. */
     canvasDir: string;
-    /** Next.js app directory ("app" or "src/app"). */
+    /** Next.js app directory ("app" or "src/app"); for Vite, the source folder. */
     appDir: string;
+    /** Generated, dev-only render route (project-relative, gitignored). */
+    routeDir: string;
+    /** Vite: stylesheets every frame loads (default: the ones your entry module imports). */
+    css?: string[];
     /** Globs of component files shown in the Components panel. */
     components: string[];
     darkMode: DarkMode;
@@ -430,10 +437,11 @@ declare class Git {
     /** git reports paths from the repo root; we show them from the project root. */
     private rel;
     /**
-     * The project folder as git sees it: git reports real paths, so a folder
-     * reached through a symlink (macOS /var → /private/var) must be resolved too.
+     * The project folder inside the repo ("apps/web/", or "" at the root), as git
+     * itself sees it. Asking git instead of comparing file system paths holds up
+     * through symlinks (macOS /var → /private/var), junctions and Windows short names.
      */
-    private realCwd;
+    private prefix;
     branches(): Promise<{
         current: string | null;
         local: string[];
@@ -864,7 +872,7 @@ declare const DEVICES: Device[];
 declare function findDevice(id: string | null | undefined): Device | undefined;
 
 /**
- * Writes an older version of a canvas next to the generated route so Next can
+ * Writes an older version of a canvas next to the generated route so the app can
  * render it like any canvas ("__compare__<name>"). Relative imports are
  * rewritten for the new location; alias imports (@/…) work unchanged.
  */
@@ -940,9 +948,16 @@ interface InitReport {
     done: string[];
     todo: string[];
 }
+/** Does the app's next.config / vite.config already enable Truecanvas? */
+declare function configStatus(root: string, framework?: Framework): {
+    file: string | null;
+    wrapped: boolean;
+    framework: Framework;
+};
 /**
- * Sets up a Next.js project: wraps next.config, adds a `canvas` script and
- * ignores the generated route. Every step is idempotent and reported.
+ * Sets up a Next.js or Vite project: enables the plugin in its config, adds a
+ * `canvas` script and ignores the generated route. Every step is idempotent
+ * and reported.
  */
 declare function initProject(config: TruecanvasConfig): InitReport;
 /**
@@ -951,5 +966,23 @@ declare function initProject(config: TruecanvasConfig): InitReport;
  * export can't be found (the user is told to wrap it by hand).
  */
 declare function wrapConfigExport(src: string): string | null;
+/**
+ * Adds `truecanvas()` to a vite.config's plugins array, touching nothing
+ * else. Null when there's no plugins array to add it to.
+ */
+declare function addVitePlugin(src: string): string | null;
+
+/**
+ * Generates the dev-only render route `/truecanvas/[canvas]` (Next: an App
+ * Router page; Vite: an entry module the plugin serves) and a registry that
+ * lazily imports each canvas. Idempotent.
+ */
+declare function syncRoute(config: TruecanvasConfig): boolean;
+/**
+ * Stylesheets a Vite app loads globally: the ones its entry module (the
+ * script in index.html) imports. Root-relative ("/src/index.css"), or the
+ * package path for a package's stylesheet.
+ */
+declare function viteStylesheets(root: string): string[];
 
-export { type Actor, type AttrRange, type CanvasDoc, CanvasEditor, type CanvasFrame, type CanvasNode, Catalog, type Command, Comments, type ComponentSpec, DEVICES, type DarkMode, type Device, EditError, type FrameLink, Git, type HistoryEntry, ICON_LIBRARIES, type Icon, type IconLibrary, type ImportInfo, type NodeKind, type Preset, type PropSpec, type PropValue, type ShadcnStatus, type TruecanvasConfig, Workspace, type WorkspaceEvent, allNodes, attrCode, componentJsx, describeComponent, findDevice, findFrame, findNode, frameChanges, iconLibraries, iconLibrary, initProject, injectIds, loadConfig, loadIcons, outlineDoc, parseCanvas, readDesignTokens, searchIcons, shadcnAdd, shadcnInit, shadcnRegistry, shadcnStatus, textCode, wrapConfigExport, writeCompare };
+export { type Actor, type AttrRange, type CanvasDoc, CanvasEditor, type CanvasFrame, type CanvasNode, Catalog, type Command, Comments, type ComponentSpec, DEVICES, type DarkMode, type Device, EditError, type FrameLink, Git, type HistoryEntry, ICON_LIBRARIES, type Icon, type IconLibrary, type ImportInfo, type NodeKind, type Preset, type PropSpec, type PropValue, type ShadcnStatus, type TruecanvasConfig, Workspace, type WorkspaceEvent, addVitePlugin, allNodes, attrCode, componentJsx, configStatus, describeComponent, findDevice, findFrame, findNode, frameChanges, iconLibraries, iconLibrary, initProject, injectIds, loadConfig, loadIcons, outlineDoc, parseCanvas, readDesignTokens, searchIcons, shadcnAdd, shadcnInit, shadcnRegistry, shadcnStatus, syncRoute, textCode, viteStylesheets, wrapConfigExport, writeCompare };