truecanvas 0.2.0 → 0.4.0

package/dist/{chunk-ZPARY6OD.js → chunk-OVYSWA2F.js}

@@ -1,8 +1,18 @@
+import {
+  detectFramework,
+  idOf,
+  isComponentName,
+  jsxName,
+  parseModule,
+  rewriteImportSource,
+  walk
+} from "./chunk-PBKX3SBC.js";
 import {
   Catalog,
   importSpecifier,
+  posix,
   resolveAliasPath
-} from "./chunk-T2TCBSTG.js";
+} from "./chunk-WU7NBTJH.js";
 import {
   ICON_LIBRARIES,
   iconLibrary,
@@ -10,86 +20,6 @@ import {
   searchIcons
 } from "./chunk-C4SATRZT.js";
 
-// src/core/config.ts
-import fs from "fs";
-import path from "path";
-function loadConfig(root, overrides = {}) {
-  let file = {};
-  const configPath = path.join(root, "truecanvas.config.json");
-  if (fs.existsSync(configPath)) file = JSON.parse(fs.readFileSync(configPath, "utf8"));
-  const appDir = file.appDir ?? (fs.existsSync(path.join(root, "src/app")) ? "src/app" : "app");
-  const srcPrefix = appDir.startsWith("src/") ? "src/" : "";
-  let deps = {};
-  try {
-    const pkg = JSON.parse(fs.readFileSync(path.join(root, "package.json"), "utf8"));
-    deps = { ...pkg.dependencies, ...pkg.devDependencies };
-  } catch {
-    deps = {};
-  }
-  const knownLibraries = ["@paper-design/shaders-react"].filter((l) => l in deps);
-  return {
-    root,
-    appUrl: "http://localhost:3000",
-    port: 4800,
-    canvasDir: `${srcPrefix}canvas`,
-    appDir,
-    components: [`${srcPrefix}components/**/*.tsx`],
-    darkMode: { strategy: "class", value: "dark" },
-    ...file,
-    libraries: [.../* @__PURE__ */ new Set([...knownLibraries, ...file.libraries ?? []])],
-    ...stripUndefined(overrides)
-  };
-}
-function stripUndefined(o) {
-  return Object.fromEntries(Object.entries(o).filter(([, v]) => v !== void 0));
-}
-
-// src/core/ast.ts
-import { parse } from "@babel/parser";
-function parseModule(source) {
-  return parse(source, {
-    sourceType: "module",
-    plugins: ["typescript", "jsx"],
-    errorRecovery: false
-  });
-}
-function idOf(node) {
-  const loc = node.loc.start;
-  return `${loc.line}:${loc.column}`;
-}
-function jsxName(name) {
-  if (name.type === "JSXIdentifier") return name.name;
-  if (name.type === "JSXNamespacedName") return `${name.namespace.name}:${name.name.name}`;
-  return `${jsxName(name.object)}.${name.property.name}`;
-}
-function walk(node, visit, parent = null) {
-  if (!node || typeof node !== "object") return;
-  if (Array.isArray(node)) {
-    for (const child of node) walk(child, visit, parent);
-    return;
-  }
-  const n = node;
-  if (typeof n.type !== "string") return;
-  if (visit(n, parent) === false) return;
-  for (const key of Object.keys(n)) {
-    if (key === "loc" || key === "leadingComments" || key === "trailingComments" || key === "innerComments" || key === "extra") continue;
-    const value = n[key];
-    if (value && typeof value === "object") walk(value, visit, n);
-  }
-}
-function isComponentName(name) {
-  return /^[A-Z]/.test(name) || name.includes(".");
-}
-function rewriteImportSource(statement, from, to) {
-  if (from === to) return statement;
-  for (const q of ['"', "'"]) {
-    const needle = `${q}${from}${q}`;
-    const i = statement.indexOf(needle);
-    if (i >= 0) return `${statement.slice(0, i)}${q}${to}${q}${statement.slice(i + needle.length)}`;
-  }
-  return statement;
-}
-
 // src/core/parse.ts
 function parseCanvas(name, file, source) {
   let ast;
@@ -118,8 +48,8 @@ function parseCanvas(name, file, source) {
   let frameIndex = 0;
   for (const child of canvasNode.children) {
     if (child.kind !== "component" || child.name !== "Frame") continue;
-    const path15 = [frameIndex++];
-    reindex(child, path15);
+    const path14 = [frameIndex++];
+    reindex(child, path14);
     frames.push({
       ...child,
       frameName: str(child.props.name) ?? `Frame ${frameIndex}`,
@@ -170,9 +100,9 @@ function topLevelNames(ast) {
   }
   return out;
 }
-function reindex(node, path15) {
-  node.path = path15;
-  node.children.forEach((c, i) => reindex(c, [...path15, i]));
+function reindex(node, path14) {
+  node.path = path14;
+  node.children.forEach((c, i) => reindex(c, [...path14, i]));
 }
 function str(v) {
   return v?.kind === "string" ? v.value : void 0;
@@ -180,10 +110,10 @@ function str(v) {
 function num(v) {
   return v?.kind === "number" ? v.value : void 0;
 }
-function buildNode(el, source, path15) {
+function buildNode(el, source, path14) {
   const children = [];
   for (const child of el.children) {
-    const built = buildChild(child, source, [...path15, children.length]);
+    const built = buildChild(child, source, [...path14, children.length]);
     if (built) children.push(built);
   }
   if (el.type === "JSXFragment") {
@@ -198,7 +128,7 @@ function buildNode(el, source, path15) {
       end: el.end,
       line: el.loc.start.line,
       col: el.loc.start.column,
-      path: path15,
+      path: path14,
       attrs: [],
       nameEnd: el.openingFragment.end - 1,
       openEnd: el.openingFragment.end,
@@ -233,7 +163,7 @@ function buildNode(el, source, path15) {
     end: el.end,
     line: open.loc.start.line,
     col: open.loc.start.column,
-    path: path15,
+    path: path14,
     attrs,
     // after type arguments: `<Select<Opt> …>`
     nameEnd: (open.typeParameters ?? open.name).end,
@@ -242,27 +172,27 @@ function buildNode(el, source, path15) {
     closeStart: el.closingElement ? el.closingElement.start : open.end
   };
 }
-function buildChild(child, source, path15) {
-  if (child.type === "JSXElement" || child.type === "JSXFragment") return buildNode(child, source, path15);
+function buildChild(child, source, path14) {
+  if (child.type === "JSXElement" || child.type === "JSXFragment") return buildNode(child, source, path14);
   if (child.type === "JSXText") {
     const text = child.value.replace(/\s+/g, " ").trim();
     if (!text) return null;
-    return leaf("text", text, child, path15, { text });
+    return leaf("text", text, child, path14, { text });
   }
   if (child.type === "JSXExpressionContainer") {
     const expr = child.expression;
     if (expr.type === "JSXEmptyExpression") return null;
-    if (expr.type === "StringLiteral") return leaf("text", expr.value, child, path15, { text: expr.value });
+    if (expr.type === "StringLiteral") return leaf("text", expr.value, child, path14, { text: expr.value });
     if (expr.type === "TemplateLiteral" && expr.expressions.length === 0) {
       const text = expr.quasis.map((q) => q.value.cooked ?? "").join("");
-      return leaf("text", text, child, path15, { text });
+      return leaf("text", text, child, path14, { text });
     }
-    return leaf("expression", source.slice(expr.start, expr.end), child, path15, {});
+    return leaf("expression", source.slice(expr.start, expr.end), child, path14, {});
   }
-  if (child.type === "JSXSpreadChild") return leaf("expression", source.slice(child.start, child.end), child, path15, {});
+  if (child.type === "JSXSpreadChild") return leaf("expression", source.slice(child.start, child.end), child, path14, {});
   return null;
 }
-function leaf(kind, name, node, path15, extra) {
+function leaf(kind, name, node, path14, extra) {
   return {
     id: `${kind[0]}${idOf(node)}`,
     kind,
@@ -275,7 +205,7 @@ function leaf(kind, name, node, path15, extra) {
     end: node.end,
     line: node.loc.start.line,
     col: node.loc.start.column,
-    path: path15,
+    path: path14,
     attrs: [],
     nameEnd: node.end,
     openEnd: node.end,
@@ -339,10 +269,10 @@ function findNode(doc, id) {
 function findFrame(doc, ref) {
   return doc.frames.find((f) => f.id === ref || f.frameName === ref) ?? null;
 }
-function findByPath(doc, path15) {
-  if (!path15.length) return null;
-  let node = doc.frames[path15[0]];
-  for (const i of path15.slice(1)) node = node?.children[i];
+function findByPath(doc, path14) {
+  if (!path14.length) return null;
+  let node = doc.frames[path14[0]];
+  for (const i of path14.slice(1)) node = node?.children[i];
   return node ?? null;
 }
 
@@ -561,9 +491,9 @@ ${pi}`);
     this.s.appendLeft(this.contentEnd(node), `
 ${this.lineIndent(node.start)}${marked}`);
     if (marked === code.trim()) {
-      const path15 = [...node.path];
-      path15[path15.length - 1] += 1;
-      this.selectPaths.push(path15);
+      const path14 = [...node.path];
+      path14[path14.length - 1] += 1;
+      this.selectPaths.push(path14);
     }
   }
   move(node, target, index) {
@@ -811,23 +741,17 @@ function findDevice(id) {
   return id ? DEVICES.find((d) => d.id === id) : void 0;
 }
 
-// src/core/comments.ts
-import fs3 from "fs";
-import path3 from "path";
-import { randomUUID } from "crypto";
-
 // src/core/scaffold.ts
-import fs2 from "fs";
-import path2 from "path";
+import fs from "fs";
+import path from "path";
 var CANVAS_SUFFIX = ".canvas.tsx";
-var ROUTE = "truecanvas";
 function canvasFiles(config) {
-  const dir = path2.join(config.root, config.canvasDir);
-  if (!fs2.existsSync(dir)) return [];
-  return fs2.readdirSync(dir).filter((f) => f.endsWith(CANVAS_SUFFIX)).sort((a, b) => canvasNameOf(a).localeCompare(canvasNameOf(b)));
+  const dir = path.join(config.root, config.canvasDir);
+  if (!fs.existsSync(dir)) return [];
+  return fs.readdirSync(dir).filter((f) => f.endsWith(CANVAS_SUFFIX)).sort((a, b) => canvasNameOf(a).localeCompare(canvasNameOf(b)));
 }
 function canvasNameOf(file) {
-  return path2.basename(file).slice(0, -CANVAS_SUFFIX.length);
+  return path.basename(file).slice(0, -CANVAS_SUFFIX.length);
 }
 function assertCanvasName(name) {
   if (!/^[a-z0-9][a-z0-9-_]*$/i.test(name)) throw new Error(`Invalid canvas name "${name}". Use letters, digits, - and _.`);
@@ -835,23 +759,25 @@ function assertCanvasName(name) {
 }
 function canvasPath(config, name) {
   assertCanvasName(name);
-  return path2.join(config.root, config.canvasDir, `${name}${CANVAS_SUFFIX}`);
+  return path.join(config.root, config.canvasDir, `${name}${CANVAS_SUFFIX}`);
 }
 function writeIfChanged(file, content) {
-  if (fs2.existsSync(file) && fs2.readFileSync(file, "utf8") === content) return false;
-  fs2.mkdirSync(path2.dirname(file), { recursive: true });
-  fs2.writeFileSync(file, content);
+  if (fs.existsSync(file) && fs.readFileSync(file, "utf8") === content) return false;
+  fs.mkdirSync(path.dirname(file), { recursive: true });
+  fs.writeFileSync(file, content);
   return true;
 }
+function routeDirOf(config) {
+  return path.join(config.root, config.routeDir);
+}
 function syncRoute(config) {
-  const routeDir = path2.join(config.root, config.appDir, ROUTE);
-  const pageFile = path2.join(routeDir, "[canvas]", "page.tsx");
-  const registryFile = path2.join(routeDir, "canvases.tsx");
-  const canvasDirAbs = path2.join(config.root, config.canvasDir);
-  let rel = path2.relative(routeDir, canvasDirAbs);
+  const routeDir = routeDirOf(config);
+  const registryFile = path.join(routeDir, "canvases.tsx");
+  const canvasDirAbs = path.join(config.root, config.canvasDir);
+  let rel = posix(path.relative(routeDir, canvasDirAbs));
   if (!rel.startsWith(".")) rel = `./${rel}`;
-  const compareDir = path2.join(routeDir, "compare");
-  const compares = fs2.existsSync(compareDir) ? fs2.readdirSync(compareDir).filter((f) => f.endsWith(CANVAS_SUFFIX)) : [];
+  const compareDir = path.join(routeDir, "compare");
+  const compares = fs.existsSync(compareDir) ? fs.readdirSync(compareDir).filter((f) => f.endsWith(CANVAS_SUFFIX)) : [];
   const entries = [
     ...canvasFiles(config).map((f) => `  ${JSON.stringify(canvasNameOf(f))}: lazy(() => import(${JSON.stringify(`${rel}/${f.replace(/\.tsx$/, "")}`)})),`),
     // older versions rendered for Compare
@@ -873,6 +799,10 @@ export default function Canvases(props: Omit<HostProps, "canvases" | "components
 }
 `;
   const dm = config.darkMode;
+  const componentsFile = path.join(routeDir, "components.tsx");
+  if (!fs.existsSync(componentsFile)) writeIfChanged(componentsFile, componentRegistry(config, []));
+  const a = writeIfChanged(registryFile, registry);
+  if (config.framework === "vite") return writeIfChanged(path.join(routeDir, "entry.tsx"), viteEntry(config)) || a;
   const page = `/* eslint-disable */
 // Generated by Truecanvas. Dev-only route that renders canvas frames.
 import { notFound } from "next/navigation";
@@ -900,11 +830,51 @@ export default async function TruecanvasFrame({
   );
 }
 `;
-  const componentsFile = path2.join(routeDir, "components.tsx");
-  if (!fs2.existsSync(componentsFile)) writeIfChanged(componentsFile, componentRegistry(config, []));
-  const a = writeIfChanged(registryFile, registry);
-  const b = writeIfChanged(pageFile, page);
-  return a || b;
+  return writeIfChanged(path.join(routeDir, "[canvas]", "page.tsx"), page) || a;
+}
+function viteEntry(config) {
+  const css = (config.css ?? viteStylesheets(config.root)).map((f) => f.startsWith("/") ? f : f.startsWith("./") ? f.slice(1) : fs.existsSync(path.join(config.root, f)) ? `/${f}` : f);
+  return `/* eslint-disable */
+// Generated by Truecanvas. Dev-only entry that renders canvas frames at /truecanvas/<canvas>.
+${css.map((f) => `import ${JSON.stringify(f)};`).join("\n")}
+import { createRoot } from "react-dom/client";
+import Canvases from "./canvases";
+
+const query = new URLSearchParams(location.search);
+const canvas = decodeURIComponent(location.pathname.split("/")[2] ?? "");
+
+createRoot(document.getElementById("tc-root")!).render(
+  <Canvases
+    canvas={canvas}
+    frame={query.get("frame")}
+    theme={(query.get("theme") as "light" | "dark" | "system" | null) ?? "system"}
+    darkMode={${JSON.stringify(config.darkMode)}}
+  />,
+);
+`;
+}
+function viteStylesheets(root) {
+  let html = "";
+  try {
+    html = fs.readFileSync(path.join(root, "index.html"), "utf8");
+  } catch {
+    return [];
+  }
+  const src = /<script[^>]*type=["']module["'][^>]*src=["']([^"']+)["']/i.exec(html)?.[1] ?? /<script[^>]*src=["']([^"']+)["'][^>]*type=["']module["']/i.exec(html)?.[1];
+  if (!src || /^https?:/.test(src)) return [];
+  const entry = path.join(root, src.replace(/^\//, ""));
+  let code = "";
+  try {
+    code = fs.readFileSync(entry, "utf8");
+  } catch {
+    return [];
+  }
+  const out = [];
+  for (const m of code.matchAll(/^\s*import\s+["']([^"']+\.(?:css|scss|sass|less|styl|pcss))["']/gm)) {
+    const spec = m[1];
+    out.push(spec.startsWith(".") ? `/${posix(path.relative(root, path.resolve(path.dirname(entry), spec)))}` : spec);
+  }
+  return out;
 }
 var STARTER_CANVAS = `"use client";
 import { Canvas, Frame } from "truecanvas";
@@ -977,11 +947,11 @@ export default function StarterCanvas() {
 }
 `;
 function componentRegistry(config, specs) {
-  const routeDir = path2.join(config.root, config.appDir, ROUTE);
+  const routeDir = routeDirOf(config);
   const lines = specs.map((c) => {
     let from = c.library;
     if (!from) {
-      from = path2.relative(routeDir, path2.join(config.root, c.file)).replace(/\.(tsx|ts|jsx|js)$/, "");
+      from = posix(path.relative(routeDir, path.join(config.root, c.file))).replace(/\.(tsx|ts|jsx|js)$/, "");
       if (!from.startsWith(".")) from = `./${from}`;
     }
     return `  ${JSON.stringify(c.name)}: lazy(() => import(${JSON.stringify(from)}).then((m) => ({ default: m[${JSON.stringify(c.name)}] }))),`;
@@ -998,34 +968,46 @@ ${lines.join("\n")}
 `;
 }
 function syncComponentRegistry(config, specs) {
-  const file = path2.join(config.root, config.appDir, ROUTE, "components.tsx");
+  const file = path.join(routeDirOf(config), "components.tsx");
   return writeIfChanged(file, componentRegistry(config, specs));
 }
 
 // src/core/comments.ts
+import fs2 from "fs";
+import path2 from "path";
+import { randomUUID } from "crypto";
 var Comments = class {
   constructor(config) {
     this.config = config;
   }
   config;
   file(canvas) {
-    return path3.join(this.config.root, this.config.canvasDir, `${assertCanvasName(canvas)}.comments.json`);
+    return path2.join(this.config.root, this.config.canvasDir, `${assertCanvasName(canvas)}.comments.json`);
   }
-  list(canvas) {
+  read(canvas) {
     try {
-      return JSON.parse(fs3.readFileSync(this.file(canvas), "utf8")).threads ?? [];
+      const f = JSON.parse(fs2.readFileSync(this.file(canvas), "utf8"));
+      return { version: 1, threads: f.threads ?? [], dismissed: f.dismissed };
     } catch {
-      return [];
+      return { version: 1, threads: [] };
     }
   }
-  save(canvas, threads) {
+  list(canvas) {
+    return this.read(canvas).threads;
+  }
+  /** Ids of client threads deleted here. */
+  dismissed(canvas) {
+    return new Set(this.read(canvas).dismissed ?? []);
+  }
+  save(canvas, threads, dismissed = this.read(canvas).dismissed) {
     const file = this.file(canvas);
-    if (!threads.length) {
-      if (fs3.existsSync(file)) fs3.rmSync(file);
+    if (!threads.length && !dismissed?.length) {
+      if (fs2.existsSync(file)) fs2.rmSync(file);
       return;
     }
-    fs3.mkdirSync(path3.dirname(file), { recursive: true });
-    fs3.writeFileSync(file, `${JSON.stringify({ version: 1, threads }, null, 2)}
+    fs2.mkdirSync(path2.dirname(file), { recursive: true });
+    const data = { version: 1, threads, ...dismissed?.length ? { dismissed } : {} };
+    fs2.writeFileSync(file, `${JSON.stringify(data, null, 2)}
 `);
   }
   update(canvas, id, fn) {
@@ -1063,12 +1045,23 @@ var Comments = class {
     return this.update(canvas, id, (t) => {
       t.resolved = resolved;
       t.resolvedBy = resolved ? author : void 0;
+      t.resolvedAt = Date.now();
     });
   }
+  /** Applies synced threads (from a share link) in one write; returns whether anything changed. */
+  merge(canvas, fn) {
+    const threads = this.list(canvas);
+    if (!fn(threads)) return false;
+    this.save(canvas, threads);
+    return true;
+  }
   remove(canvas, id) {
+    const { threads, dismissed = [] } = this.read(canvas);
+    const gone = threads.find((t) => t.id === id);
     this.save(
       canvas,
-      this.list(canvas).filter((t) => t.id !== id)
+      threads.filter((t) => t.id !== id),
+      gone?.share ? [.../* @__PURE__ */ new Set([...dismissed, id])] : dismissed
     );
   }
   /** Frames keep their comments when renamed. */
@@ -1080,14 +1073,13 @@ var Comments = class {
   }
   renameCanvas(from, to) {
     const a = this.file(from);
-    if (fs3.existsSync(a)) fs3.renameSync(a, this.file(to));
+    if (fs2.existsSync(a)) fs2.renameSync(a, this.file(to));
   }
 };
 
 // src/core/git.ts
 import { execFile } from "child_process";
-import fs4 from "fs";
-import path4 from "path";
+import path3 from "path";
 var GitError = class extends EditError {
 };
 function git(cwd, args, timeout = 3e4, opts = {}) {
@@ -1127,6 +1119,7 @@ var Git = class {
       return { repo: false, root: null, branch: null, unborn: false, upstream: null, ahead: 0, behind: 0, files: [], user: null, defaultBranch: null, remote: null };
     }
     const out = await git(this.cwd, ["status", "--porcelain=v2", "-z", "--branch", "--untracked-files=all", "--", "."]);
+    const prefix = await this.prefix();
     const s = { repo: true, root, branch: null, unborn: false, upstream: null, ahead: 0, behind: 0, files: [], user: null, defaultBranch: null, remote: null };
     const entries = out.split("\0");
     for (let i = 0; i < entries.length; i++) {
@@ -1143,10 +1136,10 @@ var Git = class {
         const file = parts.slice(line.startsWith("2 ") ? 9 : 8).join(" ");
         if (line.startsWith("2 ")) i++;
         const code = xy.replace(".", "")[0] ?? "M";
-        s.files.push({ path: this.rel(root, file), status: code === "A" ? "added" : code === "D" ? "deleted" : code === "R" ? "renamed" : "modified", staged: xy[0] !== "." });
+        s.files.push({ path: this.rel(prefix, file), status: code === "A" ? "added" : code === "D" ? "deleted" : code === "R" ? "renamed" : "modified", staged: xy[0] !== "." });
       } else if (line.startsWith("u ")) {
-        s.files.push({ path: this.rel(root, line.split(" ").slice(10).join(" ")), status: "conflicted", staged: false });
-      } else if (line.startsWith("? ")) s.files.push({ path: this.rel(root, line.slice(2)), status: "untracked", staged: false });
+        s.files.push({ path: this.rel(prefix, line.split(" ").slice(10).join(" ")), status: "conflicted", staged: false });
+      } else if (line.startsWith("? ")) s.files.push({ path: this.rel(prefix, line.slice(2)), status: "untracked", staged: false });
     }
     s.user = (await git(this.cwd, ["config", "user.name"]).catch(() => "")).trim() || null;
     s.remote = (await git(this.cwd, ["remote", "get-url", "origin"]).catch(() => "")).trim() || null;
@@ -1201,8 +1194,8 @@ var Git = class {
     safeRef(branch);
     const tip = (await git(this.cwd, ["rev-parse", "--verify", "--quiet", `refs/heads/${branch}`]).catch(() => "")).trim() || (await git(this.cwd, ["rev-parse", "--verify", "--quiet", `refs/remotes/origin/${branch}`]).catch(() => "")).trim();
     const os = await import("os");
-    const fs15 = await import("fs");
-    const index = path4.join(os.tmpdir(), `truecanvas-index-${process.pid}-${Date.now()}`);
+    const fs13 = await import("fs");
+    const index = path3.join(os.tmpdir(), `truecanvas-index-${process.pid}-${Date.now()}`);
     const env = { GIT_INDEX_FILE: index };
     try {
       if (tip) await git(this.cwd, ["read-tree", tip], 3e4, { env });
@@ -1216,7 +1209,7 @@ var Git = class {
       await git(this.cwd, ["update-ref", `refs/heads/${branch}`, commit]);
       await git(this.cwd, ["push", "origin", `refs/heads/${branch}:refs/heads/${branch}`], 12e4);
     } finally {
-      fs15.rmSync(index, { force: true });
+      fs13.rmSync(index, { force: true });
     }
   }
   // ---------- GitHub (gh CLI) ----------
@@ -1250,19 +1243,16 @@ var Git = class {
     return (await git(this.cwd, ["remote", "get-url", "origin"])).trim();
   }
   /** git reports paths from the repo root; we show them from the project root. */
-  rel(root, file) {
-    return path4.relative(this.realCwd(), path4.join(root, file));
+  rel(prefix, file) {
+    return file.startsWith(prefix) ? file.slice(prefix.length) : posix(path3.posix.relative(prefix, file));
   }
   /**
-   * 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.
    */
-  realCwd() {
-    try {
-      return fs4.realpathSync(this.cwd);
-    } catch {
-      return this.cwd;
-    }
+  async prefix() {
+    return (await git(this.cwd, ["rev-parse", "--show-prefix"]).catch(() => "")).trim();
   }
   async branches() {
     const out = await git(this.cwd, ["branch", "-a", "--format=%(refname)%09%(HEAD)"]).catch(() => "");
@@ -1290,8 +1280,7 @@ var Git = class {
   }
   /** A file's content at a ref, or null if it doesn't exist there. */
   async show(ref, file) {
-    const root = (await git(this.cwd, ["rev-parse", "--show-toplevel"])).trim();
-    const inRepo = path4.relative(root, path4.join(this.realCwd(), file)).split(path4.sep).join("/");
+    const inRepo = path3.posix.normalize(`${await this.prefix()}${posix(file)}`);
     return git(this.cwd, ["show", `${safeRef(ref)}:${inRepo}`, "--"]).catch(() => null);
   }
   async commit(message, files) {
@@ -1320,17 +1309,17 @@ var Git = class {
 };
 
 // src/core/workspace.ts
-import fs9 from "fs";
-import path9 from "path";
+import fs7 from "fs";
+import path8 from "path";
 import { createRequire } from "module";
 
 // src/core/link.ts
-import fs6 from "fs";
-import path6 from "path";
+import fs4 from "fs";
+import path5 from "path";
 
 // src/core/routes.ts
-import fs5 from "fs";
-import path5 from "path";
+import fs3 from "fs";
+import path4 from "path";
 
 // src/core/source.ts
 function defaultReturn(source, layout) {
@@ -1542,28 +1531,29 @@ function parseTargetDoc(file, source) {
 var PAGE = /^page\.(tsx|jsx|ts|js)$/;
 var LAYOUT = ["layout.tsx", "layout.jsx", "layout.js", "layout.ts"];
 function listRoutes(config) {
-  const appDir = path5.join(config.root, config.appDir);
+  if (config.framework !== "next") return [];
+  const appDir = path4.join(config.root, config.appDir);
   const out = [];
   const walkDir = (dir, segments) => {
     let entries;
     try {
-      entries = fs5.readdirSync(dir, { withFileTypes: true });
+      entries = fs3.readdirSync(dir, { withFileTypes: true });
     } catch {
       return;
     }
     for (const e of entries) {
       if (e.isFile() && PAGE.test(e.name)) {
         const visible = segments.filter((s) => !/^\(.*\)$/.test(s) && !s.startsWith("@"));
-        out.push({ route: `/${visible.join("/")}`, file: path5.relative(config.root, path5.join(dir, e.name)), dynamic: segments.some((s) => s.startsWith("[")) });
+        out.push({ route: `/${visible.join("/")}`, file: posix(path4.relative(config.root, path4.join(dir, e.name))), dynamic: segments.some((s) => s.startsWith("[")) });
       }
-      if (e.isDirectory() && !e.name.startsWith("_") && e.name !== "truecanvas" && e.name !== "api" && e.name !== "node_modules") walkDir(path5.join(dir, e.name), [...segments, e.name]);
+      if (e.isDirectory() && !e.name.startsWith("_") && e.name !== "truecanvas" && e.name !== "api" && e.name !== "node_modules") walkDir(path4.join(dir, e.name), [...segments, e.name]);
     }
   };
   walkDir(appDir, []);
   return out.sort((a, b) => a.route.localeCompare(b.route));
 }
 function extract(file, canvasFile, config, layout) {
-  const source = fs5.readFileSync(file, "utf8");
+  const source = fs3.readFileSync(file, "utf8");
   const info = defaultReturn(source, layout);
   if (!info?.pure) return null;
   const imports = [];
@@ -1579,26 +1569,26 @@ function extract(file, canvasFile, config, layout) {
 }
 function repoint(config, spec, fromFile, toFile) {
   if (!spec.startsWith(".")) return spec;
-  return importSpecifier(config.root, path5.relative(config.root, toFile), path5.relative(config.root, path5.resolve(path5.dirname(fromFile), spec)));
+  return importSpecifier(config.root, path4.relative(config.root, toFile), path4.relative(config.root, path4.resolve(path4.dirname(fromFile), spec)));
 }
 function layoutFiles(config, pageFile) {
-  const appDir = path5.join(config.root, config.appDir);
+  const appDir = path4.join(config.root, config.appDir);
   const out = [];
-  for (let dir = path5.dirname(path5.resolve(config.root, pageFile)); dir.startsWith(appDir) && dir !== appDir; dir = path5.dirname(dir)) {
-    const file = LAYOUT.map((f) => path5.join(dir, f)).find((f) => fs5.existsSync(f));
-    if (file) out.push(path5.relative(config.root, file));
+  for (let dir = path4.dirname(path4.resolve(config.root, pageFile)); dir.startsWith(appDir) && dir !== appDir; dir = path4.dirname(dir)) {
+    const file = LAYOUT.map((f) => path4.join(dir, f)).find((f) => fs3.existsSync(f));
+    if (file) out.push(posix(path4.relative(config.root, file)));
   }
   return out;
 }
 function routeOf(config, pageFile) {
-  const rel = path5.relative(path5.join(config.root, config.appDir), path5.dirname(path5.resolve(config.root, pageFile)));
-  const visible = rel.split(path5.sep).filter((s) => s && !/^\(.*\)$/.test(s) && !s.startsWith("@"));
+  const rel = path4.relative(path4.join(config.root, config.appDir), path4.dirname(path4.resolve(config.root, pageFile)));
+  const visible = rel.split(path4.sep).filter((s) => s && !/^\(.*\)$/.test(s) && !s.startsWith("@"));
   return `/${visible.join("/")}`;
 }
 function routeFrame(config, pageFile, canvasFile) {
-  const appDir = path5.join(config.root, config.appDir);
-  const pageAbs = path5.resolve(config.root, pageFile);
-  const canvasAbs = path5.resolve(config.root, canvasFile);
+  const appDir = path4.join(config.root, config.appDir);
+  const pageAbs = path4.resolve(config.root, pageFile);
+  const canvasAbs = path4.resolve(config.root, canvasFile);
   const imports = [];
   let mode = "inline";
   const page = extract(pageAbs, canvasAbs, config, false);
@@ -1612,8 +1602,8 @@ function routeFrame(config, pageFile, canvasFile) {
     jsx = "<RoutePage />";
   }
   let i = 0;
-  for (let dir = path5.dirname(pageAbs); dir.startsWith(appDir) && dir !== appDir; dir = path5.dirname(dir)) {
-    const file = LAYOUT.map((f) => path5.join(dir, f)).find((f) => fs5.existsSync(f));
+  for (let dir = path4.dirname(pageAbs); dir.startsWith(appDir) && dir !== appDir; dir = path4.dirname(dir)) {
+    const file = LAYOUT.map((f) => path4.join(dir, f)).find((f) => fs3.existsSync(f));
     if (!file) continue;
     const layout = extract(file, canvasAbs, config, true);
     const holes = layout ? (layout.jsx.match(/\{\s*children\s*\}/g) ?? []).length : 0;
@@ -1623,7 +1613,7 @@ function routeFrame(config, pageFile, canvasFile) {
       imports.push(...layout.imports);
     } else {
       const local = `RouteLayout${i++ || ""}`;
-      imports.push(`import ${local} from ${JSON.stringify(importSpecifier(config.root, canvasFile, path5.relative(config.root, file)))};`);
+      imports.push(`import ${local} from ${JSON.stringify(importSpecifier(config.root, canvasFile, path4.relative(config.root, file)))};`);
       jsx = `<${local}>${jsx}</${local}>`;
     }
   }
@@ -1644,16 +1634,16 @@ function wrapperChain(frame) {
 }
 function readSource(config, rel) {
   try {
-    return fs6.readFileSync(path6.join(config.root, rel), "utf8");
+    return fs4.readFileSync(path5.join(config.root, rel), "utf8");
   } catch {
     return null;
   }
 }
 var parseMemo = /* @__PURE__ */ new Map();
-function memoParse(key, source, parse2) {
+function memoParse(key, source, parse) {
   let hit = parseMemo.get(key);
   if (!hit || hit.source !== source) {
-    hit = { source, doc: parse2() };
+    hit = { source, doc: parse() };
     parseMemo.set(key, hit);
   }
   return hit.doc && { ...hit.doc, frames: hit.doc.frames.map(cloneTree) };
@@ -1755,7 +1745,7 @@ function linkedFrameBody(config, doc, canvasRel, page) {
   const pageName = importName(config, doc, canvasRel, page, `${segments.length ? pascal(segments[segments.length - 1]) : "Home"}Page`, taken, imports);
   let jsx = `<${pageName} />`;
   for (const rel of layoutFiles(config, page)) {
-    const dir = path6.basename(path6.dirname(rel));
+    const dir = path5.basename(path5.dirname(rel));
     const name = importName(config, doc, canvasRel, rel, `${pascal(dir) || "Route"}Layout`, taken, imports);
     jsx = `<${name}>
 ${indentBlock(jsx)}
@@ -1777,7 +1767,7 @@ function dedent(code) {
 function explorationBody(config, frame, canvasRel) {
   if (frame.component) throw new EditError(`"${frame.frameName}" is a main component: edit it directly, every instance follows.`);
   if (!frame.page) throw new EditError(`"${frame.frameName}" isn't linked to a page.`);
-  const pageAbs = path6.join(config.root, frame.page);
+  const pageAbs = path5.join(config.root, frame.page);
   const source = readSource(config, frame.page);
   if (source === null) throw new EditError(`${frame.page} doesn't exist anymore.`);
   const chain = wrapperChain(frame);
@@ -1789,7 +1779,7 @@ function explorationBody(config, frame, canvasRel) {
     for (const stmt of info.ast.program.body) {
       if (stmt.type !== "ImportDeclaration" || stmt.importKind === "type" || /\.(css|scss|sass|less)$/.test(stmt.source.value)) continue;
       const src = stmt.source.value;
-      const from = repoint(config, src, pageAbs, path6.join(config.root, canvasRel));
+      const from = repoint(config, src, pageAbs, path5.join(config.root, canvasRel));
       const text = source.slice(stmt.start, stmt.end);
       imports.push(from === src ? text : rewriteImportSource(text, src, from));
     }
@@ -1805,7 +1795,7 @@ ${indentBlock(jsx)}
 function applyPlan(config, canvasSource, doc, frame, canvasRel) {
   const page = frame.from;
   if (!page) throw new EditError(`"${frame.frameName}" isn't an exploration of a page. Explore a copy of a linked frame first.`);
-  if (!fs6.existsSync(path6.join(config.root, page))) throw new EditError(`${page} doesn't exist anymore.`);
+  if (!fs4.existsSync(path5.join(config.root, page))) throw new EditError(`${page} doesn't exist anymore.`);
   const layoutSpecs = new Set(doc.imports.filter((i) => /(^|\/)layout(\.\w+)?$/.test(i.source)).flatMap((i) => [...i.names, ...i.defaultName ? [i.defaultName] : []]));
   let content = frame.children;
   for (; ; ) {
@@ -1831,7 +1821,7 @@ ${indentBlock(body)}
       continue;
     }
     const sp = decl.specifiers.find((x) => x.local.name === name);
-    const from = repoint(config, decl.source.value, path6.join(config.root, canvasRel), path6.join(config.root, page));
+    const from = repoint(config, decl.source.value, path5.join(config.root, canvasRel), path5.join(config.root, page));
     const what = sp.type === "ImportDefaultSpecifier" ? name : sp.type === "ImportNamespaceSpecifier" ? `* as ${name}` : `{ ${sp.imported.type === "Identifier" && sp.imported.name !== name ? `${sp.imported.name} as ${name}` : name} }`;
     imports.push(`import ${what} from ${JSON.stringify(from)};`);
   }
@@ -1864,8 +1854,8 @@ function pruneImports(source, candidates) {
 }
 
 // src/core/motion.ts
-import fs7 from "fs";
-import path7 from "path";
+import fs5 from "fs";
+import path6 from "path";
 var REVEAL = `"use client";
 
 import { Children, cloneElement, isValidElement, useEffect, useRef, useState, type CSSProperties, type ReactElement, type ReactNode } from "react";
@@ -2090,8 +2080,8 @@ export function TextAnimate({ effect = "words", stagger = 0.06, delay = 0, durat
 function motionFiles(config) {
   const glob = config.components[0] ?? "components/**/*.tsx";
   const base = glob.split("/").filter((p) => !p.includes("*")).join("/") || "components";
-  const dir = path7.join(base, "motion");
-  return { reveal: path7.join(dir, "reveal.tsx"), text: path7.join(dir, "text-animate.tsx") };
+  const dir = `${base}/motion`;
+  return { reveal: `${dir}/reveal.tsx`, text: `${dir}/text-animate.tsx` };
 }
 function ensureMotionComponents(config) {
   const files = motionFiles(config);
@@ -2100,18 +2090,18 @@ function ensureMotionComponents(config) {
     [files.reveal, REVEAL],
     [files.text, TEXT_ANIMATE]
   ]) {
-    const abs = path7.join(config.root, rel);
-    if (fs7.existsSync(abs)) continue;
-    fs7.mkdirSync(path7.dirname(abs), { recursive: true });
-    fs7.writeFileSync(abs, content);
+    const abs = path6.join(config.root, rel);
+    if (fs5.existsSync(abs)) continue;
+    fs5.mkdirSync(path6.dirname(abs), { recursive: true });
+    fs5.writeFileSync(abs, content);
     created = true;
   }
   return { ...files, created };
 }
 
 // src/core/components.ts
-import fs8 from "fs";
-import path8 from "path";
+import fs6 from "fs";
+import path7 from "path";
 function componentsDir(config) {
   const glob = config.components[0] ?? "components/**/*.tsx";
   return glob.split("/").filter((p) => !p.includes("*")).join("/") || "components";
@@ -2175,11 +2165,11 @@ function importsFor(config, jsx, source, doc, fromRel, toRel) {
       (s) => s.type === "ImportDeclaration" && s.importKind !== "type" && s.specifiers.some((sp2) => sp2.local.name === name)
     );
     if (!decl) {
-      if (doc.declared.includes(name)) throw new EditError(`These layers use ${name}, defined in ${path8.basename(fromRel)}. Move it to its own file first, or ask your agent to extract the component.`);
+      if (doc.declared.includes(name)) throw new EditError(`These layers use ${name}, defined in ${path7.basename(fromRel)}. Move it to its own file first, or ask your agent to extract the component.`);
       throw new EditError(`These layers use \`${name}\` from the surrounding code, so they can't become a component automatically. Ask your agent to extract it with props.`);
     }
     const sp = decl.specifiers.find((x) => x.local.name === name);
-    const from = repoint(config, decl.source.value, path8.join(config.root, fromRel), path8.join(config.root, toRel));
+    const from = repoint(config, decl.source.value, path7.join(config.root, fromRel), path7.join(config.root, toRel));
     const what = sp.type === "ImportDefaultSpecifier" ? name : sp.type === "ImportNamespaceSpecifier" ? `* as ${name}` : `{ ${sp.imported.type === "Identifier" && sp.imported.name !== name ? `${sp.imported.name} as ${name}` : name} }`;
     out.push(`import ${what} from ${JSON.stringify(from)};`);
   }
@@ -2203,8 +2193,8 @@ ${indentBlock(indentBlock(jsx.trim()))}
 `;
 }
 function newComponentPath(config, name) {
-  const rel = path8.join(componentsDir(config), `${kebab(name)}.tsx`);
-  if (fs8.existsSync(path8.join(config.root, rel))) throw new EditError(`${rel} already exists. Pick another name.`);
+  const rel = `${componentsDir(config)}/${kebab(name)}.tsx`;
+  if (fs6.existsSync(path7.join(config.root, rel))) throw new EditError(`${rel} already exists. Pick another name.`);
   return rel;
 }
 
@@ -2224,7 +2214,7 @@ var Workspace = class {
     this.catalog = new Catalog(config.root, config.components, config.libraries);
     this.comments = new Comments(config);
     this.git = new Git(config.root);
-    for (const c of this.canvases()) this.sources.set(c, fs9.readFileSync(this.file(c), "utf8"));
+    for (const c of this.canvases()) this.sources.set(c, fs7.readFileSync(this.file(c), "utf8"));
   }
   config;
   catalog;
@@ -2255,12 +2245,12 @@ var Workspace = class {
     return canvasPath(this.config, canvas);
   }
   relFile(canvas) {
-    return path9.relative(this.config.root, this.file(canvas));
+    return posix(path8.relative(this.config.root, this.file(canvas)));
   }
   read(canvas) {
     const file = this.file(canvas);
-    if (!fs9.existsSync(file)) throw new EditError(`Canvas "${canvas}" does not exist. Canvases: ${this.canvases().join(", ") || "none"}`);
-    const src = fs9.readFileSync(file, "utf8");
+    if (!fs7.existsSync(file)) throw new EditError(`Canvas "${canvas}" does not exist. Canvases: ${this.canvases().join(", ") || "none"}`);
+    const src = fs7.readFileSync(file, "utf8");
     if (!this.sources.has(canvas)) this.sources.set(canvas, src);
     return src;
   }
@@ -2285,7 +2275,7 @@ var Workspace = class {
   docCache = /* @__PURE__ */ new Map();
   stamp(rel) {
     try {
-      const st = fs9.statSync(path9.join(this.config.root, rel));
+      const st = fs7.statSync(path8.join(this.config.root, rel));
       return `${st.mtimeMs}:${st.size}`;
     } catch {
       return "missing";
@@ -2299,8 +2289,8 @@ var Workspace = class {
     const linked = fileOfId(id);
     if (linked) assertShown(doc, linked);
     const rel = linked ?? this.relFile(canvas);
-    const abs = path9.join(this.config.root, rel);
-    return { node: hit.node, rel, abs, source: fs9.readFileSync(abs, "utf8") };
+    const abs = path8.join(this.config.root, rel);
+    return { node: hit.node, rel, abs, source: fs7.readFileSync(abs, "utf8") };
   }
   /** Page and layout files shown by linked frames, across all canvases (the Git panel counts them as design files). */
   linkedFiles() {
@@ -2319,7 +2309,7 @@ var Workspace = class {
    */
   designFiles() {
     const m = motionFiles(this.config);
-    return [...this.linkedFiles(), ...[m.reveal, m.text].filter((f) => fs9.existsSync(path9.join(this.config.root, f)))];
+    return [...this.linkedFiles(), ...[m.reveal, m.text].filter((f) => fs7.existsSync(path8.join(this.config.root, f)))];
   }
   /** Canvases with a linked frame showing this page or layout file. */
   canvasesLinking(rel) {
@@ -2335,7 +2325,7 @@ var Workspace = class {
   linkedFileChanged(rel) {
     let next;
     try {
-      next = fs9.readFileSync(path9.join(this.config.root, rel), "utf8");
+      next = fs7.readFileSync(path8.join(this.config.root, rel), "utf8");
     } catch {
       next = "";
     }
@@ -2347,9 +2337,9 @@ var Workspace = class {
   }
   createCanvas(name, actor, content = STARTER_CANVAS) {
     const file = canvasPath(this.config, name);
-    if (fs9.existsSync(file)) throw new EditError(`Canvas "${name}" already exists.`);
-    fs9.mkdirSync(path9.dirname(file), { recursive: true });
-    fs9.writeFileSync(file, content);
+    if (fs7.existsSync(file)) throw new EditError(`Canvas "${name}" already exists.`);
+    fs7.mkdirSync(path8.dirname(file), { recursive: true });
+    fs7.writeFileSync(file, content);
     this.sources.set(name, content);
     this.canvasesChanged();
     this.record(name, `Created canvas ${name}`, actor, "", content, []);
@@ -2384,10 +2374,10 @@ var Workspace = class {
   }
   renameCanvas(from, to) {
     const src = this.file(from);
-    if (!fs9.existsSync(src)) throw new EditError(`Canvas "${from}" does not exist.`);
+    if (!fs7.existsSync(src)) throw new EditError(`Canvas "${from}" does not exist.`);
     const dest = canvasPath(this.config, to);
-    if (fs9.existsSync(dest)) throw new EditError(`A canvas named "${to}" already exists.`);
-    fs9.renameSync(src, dest);
+    if (fs7.existsSync(dest)) throw new EditError(`A canvas named "${to}" already exists.`);
+    fs7.renameSync(src, dest);
     this.comments.renameCanvas(from, to);
     for (const map of [this.sources, this.undoStacks, this.redoStacks]) {
       if (map.has(from)) {
@@ -2404,7 +2394,7 @@ var Workspace = class {
   duplicateCanvas(name) {
     const source = this.read(name);
     const copy = this.uniqueCanvasName(`${name}-copy`);
-    fs9.writeFileSync(canvasPath(this.config, copy), source);
+    fs7.writeFileSync(canvasPath(this.config, copy), source);
     this.sources.set(copy, source);
     this.canvasesChanged();
     return copy;
@@ -2413,9 +2403,9 @@ var Workspace = class {
   trash = /* @__PURE__ */ new Map();
   deleteCanvas(name) {
     const file = this.file(name);
-    if (!fs9.existsSync(file)) throw new EditError(`Canvas "${name}" does not exist.`);
-    this.trash.set(name, fs9.readFileSync(file, "utf8"));
-    fs9.unlinkSync(file);
+    if (!fs7.existsSync(file)) throw new EditError(`Canvas "${name}" does not exist.`);
+    this.trash.set(name, fs7.readFileSync(file, "utf8"));
+    fs7.unlinkSync(file);
     this.sources.delete(name);
     this.undoStacks.delete(name);
     this.redoStacks.delete(name);
@@ -2425,7 +2415,7 @@ var Workspace = class {
     const source = this.trash.get(name);
     if (source === void 0) throw new EditError(`Nothing to restore for "${name}".`);
     const target = this.uniqueCanvasName(name);
-    fs9.writeFileSync(canvasPath(this.config, target), source);
+    fs7.writeFileSync(canvasPath(this.config, target), source);
     this.sources.set(target, source);
     this.trash.delete(name);
     this.canvasesChanged();
@@ -2436,14 +2426,14 @@ var Workspace = class {
     if (!fileName.endsWith(CANVAS_SUFFIX)) return;
     const canvas = canvasNameOf(fileName);
     const file = this.file(canvas);
-    if (!fs9.existsSync(file)) {
+    if (!fs7.existsSync(file)) {
       this.sources.delete(canvas);
       syncRoute(this.config);
       this.emit({ type: "canvases", canvases: this.canvases() });
       return;
     }
     const prev = this.sources.get(canvas);
-    const next = fs9.readFileSync(file, "utf8");
+    const next = fs7.readFileSync(file, "utf8");
     if (prev === next) return;
     this.sources.set(canvas, next);
     if (prev === void 0) {
@@ -2462,8 +2452,8 @@ var Workspace = class {
       } catch (err) {
         if (!(err instanceof ConflictError)) throw err;
         if (err.file) this.linkedFileChanged(err.file);
-        else this.externalChange(path9.basename(this.file(cmd.canvas)));
-        if (nodeRefs(cmd).length || "frame" in cmd && cmd.frame) throw new EditError(`${path9.basename(err.file ?? this.relFile(cmd.canvas))} changed while editing. Re-read the canvas and try again.`);
+        else this.externalChange(path8.basename(this.file(cmd.canvas)));
+        if (nodeRefs(cmd).length || "frame" in cmd && cmd.frame) throw new EditError(`${path8.basename(err.file ?? this.relFile(cmd.canvas))} changed while editing. Re-read the canvas and try again.`);
         return this.exec(cmd, actor);
       }
     });
@@ -2473,7 +2463,7 @@ var Workspace = class {
   async exec(cmd, actor) {
     cmd = { ...cmd };
     let prepared = null;
-    if (cmd.op === "add_component_frame" && !fs9.existsSync(this.file(cmd.canvas))) {
+    if (cmd.op === "add_component_frame" && !fs7.existsSync(this.file(cmd.canvas))) {
       await this.catalog.load();
       const spec = this.catalog.get(cmd.component);
       if (!spec) throw new EditError(`Unknown component "${cmd.component}". Use list_components.`);
@@ -2501,12 +2491,12 @@ var Workspace = class {
       prepared = { kind: "apply", frame, ...plan };
     }
     const rel = target ?? this.relFile(cmd.canvas);
-    const file = path9.join(this.config.root, rel);
-    const original = target ? fs9.readFileSync(file, "utf8") : canvasSource;
+    const file = path8.join(this.config.root, rel);
+    const original = target ? fs7.readFileSync(file, "utf8") : canvasSource;
     const crlf = original.includes("\r\n");
     const before = crlf ? original.replace(/\r\n/g, "\n") : original;
-    const parse2 = (src) => target ? parseTargetDoc(target, src) : parseCanvas(cmd.canvas, rel, src);
-    const doc = parse2(before);
+    const parse = (src) => target ? parseTargetDoc(target, src) : parseCanvas(cmd.canvas, rel, src);
+    const doc = parse(before);
     if (!doc) throw new EditError(`${rel} has data or logic in its component now, so it can't be edited from the canvas. Explore a copy instead.`);
     if (cmd.op === "insert_icon") {
       const icon = cmd;
@@ -2560,7 +2550,7 @@ var Workspace = class {
         imports = importsFor(this.config, jsx, before, doc, rel, fileRel);
         movedNames = new Set(componentNamesIn(jsx));
       }
-      const abs = path9.join(this.config.root, fileRel);
+      const abs = path8.join(this.config.root, fileRel);
       newComponent = { rel: fileRel, content: await this.format(componentFile(name, jsx, imports), abs).catch(() => componentFile(name, jsx, imports)) };
       prepared = { kind: "component", name, file: fileRel };
     }
@@ -2578,8 +2568,8 @@ var Workspace = class {
     let after = await finish(result);
     let ids = [];
     const reparse = (src) => {
-      const d = parse2(src);
-      if (!d) throw new EditError(`That edit would put logic into ${path9.basename(rel)}. Only plain JSX can be edited from the canvas.`);
+      const d = parse(src);
+      if (!d) throw new EditError(`That edit would put logic into ${path8.basename(rel)}. Only plain JSX can be edited from the canvas.`);
       return d;
     };
     if (after.includes(MARK)) {
@@ -2604,8 +2594,8 @@ var Workspace = class {
     if (cmd.op === "apply_to_page") ids = [findFrame(canvasDoc, cmd.frame).id];
     const writeNewComponent = () => {
       if (!newComponent) return;
-      fs9.mkdirSync(path9.dirname(path9.join(this.config.root, newComponent.rel)), { recursive: true });
-      fs9.writeFileSync(path9.join(this.config.root, newComponent.rel), newComponent.content, { flag: "wx" });
+      fs7.mkdirSync(path8.dirname(path8.join(this.config.root, newComponent.rel)), { recursive: true });
+      fs7.writeFileSync(path8.join(this.config.root, newComponent.rel), newComponent.content, { flag: "wx" });
       this.catalog.invalidate();
       this.emit({ type: "catalog" });
     };
@@ -2614,11 +2604,11 @@ var Workspace = class {
       writeNewComponent();
       return { doc: target ? this.doc(cmd.canvas) : view, ids, label };
     }
-    if (fs9.readFileSync(file, "utf8") !== original) throw new ConflictError(`${path9.basename(rel)} changed during the edit.`, target ?? void 0);
+    if (fs7.readFileSync(file, "utf8") !== original) throw new ConflictError(`${path8.basename(rel)} changed during the edit.`, target ?? void 0);
     writeNewComponent();
     if (target) this.sources.set(`file:${target}`, after);
     else this.sources.set(cmd.canvas, after);
-    fs9.writeFileSync(file, after);
+    fs7.writeFileSync(file, after);
     const newDoc = this.doc(cmd.canvas);
     this.record(cmd.canvas, label, actor, original, after, ids, target ?? void 0, touchedFrames(cmd, ids, view, newDoc));
     if (renamedFrame) {
@@ -2644,7 +2634,7 @@ var Workspace = class {
       const f = findFrame(view, cmd.parent);
       if (f?.link) {
         if (!f.link.editable) throw viewOnly(f);
-        const src = fs9.readFileSync(path9.join(this.config.root, f.link.page), "utf8");
+        const src = fs7.readFileSync(path8.join(this.config.root, f.link.page), "utf8");
         if (f.link.kind === "component") {
           const own = parseModuleDoc(f.link.page, src)?.frames.find((x) => x.frameName === f.link.route);
           if (!own) throw viewOnly(f);
@@ -2669,7 +2659,7 @@ var Workspace = class {
     const refs = nodeRefs(cmd);
     const files = new Set(refs.map(fileOfId));
     if (files.size > 1) {
-      const names = [...files].map((f) => f ? path9.basename(f) : "the canvas");
+      const names = [...files].map((f) => f ? path8.basename(f) : "the canvas");
       throw new EditError(`These layers live in different files (${names.join(", ")}). Edit them one file at a time.`);
     }
     return [...files][0] ?? null;
@@ -2717,12 +2707,12 @@ var Workspace = class {
     const doc = ed.doc;
     const guard = (node, verb) => {
       if (doc.canvasNode) return;
-      if (node.path.length <= 2) throw new EditError(`Can't ${verb} the root element of ${path9.basename(rel)}.`);
-      if (node.kind === "expression" && node.name.trim() === "children" && /^layout\.[jt]sx?$/.test(path9.basename(rel))) throw new EditError(`Can't ${verb} the {children} slot of ${path9.basename(rel)}: that's where the page renders.`);
+      if (node.path.length <= 2) throw new EditError(`Can't ${verb} the root element of ${path8.basename(rel)}.`);
+      if (node.kind === "expression" && node.name.trim() === "children" && /^layout\.[jt]sx?$/.test(path8.basename(rel))) throw new EditError(`Can't ${verb} the {children} slot of ${path8.basename(rel)}: that's where the page renders.`);
     };
     const literalOnly = (node, key) => {
       const v = node.props[key];
-      if (!doc.canvasNode && v?.kind === "expression") throw new EditError(`${key} on ${node.name} is computed in code ({${short(v.code, 50)}}). Edit it in ${path9.basename(rel)}, or ask your agent.`);
+      if (!doc.canvasNode && v?.kind === "expression") throw new EditError(`${key} on ${node.name} is computed in code ({${short(v.code, 50)}}). Edit it in ${path8.basename(rel)}, or ask your agent.`);
     };
     switch (cmd.op) {
       case "set_props": {
@@ -3187,11 +3177,11 @@ ${rows}
       const entry = stack[stack.length - 1];
       if (!entry) throw new EditError(`Nothing to ${dir}.`);
       if (dir === "undo" && entry.before === "") throw new EditError("Cannot undo creating the canvas; delete the file instead.");
-      const file = entry.file ? path9.join(this.config.root, entry.file) : this.file(canvas);
-      const name = entry.file ? path9.basename(entry.file) : "the file";
+      const file = entry.file ? path8.join(this.config.root, entry.file) : this.file(canvas);
+      const name = entry.file ? path8.basename(entry.file) : "the file";
       let current;
       try {
-        current = entry.file ? fs9.readFileSync(file, "utf8") : this.read(canvas);
+        current = entry.file ? fs7.readFileSync(file, "utf8") : this.read(canvas);
       } catch {
         throw new EditError(`Cannot ${dir} "${entry.label}": ${name} can't be read right now.`);
       }
@@ -3200,7 +3190,7 @@ ${rows}
       stack.pop();
       const next = dir === "undo" ? entry.before : entry.after;
       this.sources.set(entry.file ? `file:${entry.file}` : canvas, next);
-      fs9.writeFileSync(file, next);
+      fs7.writeFileSync(file, next);
       const list = to.get(canvas) ?? [];
       list.push(entry);
       to.set(canvas, list);
@@ -3241,17 +3231,17 @@ ${rows}
     if (this.agents.delete(session)) this.emit({ type: "agents", agents: [...this.agents.values()] });
   }
   ensureRoute() {
-    if (!fs9.existsSync(path9.join(this.config.root, this.config.canvasDir))) {
-      fs9.mkdirSync(path9.join(this.config.root, this.config.canvasDir), { recursive: true });
+    if (!fs7.existsSync(path8.join(this.config.root, this.config.canvasDir))) {
+      fs7.mkdirSync(path8.join(this.config.root, this.config.canvasDir), { recursive: true });
     }
     if (!this.canvases().length) {
       const file = canvasPath(this.config, "home");
       const content = this.homeCanvas();
-      fs9.writeFileSync(file, content);
+      fs7.writeFileSync(file, content);
       void this.format(content, file).then((pretty) => {
-        if (fs9.readFileSync(file, "utf8") !== content) return;
+        if (fs7.readFileSync(file, "utf8") !== content) return;
         this.sources.set("home", pretty);
-        fs9.writeFileSync(file, pretty);
+        fs7.writeFileSync(file, pretty);
       }).catch(() => {
       });
     }
@@ -3262,7 +3252,7 @@ ${rows}
     try {
       const home = listRoutes(this.config).find((r) => r.route === "/");
       if (!home) return STARTER_CANVAS;
-      const rel = path9.relative(this.config.root, canvasPath(this.config, "home"));
+      const rel = path8.relative(this.config.root, canvasPath(this.config, "home"));
       const empty = parseCanvas("home", rel, `import { Canvas, Frame } from "truecanvas";
 export default function C() { return <Canvas></Canvas>; }
 `);
@@ -3320,7 +3310,7 @@ function publicEntry(e) {
 }
 function assertShown(view, rel) {
   const shown = view.frames.some((f) => f.link?.files.includes(rel));
-  if (!shown || path9.isAbsolute(rel) || rel.split(/[\\/]/).includes("..")) throw new EditError(`${rel} isn't shown on this canvas. Re-read the canvas for current ids.`);
+  if (!shown || path8.isAbsolute(rel) || rel.split(/[\\/]/).includes("..")) throw new EditError(`${rel} isn't shown on this canvas. Re-read the canvas for current ids.`);
 }
 function rightEdge(doc) {
   return doc.frames.reduce((m, f) => Math.max(m, f.x + f.width), -80);
@@ -3392,15 +3382,15 @@ function componentJsx(spec, props = {}, text) {
 
 // src/core/pm.ts
 import { spawn } from "child_process";
-import fs10 from "fs";
-import path10 from "path";
+import fs8 from "fs";
+import path9 from "path";
 function detectPm(dir) {
-  for (let d = dir; ; d = path10.dirname(d)) {
-    if (fs10.existsSync(path10.join(d, "pnpm-lock.yaml")) || fs10.existsSync(path10.join(d, "pnpm-workspace.yaml"))) return "pnpm";
-    if (fs10.existsSync(path10.join(d, "yarn.lock"))) return "yarn";
-    if (fs10.existsSync(path10.join(d, "bun.lock")) || fs10.existsSync(path10.join(d, "bun.lockb"))) return "bun";
-    if (fs10.existsSync(path10.join(d, "package-lock.json"))) return "npm";
-    if (path10.dirname(d) === d || fs10.existsSync(path10.join(d, ".git"))) break;
+  for (let d = dir; ; d = path9.dirname(d)) {
+    if (fs8.existsSync(path9.join(d, "pnpm-lock.yaml")) || fs8.existsSync(path9.join(d, "pnpm-workspace.yaml"))) return "pnpm";
+    if (fs8.existsSync(path9.join(d, "yarn.lock"))) return "yarn";
+    if (fs8.existsSync(path9.join(d, "bun.lock")) || fs8.existsSync(path9.join(d, "bun.lockb"))) return "bun";
+    if (fs8.existsSync(path9.join(d, "package-lock.json"))) return "npm";
+    if (path9.dirname(d) === d || fs8.existsSync(path9.join(d, ".git"))) break;
   }
   const agent = process.env.npm_config_user_agent ?? "";
   if (agent.startsWith("pnpm")) return "pnpm";
@@ -3420,7 +3410,12 @@ function dlx(pm, pkg, args) {
   return ["npx", ["--yes", pkg, ...args]];
 }
 function toolEnv(extra = {}) {
-  return { ...process.env, PATH: `${path10.dirname(process.execPath)}${path10.delimiter}${process.env.PATH ?? ""}`, ...extra };
+  return { ...process.env, PATH: `${path9.dirname(process.execPath)}${path9.delimiter}${process.env.PATH ?? ""}`, ...extra };
+}
+function shellSafe(cmd, args) {
+  if (process.platform !== "win32") return { cmd, args, shell: false };
+  const quote = (a) => /[\s"&|<>^()%!]/.test(a) ? `"${a.replace(/"/g, '""')}"` : a;
+  return { cmd: quote(cmd), args: args.map(quote), shell: true };
 }
 function run2(cmd, args, cwd, timeoutMs = 3e5) {
   return new Promise((resolve) => {
@@ -3432,7 +3427,8 @@ function run2(cmd, args, cwd, timeoutMs = 3e5) {
       clearTimeout(timer);
       resolve({ ok, out: (out + extra).slice(-2e4) });
     };
-    const p = spawn(cmd, args, { cwd, stdio: ["ignore", "pipe", "pipe"], env: toolEnv({ CI: "1", FORCE_COLOR: "0", NO_COLOR: "1" }), shell: process.platform === "win32" });
+    const safe = shellSafe(cmd, args);
+    const p = spawn(safe.cmd, safe.args, { cwd, stdio: ["ignore", "pipe", "pipe"], env: toolEnv({ CI: "1", FORCE_COLOR: "0", NO_COLOR: "1" }), shell: safe.shell });
     const timer = setTimeout(() => {
       p.kill();
       finish(false, `
@@ -3447,24 +3443,24 @@ ${err.message}`));
 }
 
 // src/core/shadcn.ts
-import fs11 from "fs";
-import path11 from "path";
+import fs9 from "fs";
+import path10 from "path";
 function shadcnStatus(root) {
-  const file = path11.join(root, "components.json");
-  if (!fs11.existsSync(file)) return { initialized: false, uiDir: null, installed: [] };
+  const file = path10.join(root, "components.json");
+  if (!fs9.existsSync(file)) return { initialized: false, uiDir: null, installed: [] };
   let ui = "@/components/ui";
   try {
-    ui = JSON.parse(fs11.readFileSync(file, "utf8"))?.aliases?.ui ?? ui;
+    ui = JSON.parse(fs9.readFileSync(file, "utf8"))?.aliases?.ui ?? ui;
   } catch {
   }
   const dir = resolveAliasPath(root, ui);
   let installed = [];
   try {
-    installed = fs11.readdirSync(dir).filter((f) => /\.(tsx|jsx)$/.test(f)).map((f) => f.replace(/\.(tsx|jsx)$/, "")).sort();
+    installed = fs9.readdirSync(dir).filter((f) => /\.(tsx|jsx)$/.test(f)).map((f) => f.replace(/\.(tsx|jsx)$/, "")).sort();
   } catch {
     installed = [];
   }
-  return { initialized: true, uiDir: path11.relative(root, dir), installed };
+  return { initialized: true, uiDir: posix(path10.relative(root, dir)), installed };
 }
 var FALLBACK = "accordion alert alert-dialog aspect-ratio avatar badge breadcrumb button button-group calendar card carousel chart checkbox collapsible combobox command context-menu dialog drawer dropdown-menu empty field form hover-card input input-group input-otp item kbd label menubar navigation-menu pagination popover progress radio-group resizable scroll-area select separator sheet sidebar skeleton slider sonner spinner switch table tabs textarea toggle toggle-group tooltip".split(" ");
 var registryCache = null;
@@ -3596,8 +3592,8 @@ function describeComponent(c, verbose = false) {
 }
 
 // src/core/tokens.ts
-import fs12 from "fs";
-import path12 from "path";
+import fs10 from "fs";
+import path11 from "path";
 import { globSync } from "tinyglobby";
 var GROUPS = [
   ["--color-", "Colors", "bg-{name} text-{name} border-{name}"],
@@ -3614,9 +3610,9 @@ function readDesignTokens(root) {
   const sources = [];
   let darkVariant = null;
   for (const file of files) {
-    const css = fs12.readFileSync(file, "utf8");
+    const css = fs10.readFileSync(file, "utf8");
     if (!css.includes("@theme") && !css.includes("@custom-variant")) continue;
-    sources.push(path12.relative(root, file));
+    sources.push(posix(path11.relative(root, file)));
     const dv = /@custom-variant\s+dark\s*\(([^;]+)\);/.exec(css);
     if (dv) darkVariant = dv[1].trim();
     for (const block of css.matchAll(/@theme[^{]*\{([\s\S]*?)\n\}/g)) {
@@ -3655,7 +3651,7 @@ function readTokenData(root) {
     for (const m of body.matchAll(/(--[\w-]+)\s*:\s*([^;]+);/g)) into.set(m[1], m[2].trim());
   };
   for (const file of files) {
-    const css = fs12.readFileSync(file, "utf8");
+    const css = fs10.readFileSync(file, "utf8");
     for (const block of css.matchAll(/@theme[^{]*\{([\s\S]*?)\n\}/g)) decls(block[1], theme);
     for (const block of css.matchAll(/(?:^|\n)\s*:root\s*\{([\s\S]*?)\n\}/g)) decls(block[1], lightVars);
     for (const block of css.matchAll(/(?:^|\n)\s*(?:\.dark|\[data-theme=["']?dark["']?\]|:root\.dark)\s*\{([\s\S]*?)\n\}/g)) decls(block[1], darkVars);
@@ -3687,30 +3683,30 @@ function readTokenData(root) {
 }
 
 // src/core/compare.ts
-import fs13 from "fs";
-import path13 from "path";
+import fs11 from "fs";
+import path12 from "path";
 var COMPARE_PREFIX = "__compare__";
 function writeCompare(config, canvas, source, files = {}, as = canvas) {
-  const routeDir = path13.join(config.root, config.appDir, "truecanvas");
-  const dir = path13.join(routeDir, "compare");
-  fs13.mkdirSync(dir, { recursive: true });
-  const canvasDir = path13.join(config.root, config.canvasDir);
-  const canvasRel = path13.join(config.canvasDir, `${canvas}.canvas.tsx`);
+  const routeDir = routeDirOf(config);
+  const dir = path12.join(routeDir, "compare");
+  fs11.mkdirSync(dir, { recursive: true });
+  const canvasDir = path12.join(config.root, config.canvasDir);
+  const canvasRel = `${config.canvasDir}/${canvas}.canvas.tsx`;
   const swapped = /* @__PURE__ */ new Map();
   for (const [rel, content] of Object.entries(files)) {
-    const ext = path13.extname(rel);
+    const ext = path12.extname(rel);
     const name = `${as}--${rel.slice(0, -ext.length).replace(/[^\w.-]+/g, "_")}${ext}`;
-    const original = path13.join(config.root, rel);
-    fs13.writeFileSync(path13.join(dir, name), rewriteImports(content, (spec) => spec.startsWith(".") ? relativeSpec(dir, path13.resolve(path13.dirname(original), spec)) : spec));
+    const original = path12.join(config.root, rel);
+    fs11.writeFileSync(path12.join(dir, name), rewriteImports(content, (spec) => spec.startsWith(".") ? relativeSpec(dir, path12.resolve(path12.dirname(original), spec)) : spec));
     swapped.set(importSpecifier(config.root, canvasRel, rel), `./${name.slice(0, -ext.length)}`);
   }
-  const out = rewriteImports(source, (spec) => swapped.get(spec) ?? (spec.startsWith(".") ? relativeSpec(dir, path13.resolve(canvasDir, spec)) : spec));
-  fs13.writeFileSync(path13.join(dir, `${as}.canvas.tsx`), out);
+  const out = rewriteImports(source, (spec) => swapped.get(spec) ?? (spec.startsWith(".") ? relativeSpec(dir, path12.resolve(canvasDir, spec)) : spec));
+  fs11.writeFileSync(path12.join(dir, `${as}.canvas.tsx`), out);
   syncRoute(config);
   return `${COMPARE_PREFIX}${as}`;
 }
 function relativeSpec(fromDir, target) {
-  const next = path13.relative(fromDir, target);
+  const next = posix(path12.relative(fromDir, target));
   return next.startsWith(".") ? next : `./${next}`;
 }
 function rewriteImports(source, map) {
@@ -3726,9 +3722,9 @@ function rewriteImports(source, map) {
 }
 function clearCompare(config, canvas) {
   if (canvas) assertCanvasName(canvas);
-  const dir = path13.join(config.root, config.appDir, "truecanvas", "compare");
-  if (!fs13.existsSync(dir)) return;
-  for (const f of fs13.readdirSync(dir)) if (!canvas || f === `${canvas}.canvas.tsx` || f.startsWith(`${canvas}--`)) fs13.rmSync(path13.join(dir, f));
+  const dir = path12.join(routeDirOf(config), "compare");
+  if (!fs11.existsSync(dir)) return;
+  for (const f of fs11.readdirSync(dir)) if (!canvas || f === `${canvas}.canvas.tsx` || f.startsWith(`${canvas}--`)) fs11.rmSync(path12.join(dir, f));
   syncRoute(config);
 }
 function frameChanges(before, after) {
@@ -3745,24 +3741,48 @@ function frameChanges(before, after) {
 }
 
 // src/core/init.ts
-import fs14 from "fs";
+import fs12 from "fs";
 import MagicString2 from "magic-string";
-import path14 from "path";
-var CONFIG_FILES = ["next.config.ts", "next.config.mjs", "next.config.js", "next.config.mts"];
-function nextConfigStatus(root) {
-  for (const name of CONFIG_FILES) {
-    const file = path14.join(root, name);
-    if (fs14.existsSync(file)) return { file, wrapped: fs14.readFileSync(file, "utf8").includes("withTruecanvas") };
+import path13 from "path";
+var CONFIG_FILES = {
+  next: ["next.config.ts", "next.config.mjs", "next.config.js", "next.config.mts"],
+  vite: ["vite.config.ts", "vite.config.mts", "vite.config.js", "vite.config.mjs"]
+};
+function projectFramework(root) {
+  try {
+    const pkg = JSON.parse(fs12.readFileSync(path13.join(root, "package.json"), "utf8"));
+    return detectFramework({ ...pkg.dependencies, ...pkg.devDependencies });
+  } catch {
+    return "next";
   }
-  return { file: null, wrapped: false };
+}
+function configStatus(root, framework = projectFramework(root)) {
+  const marker = framework === "vite" ? "truecanvas/vite" : "withTruecanvas";
+  for (const name of CONFIG_FILES[framework]) {
+    const file = path13.join(root, name);
+    if (fs12.existsSync(file)) return { file, wrapped: fs12.readFileSync(file, "utf8").includes(marker), framework };
+  }
+  return { file: null, wrapped: false, framework };
 }
 function initProject(config) {
   const { root } = config;
   const report = { done: [], todo: [] };
-  const status = nextConfigStatus(root);
-  if (!status.file) {
-    const file = path14.join(root, "next.config.ts");
-    fs14.writeFileSync(file, `import type { NextConfig } from "next";
+  const vite = config.framework === "vite";
+  const status = configStatus(root, config.framework);
+  if (vite) {
+    const name = status.file ? path13.basename(status.file) : "vite.config.ts";
+    if (status.wrapped) report.done.push(`${name} already uses the truecanvas() plugin`);
+    else {
+      const src = status.file ? fs12.readFileSync(status.file, "utf8") : null;
+      const next = src && addVitePlugin(src);
+      if (next) {
+        fs12.writeFileSync(status.file, next);
+        report.done.push(`Added the truecanvas() plugin to ${name}`);
+      } else report.todo.push(`Add truecanvas() from "truecanvas/vite" to the plugins in ${name}`);
+    }
+  } else if (!status.file) {
+    const file = path13.join(root, "next.config.ts");
+    fs12.writeFileSync(file, `import type { NextConfig } from "next";
 import { withTruecanvas } from "truecanvas/next";
 
 const nextConfig: NextConfig = {};
@@ -3771,49 +3791,49 @@ export default withTruecanvas(nextConfig);
 `);
     report.done.push("Created next.config.ts with withTruecanvas()");
   } else if (status.wrapped) {
-    report.done.push(`${path14.basename(status.file)} already uses withTruecanvas()`);
+    report.done.push(`${path13.basename(status.file)} already uses withTruecanvas()`);
   } else {
-    const src = fs14.readFileSync(status.file, "utf8");
+    const src = fs12.readFileSync(status.file, "utf8");
     const next = wrapConfigExport(src);
     if (next && next !== src && next.includes("withTruecanvas(")) {
-      fs14.writeFileSync(status.file, next);
-      report.done.push(`Wrapped ${path14.basename(status.file)} with withTruecanvas()`);
+      fs12.writeFileSync(status.file, next);
+      report.done.push(`Wrapped ${path13.basename(status.file)} with withTruecanvas()`);
     } else {
-      report.todo.push(`Wrap your ${path14.basename(status.file)} export with withTruecanvas() from "truecanvas/next"`);
+      report.todo.push(`Wrap your ${path13.basename(status.file)} export with withTruecanvas() from "truecanvas/next"`);
     }
   }
-  const pkgFile = path14.join(root, "package.json");
+  const pkgFile = path13.join(root, "package.json");
   try {
-    const raw = fs14.readFileSync(pkgFile, "utf8");
+    const raw = fs12.readFileSync(pkgFile, "utf8");
     const pkg = JSON.parse(raw);
     pkg.scripts ??= {};
     if (!Object.values(pkg.scripts).some((v) => typeof v === "string" && v.includes("truecanvas"))) {
       pkg.scripts.canvas = "truecanvas dev";
       const indent = /\n(\s+)"/.exec(raw)?.[1] ?? "  ";
-      fs14.writeFileSync(pkgFile, `${JSON.stringify(pkg, null, indent)}
+      fs12.writeFileSync(pkgFile, `${JSON.stringify(pkg, null, indent)}
 `);
       report.done.push(`Added the "canvas" script (npm run canvas)`);
     }
     const deps = { ...pkg.dependencies, ...pkg.devDependencies };
     if (!("tailwindcss" in deps)) report.todo.push("Tailwind CSS isn't installed: layout and style controls write Tailwind classes");
-    if (!("next" in deps)) report.todo.push("Next.js isn't in package.json: Truecanvas currently needs a Next.js (App Router) app");
+    if (!("next" in deps) && !("vite" in deps)) report.todo.push("Neither Next.js nor Vite is in package.json: Truecanvas needs a Next.js (App Router) or Vite + React app");
   } catch {
     report.todo.push("Couldn't read package.json");
   }
-  const ignoreFile = path14.join(root, ".gitignore");
-  const entry = `/${config.appDir}/truecanvas/`;
-  const ignore = fs14.existsSync(ignoreFile) ? fs14.readFileSync(ignoreFile, "utf8") : "";
+  const ignoreFile = path13.join(root, ".gitignore");
+  const entry = `/${config.routeDir}/`;
+  const ignore = fs12.existsSync(ignoreFile) ? fs12.readFileSync(ignoreFile, "utf8") : "";
   if (!ignore.split("\n").some((l) => l.trim() === entry || l.trim() === entry.slice(1))) {
-    fs14.writeFileSync(ignoreFile, `${ignore}${ignore && !ignore.endsWith("\n") ? "\n" : ""}
+    fs12.writeFileSync(ignoreFile, `${ignore}${ignore && !ignore.endsWith("\n") ? "\n" : ""}
 # Truecanvas (generated dev-only route)
 ${entry}
 `);
     report.done.push(`Ignored ${entry} in .gitignore`);
   }
   for (const name of ["tailwind.config.ts", "tailwind.config.js", "tailwind.config.mjs", "tailwind.config.cjs"]) {
-    const file = path14.join(root, name);
-    if (!fs14.existsSync(file)) continue;
-    const src = fs14.readFileSync(file, "utf8");
+    const file = path13.join(root, name);
+    if (!fs12.existsSync(file)) continue;
+    const src = fs12.readFileSync(file, "utf8");
     const glob = `./${config.canvasDir}/**/*.{ts,tsx}`;
     if (src.includes(config.canvasDir)) break;
     const m = /content\s*:\s*\[([ \t]*\n?)([ \t]*)/.exec(src);
@@ -3822,12 +3842,12 @@ ${entry}
       const at = m.index + m[0].length;
       const entry2 = m[1].includes("\n") ? `${JSON.stringify(glob)},
 ${indent}` : `${JSON.stringify(glob)}, `;
-      fs14.writeFileSync(file, src.slice(0, at) + entry2 + src.slice(at));
+      fs12.writeFileSync(file, src.slice(0, at) + entry2 + src.slice(at));
       report.done.push(`Added ${config.canvasDir} to Tailwind's content in ${name}`);
     } else report.todo.push(`Add "${glob}" to the content list in ${name} so Tailwind styles your canvases`);
     break;
   }
-  if (!fs14.existsSync(path14.join(root, config.appDir))) report.todo.push(`No ${config.appDir}/ folder found: Truecanvas needs the Next.js App Router`);
+  if (!vite && !fs12.existsSync(path13.join(root, config.appDir))) report.todo.push(`No ${config.appDir}/ folder found: Truecanvas needs the Next.js App Router`);
   return report;
 }
 function addImport(src, line) {
@@ -3874,12 +3894,35 @@ ${s.toString()}`;
   }
   return null;
 }
+function addVitePlugin(src) {
+  let ast;
+  try {
+    ast = parseModule(src);
+  } catch {
+    return null;
+  }
+  let plugins = null;
+  walk(ast, (node) => {
+    if (plugins) return false;
+    if (node.type !== "ObjectProperty" || node.value.type !== "ArrayExpression") return;
+    const key = node.key.type === "Identifier" ? node.key.name : node.key.type === "StringLiteral" ? node.key.value : null;
+    if (key !== "plugins") return;
+    plugins = { start: node.value.start, end: node.value.end, elements: node.value.elements.filter((e) => e !== null).map((e) => ({ start: e.start, end: e.end })) };
+    return false;
+  });
+  if (!plugins) return null;
+  const { start, end, elements } = plugins;
+  const s = new MagicString2(src);
+  if (!elements.length) s.overwrite(start, end, "[truecanvas()]");
+  else {
+    const last = elements[elements.length - 1];
+    const before = src.slice(start + 1, elements[0].start);
+    s.appendLeft(last.end, before.includes("\n") ? `,${before.replace(/^[^\n]*/, "")}truecanvas()` : ", truecanvas()");
+  }
+  return addImport(s.toString(), `import { truecanvas } from "truecanvas/vite";`);
+}
 
 export {
-  loadConfig,
-  parseModule,
-  idOf,
-  walk,
   parseCanvas,
   allNodes,
   findNode,
@@ -3895,6 +3938,8 @@ export {
   DEVICES,
   findDevice,
   assertCanvasName,
+  syncRoute,
+  viteStylesheets,
   syncComponentRegistry,
   Comments,
   Git,
@@ -3903,6 +3948,7 @@ export {
   detectPm,
   addArgs,
   toolEnv,
+  shellSafe,
   run2 as run,
   shadcnStatus,
   shadcnRegistry,
@@ -3915,7 +3961,8 @@ export {
   writeCompare,
   clearCompare,
   frameChanges,
-  nextConfigStatus,
+  configStatus,
   initProject,
-  wrapConfigExport
+  wrapConfigExport,
+  addVitePlugin
 };