truecanvas 0.3.0 → 0.4.1

package/README.md

@@ -18,9 +18,10 @@ Truecanvas renders your actual `.tsx` components on an infinite canvas and write
 
 - **Real components.** Layers are instances of your components, with a props panel generated from their TypeScript types.
 - **Code is the document.** A canvas is a `.canvas.tsx` file. Edits are minimal patches that keep your formatting, so diffs stay reviewable.
-- **Agent-first.** 44 MCP tools to read the tree, insert JSX, set props and classes, create frames and variants, and take screenshots.
+- **Agent-first.** 45 MCP tools to read the tree, insert JSX, set props and classes, create frames and variants, and take screenshots.
 - **Design on real pages.** Link any Next.js page as a frame: editing its layers edits `page.tsx` and its layouts.
 - **Components and libraries.** Turn a selection into a component, edit main components, install icon sets (Lucide, Tabler, Phosphor, Heroicons, Radix) and add shadcn/ui components.
+- **Share with clients.** One click freezes a page into a private link on your own domain: clients look and comment in their browser, nothing to install, and their comments land on your canvas for you or your agent to answer.
 - **Git built in.** Per-frame change summaries, branches, commits, pull requests with before/after images, visual compare and comments that travel with branches.
 - **Motion, devices, themes.** Scroll reveals and text animations, iPhone/Pixel/iPad presets with device chrome, and per-frame light and dark themes.
 - **Lightweight.** Frames render through your existing dev server. Headless Chromium only starts when an agent asks for a screenshot.
@@ -91,7 +92,35 @@ export default function ChatCanvas() {
 2. Each frame loads `/truecanvas/<canvas>` from your dev server, where a small runtime maps what's under the pointer back to that position.
 3. Your gestures and your agent's MCP calls become the same commands. The server patches the source and your dev server hot-reloads the frame.
 
-Collaboration goes through git: canvases, comments and linked pages are files, so design changes are branched, reviewed and merged like code. The **Truecanvas window** (`npx truecanvas open`) manages several projects in tabs, clones from GitHub and reviews pull requests on the canvas.
+## MCP tools
+
+| | Tools |
+| --- | --- |
+| Read | `list_canvases` `get_canvas` `get_node` `get_selection` `list_components` `get_component` `get_design_tokens` `list_comments` |
+| Edit | `insert_jsx` `replace_node` `set_props` `set_text` `set_class_name` `move_node` `duplicate_nodes` `delete_nodes` `wrap_nodes` `undo` `redo` |
+| Frames and pages | `create_frame` `update_frame` `create_variants_frame` `create_canvas` `rename_canvas` `delete_canvas` `import_page` `explore_copy` `apply_to_page` |
+| Components and libraries | `create_component` `open_component` `list_libraries` `install_library` `search_icons` `insert_icon` `add_shadcn_components` |
+| Look and show | `share_canvas` `screenshot_frame` `focus` `play_frame` `add_animation` `remove_animation` `add_background` `apply_preset` `reply_comment` `resolve_comment` |
+
+Node ids are the JSX tag's `line:col` and change after edits; every write returns the fresh ids. Catalog components are imported automatically.
+
+## Collaborate
+
+Canvases, comments and linked pages are files in your repo, so design changes are branched, reviewed and merged like code. From the Git panel you can branch, commit with a per-frame summary, open a pull request with before/after images, and compare against any branch or commit. Comments are saved with the canvas and agents can read and resolve them.
+
+The **Truecanvas window** (`npx truecanvas open`) manages several projects in tabs, clones from GitHub and reviews pull requests on the canvas.
+
+## Share with clients
+
+**Share** (top right in the editor), `npx truecanvas share <canvas>`, or your agent's `share_canvas` renders every frame through your app and freezes it into static HTML and CSS: no scripts, so a link can never call your API or leak a session. It's published to your own review site as a new version of that page's link. Clients open it in any browser, with an optional password, and pin comments on the frames. Their threads sync into the canvas's comments while Truecanvas runs; your replies and your agent's (`reply_comment`, `resolve_comment`) go back to the link, under your studio's name. Comments you start in Truecanvas stay internal. `--revoke` takes a link down and `--delete` removes it with its comments.
+
+The review site is `packages/review`, a small Next.js app you deploy once to your Vercel account:
+
+1. Create a Vercel project from this repo with **Root Directory** `packages/review`, and add a private **Blob** store and **Upstash for Redis** (both have free tiers).
+2. Set `REVIEW_TOKEN` (a long random string), and optionally `BRAND_NAME` and `BRAND_LOGO` (a logo URL) for your studio's branding.
+3. Add your domain (for example `review.your-studio.com`), then connect Truecanvas: `npx truecanvas share setup https://review.your-studio.com`.
+
+Without a review site, Share still makes a local preview of what clients would see.
 
 ## Configuration
 

package/dist/catalog-worker.js

@@ -1,6 +1,6 @@
 import {
   analyzeComponents
-} from "./chunk-WU7NBTJH.js";
+} from "./chunk-2IIAMOFH.js";
 
 // src/core/catalog-worker.ts
 import { parentPort, workerData } from "worker_threads";

package/dist/{chunk-WU7NBTJH.js → chunk-2IIAMOFH.js}

@@ -86,19 +86,27 @@ async function analyzeComponents(root, globs, libraries = []) {
     if (!sf) continue;
     const moduleSymbol = checker.getSymbolAtLocation(sf);
     if (!moduleSymbol) continue;
+    const named = /* @__PURE__ */ new Set();
+    const found = [];
     for (let sym of checker.getExportsOfModule(moduleSymbol)) {
+      const exported = sym.getName();
       if (sym.flags & ts.SymbolFlags.Alias) sym = checker.getAliasedSymbol(sym);
-      const name = sym.getName();
-      if (!/^[A-Z]/.test(name) || !(sym.flags & ts.SymbolFlags.Value)) continue;
       const decl = sym.valueDeclaration ?? sym.declarations?.[0];
       if (!decl) continue;
+      const own = decl.name;
+      const name = sym.getName() === "default" && own && ts.isIdentifier(own) ? own.text : sym.getName();
+      if (!/^[A-Z]/.test(name) || !(sym.flags & ts.SymbolFlags.Value)) continue;
       const type = checker.getTypeOfSymbolAtLocation(sym, decl);
       const sig = type.getCallSignatures()[0];
       if (!sig) continue;
       const ret = checker.typeToString(sig.getReturnType());
       if (!/Element|ReactNode|ReactPortal|null|any/.test(ret) || /^Promise</.test(ret)) continue;
-      out.push(describe(ts, checker, sym, decl, sig, library ?? posix(path2.relative(root, file)), library));
+      const spec = { ...describe(ts, checker, sym, decl, sig, library ?? posix(path2.relative(root, file)), library), name };
+      if (exported === "default") spec.defaultExport = true;
+      else named.add(spec.name);
+      found.push(spec);
     }
+    out.push(...found.filter((s) => !(s.defaultExport && named.has(s.name))));
   }
   for (const spec of out) applyProfile(spec);
   if (libraries.length) await attachPresets(root, out);

package/dist/{chunk-XWQ5MS24.js → chunk-A4QIAVTG.js}

@@ -12,7 +12,7 @@ import {
   importSpecifier,
   posix,
   resolveAliasPath
-} from "./chunk-WU7NBTJH.js";
+} from "./chunk-2IIAMOFH.js";
 import {
   ICON_LIBRARIES,
   iconLibrary,
@@ -549,10 +549,14 @@ ${ind}${close}`);
     this.selectPaths.push(node.path);
   }
   added = /* @__PURE__ */ new Set();
-  ensureImport(name, from) {
+  ensureImport(name, from, isDefault = false) {
     if (this.doc.imports.some((i) => i.names.includes(name) || i.defaultName === name)) return;
     if (this.added.has(name)) return;
     this.added.add(name);
+    if (isDefault) {
+      this.addImportLine(`import ${name} from ${JSON.stringify(from)};`);
+      return;
+    }
     const same = this.doc.imports.find((i) => i.source === from && !i.typeOnly && i.lastSpecifierEnd !== null);
     if (same) {
       this.s.appendLeft(same.lastSpecifierEnd, `, ${name}`);
@@ -954,6 +958,7 @@ function componentRegistry(config, specs) {
       from = posix(path.relative(routeDir, path.join(config.root, c.file))).replace(/\.(tsx|ts|jsx|js)$/, "");
       if (!from.startsWith(".")) from = `./${from}`;
     }
+    if (c.defaultExport) return `  ${JSON.stringify(c.name)}: lazy(() => import(${JSON.stringify(from)})),`;
     return `  ${JSON.stringify(c.name)}: lazy(() => import(${JSON.stringify(from)}).then((m) => ({ default: m[${JSON.stringify(c.name)}] }))),`;
   });
   return `"use client";
@@ -984,21 +989,30 @@ var Comments = class {
   file(canvas) {
     return path2.join(this.config.root, this.config.canvasDir, `${assertCanvasName(canvas)}.comments.json`);
   }
-  list(canvas) {
+  read(canvas) {
     try {
-      return JSON.parse(fs2.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 (!threads.length && !dismissed?.length) {
       if (fs2.existsSync(file)) fs2.rmSync(file);
       return;
     }
     fs2.mkdirSync(path2.dirname(file), { recursive: true });
-    fs2.writeFileSync(file, `${JSON.stringify({ version: 1, threads }, null, 2)}
+    const data = { version: 1, threads, ...dismissed?.length ? { dismissed } : {} };
+    fs2.writeFileSync(file, `${JSON.stringify(data, null, 2)}
 `);
   }
   update(canvas, id, fn) {
@@ -1036,12 +1050,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. */
@@ -2737,7 +2762,7 @@ var Workspace = class {
         const spec = this.catalog.get(cmd.component);
         if (!spec) throw new EditError(`Unknown component "${cmd.component}". Use list_components.`);
         const jsx = componentJsx(spec, cmd.props, cmd.text);
-        ed.ensureImport(spec.name, importSpecifier(this.config.root, rel, spec.file));
+        ed.ensureImport(spec.name, importSpecifier(this.config.root, rel, spec.file), spec.defaultExport);
         ed.insertChild(parent, cmd.index, jsx);
         return `Inserted ${spec.name}`;
       }
@@ -2873,7 +2898,7 @@ var Workspace = class {
         const preset = cmd.preset ? spec.presets?.find((p) => p.name.toLowerCase() === cmd.preset.toLowerCase()) : void 0;
         if (cmd.preset && !preset) throw new EditError(`${spec.name} has no preset "${cmd.preset}". Presets: ${spec.presets?.map((p) => p.name).join(", ") || "none"}`);
         const props = { className: "pointer-events-none absolute inset-0 -z-10 h-full w-full", ...preset ? presetDiff(spec, preset.props) : {} };
-        ed.ensureImport(spec.name, importSpecifier(this.config.root, rel, spec.file));
+        ed.ensureImport(spec.name, importSpecifier(this.config.root, rel, spec.file), spec.defaultExport);
         if (parent.kind === "element") {
           const cls = parent.props.className;
           if (cls === void 0 || cls.kind === "string") {
@@ -2904,7 +2929,7 @@ var Workspace = class {
         if (!prop) throw new EditError(`${spec.name} has no prop "${cmd.prop}".`);
         const values = prop.type === "enum" ? prop.options : prop.type === "boolean" ? [false, true] : [];
         if (!values.length) throw new EditError(`Prop "${cmd.prop}" is ${prop.typeText}; variants need a union of string literals or a boolean.`);
-        ed.ensureImport(spec.name, importSpecifier(this.config.root, rel, spec.file));
+        ed.ensureImport(spec.name, importSpecifier(this.config.root, rel, spec.file), spec.defaultExport);
         const label = (v) => typeof v === "string" ? v[0].toUpperCase() + v.slice(1) : `${prop.name}: ${v}`;
         const rows = indentBlock(values.map((v) => componentJsx(spec, { ...cmd.props, [prop.name]: v }, spec.acceptsChildren ? label(v) : void 0)).join("\n"));
         const right = rightEdge(doc);
@@ -2923,7 +2948,7 @@ ${rows}
           ed.selectPaths.push(existing.path);
           return `Opened ${spec.name}`;
         }
-        ed.ensureImport(spec.name, importSpecifier(this.config.root, rel, spec.file));
+        ed.ensureImport(spec.name, importSpecifier(this.config.root, rel, spec.file), spec.defaultExport);
         const right = rightEdge(doc);
         const top = doc.frames.length ? Math.min(...doc.frames.map((f) => f.y)) : 0;
         ed.insertFrame(
@@ -3063,7 +3088,7 @@ ${rows}
       if (ed.doc.imports.some((i) => i.names.includes(name) || i.defaultName === name)) continue;
       const spec = this.catalog.get(name);
       if (!spec) throw new EditError(`Unknown component <${name}>. It is not imported in the canvas and not in the component catalog. Use list_components.`);
-      ed.ensureImport(name, importSpecifier(this.config.root, rel, spec.file));
+      ed.ensureImport(name, importSpecifier(this.config.root, rel, spec.file), spec.defaultExport);
     }
   }
   cleanCache = /* @__PURE__ */ new Map();