@clovis500c/figma-bridge 1.12.0 → 1.13.0

package/README.md

@@ -11,7 +11,7 @@ for the optional comments and version history tools.)
 Works with **Claude Code**, **Claude Desktop**, **Codex**, **Antigravity**, **Gemini CLI**, **Cursor**, **Windsurf**
 and any other MCP client.
 
-<p align="center"><img src="docs/plugin.jpg" alt="Figma Bridge plugin" width="620"></p>
+<p align="center"><img src="docs/plugin.png" alt="Figma Bridge plugin" width="620"></p>
 
 <!-- Demo: record it with docs/record-demo.md, save it as docs/demo.gif, then uncomment.
 <p align="center"><img src="docs/demo.gif" alt="An agent building, importing and exporting with Figma Bridge" width="720"></p>
@@ -68,7 +68,7 @@ Requires [Node.js](https://nodejs.org) 20+ and the Figma **desktop** app.
 
 3. Restart your AI client, open a Figma file and run **Plugins → Development → Figma Bridge**. A green **Live** badge means it's connected.
 
-To update the plugin later, run `npx @clovis500c/figma-bridge plugin` and reopen it in Figma.
+**Updates are automatic:** each time your AI client starts, it runs the latest release and refreshes the plugin. Reopen the plugin in Figma when it shows **Update installed**.
 
 <details>
 <summary>With Bun instead of npm</summary>
@@ -182,7 +182,8 @@ Each tool describes its parameters to the agent, which needs no extra instructio
 |---|---|
 | **Offline** | The MCP server isn't running: start or restart your AI client and check that `FigmaBridge` is enabled. |
 | **Port busy** | Another program uses port 3055. Close it; the plugin reconnects. |
-| **Version mismatch** | The plugin and the server come from different releases: reopen the plugin, or update both. |
+| **Update installed** | A newer version was installed: click **Reopen**, then run the plugin again (Ctrl+Alt+P). |
+| **Older server** | Your AI client still runs an older release: restart it. |
 
 Logs, screenshots, comparison heatmaps and exported code are written to `%TEMP%\figma-bridge`.
 `import_web` uses your installed Chrome or Edge; set `FIGMA_BRIDGE_BROWSER` to use another Chromium-based browser.

package/dist/server.js

@@ -46,8 +46,175 @@ var __esm = (fn, res, err) => () => {
 };
 var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
+// src/setup.ts
+import { copyFileSync, existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+function clientList(home, appData) {
+  return [
+    { id: "claude-code", label: "Claude Code", files: [join(home, ".claude.json")], format: "json", extra: { type: "stdio" } },
+    { id: "claude-desktop", label: "Claude Desktop", files: [join(appData, "Claude", "claude_desktop_config.json")], format: "json" },
+    { id: "codex", label: "Codex", files: [join(home, ".codex", "config.toml")], format: "toml" },
+    {
+      id: "antigravity",
+      label: "Antigravity",
+      files: [join(home, ".gemini", "antigravity", "mcp_config.json"), join(home, ".gemini", "config", "mcp_config.json")],
+      format: "json"
+    },
+    { id: "gemini-cli", label: "Gemini CLI", files: [join(home, ".gemini", "settings.json")], format: "json" },
+    { id: "cursor", label: "Cursor", files: [join(home, ".cursor", "mcp.json")], format: "json" },
+    { id: "windsurf", label: "Windsurf", files: [join(home, ".codeium", "windsurf", "mcp_config.json")], format: "json" }
+  ];
+}
+function backup(path, text) {
+  writeFileSync(path + ".bak-figma-bridge", text);
+}
+function writeJson(path, entry) {
+  const text = existsSync(path) ? readFileSync(path, "utf8") : "";
+  const config = text.trim() ? JSON.parse(text) : {};
+  if (text.trim())
+    backup(path, text);
+  config.mcpServers = { ...config.mcpServers, [SERVER_NAME]: entry };
+  mkdirSync(dirname(path), { recursive: true });
+  writeFileSync(path, JSON.stringify(config, null, 2) + `
+`);
+}
+function tomlBlock(command, args) {
+  return [
+    `[mcp_servers.${SERVER_NAME}]`,
+    `command = '${command}'`,
+    `args = [${args.map((a) => `'${a}'`).join(", ")}]`,
+    "startup_timeout_sec = 60",
+    "tool_timeout_sec = 120"
+  ].join(`
+`);
+}
+function writeToml(path, command, args) {
+  const text = existsSync(path) ? readFileSync(path, "utf8") : "";
+  if (text.trim())
+    backup(path, text);
+  const kept = [];
+  let skipping = false;
+  for (const line of text.split(/\r?\n/)) {
+    const header = /^\s*\[([^\]]+)\]\s*$/.exec(line);
+    if (header)
+      skipping = header[1] === `mcp_servers.${SERVER_NAME}` || header[1].startsWith(`mcp_servers.${SERVER_NAME}.`);
+    if (!skipping)
+      kept.push(line);
+  }
+  const body = kept.join(`
+`).trimEnd();
+  mkdirSync(dirname(path), { recursive: true });
+  writeFileSync(path, (body ? body + `
+
+` : "") + tomlBlock(command, args) + `
+`);
+}
+function runSetup(opts) {
+  const all = clientList(opts.home, opts.appData);
+  const forced = opts.clients ?? [];
+  const unknown = forced.filter((id) => !all.some((c) => c.id === id));
+  if (unknown.length)
+    throw new Error(`Unknown client(s): ${unknown.join(", ")}. Known: ${all.map((c) => c.id).join(", ")}`);
+  const result = { updated: [], failed: [], missing: [] };
+  for (const client of all) {
+    const detected = client.files.filter((f) => existsSync(dirname(f)) && (client.id !== "gemini-cli" || existsSync(f)));
+    const targets = forced.length ? forced.includes(client.id) ? detected.length ? detected : [client.files[0]] : [] : detected;
+    if (!targets.length) {
+      if (!forced.length)
+        result.missing.push(client.label);
+      continue;
+    }
+    for (const file of targets) {
+      try {
+        if (client.format === "toml")
+          writeToml(file, opts.command, opts.args);
+        else
+          writeJson(file, { ...client.extra, command: opts.command, args: opts.args });
+        result.updated.push({ client: client.id, label: client.label, file });
+      } catch (e) {
+        result.failed.push({ client: client.id, label: client.label, file, error: e.message });
+      }
+    }
+  }
+  return result;
+}
+function installPlugin(from, to, version) {
+  mkdirSync(to, { recursive: true });
+  for (const f of PLUGIN_FILES)
+    copyFileSync(join(from, f), join(to, f));
+  if (version)
+    writeFileSync(join(to, "version.json"), JSON.stringify({ version }) + `
+`);
+  return join(to, "manifest.json");
+}
+function compareVersions(a, b) {
+  const pa = a.split(/[.-]/).map((n) => parseInt(n, 10) || 0);
+  const pb = b.split(/[.-]/).map((n) => parseInt(n, 10) || 0);
+  for (let i = 0;i < Math.max(pa.length, pb.length); i++) {
+    const d = (pa[i] ?? 0) - (pb[i] ?? 0);
+    if (d)
+      return d;
+  }
+  return 0;
+}
+function syncPlugin(from, to, version) {
+  if (!PLUGIN_FILES.every((f) => existsSync(join(from, f))))
+    return "skipped";
+  const had = existsSync(join(to, "manifest.json"));
+  let installed = "";
+  try {
+    installed = JSON.parse(readFileSync(join(to, "version.json"), "utf8")).version || "";
+  } catch {}
+  if (installed) {
+    const order = compareVersions(installed, version);
+    if (order > 0)
+      return "newer";
+    if (order === 0 && PLUGIN_FILES.every((f) => existsSync(join(to, f))))
+      return "current";
+  }
+  installPlugin(from, to, version);
+  return had ? "updated" : "installed";
+}
+function printSetup(r, rerun) {
+  for (const label of r.missing)
+    console.log(dim(`  –  ${label.padEnd(15)} not found`));
+  for (const u of r.updated)
+    console.log(green(`  ✔  ${u.label.padEnd(15)}`) + dim(u.file));
+  for (const f of r.failed)
+    console.log(yellow(`  !  ${f.label.padEnd(15)}could not update ${f.file}: ${f.error}`));
+  if (!r.updated.length)
+    console.log(yellow(`
+No AI client found. Use \`${rerun} --client <name>\` or \`${rerun} --print\` for manual config.`));
+}
+function printSnippets(command, args) {
+  console.log(bold("JSON clients") + dim(" (Claude, Antigravity, Gemini CLI, Cursor, Windsurf…)"));
+  console.log(JSON.stringify({ mcpServers: { [SERVER_NAME]: { command, args } } }, null, 2));
+  console.log(bold(`
+Codex`) + dim(" (~/.codex/config.toml)"));
+  console.log(tomlBlock(command, args) + `
+`);
+}
+function parseClients(argv) {
+  const out = [];
+  argv.forEach((a, i) => {
+    if (a === "--client" && argv[i + 1])
+      out.push(...argv[i + 1].split(","));
+    else if (a.startsWith("--client="))
+      out.push(...a.slice(9).split(","));
+  });
+  return out;
+}
+var SERVER_NAME = "FigmaBridge", PLUGIN_FILES, color = (code) => (s) => process.stdout.isTTY ? `\x1B[${code}m${s}\x1B[0m` : s, bold, green, dim, yellow;
+var init_setup = __esm(() => {
+  PLUGIN_FILES = ["manifest.json", "code.js", "ui.html"];
+  bold = color(1);
+  green = color(32);
+  dim = color(2);
+  yellow = color(33);
+});
+
 // package.json
-var version = "1.12.0";
+var version = "1.13.0";
 var init_package = () => {};
 
 // node_modules/zod/v3/helpers/util.js
@@ -30585,6 +30752,8 @@ function snapshot(opts) {
 }
 
 // src/web/browser.ts
+import { existsSync as existsSync5 } from "node:fs";
+import { join as join8 } from "node:path";
 import { pathToFileURL } from "node:url";
 async function loadPlaywright() {
   try {
@@ -30593,12 +30762,39 @@ async function loadPlaywright() {
     throw new WebImportError("import_web needs the optional package playwright-core, which is not installed. Reinstall without --no-optional, or run `npm install -g playwright-core` (it uses your installed Chrome or Edge; no browser is downloaded).", "MISSING_DEPENDENCY");
   }
 }
+function otherChromiumBrowsers() {
+  const env = process.env;
+  const roots = process.platform === "win32" ? [env.ProgramFiles, env["ProgramFiles(x86)"], env.LOCALAPPDATA, "C:\\Program Files", "C:\\Program Files (x86)"].filter(Boolean) : [];
+  const candidates = process.platform === "win32" ? [
+    { label: "Brave", paths: roots.map((r) => join8(r, "BraveSoftware", "Brave-Browser", "Application", "brave.exe")) },
+    { label: "Chromium", paths: roots.map((r) => join8(r, "Chromium", "Application", "chrome.exe")) },
+    { label: "Vivaldi", paths: roots.map((r) => join8(r, "Vivaldi", "Application", "vivaldi.exe")) },
+    { label: "Opera", paths: roots.map((r) => join8(r, "Programs", "Opera", "opera.exe")) }
+  ] : process.platform === "darwin" ? [
+    { label: "Brave", paths: ["/Applications/Brave Browser.app/Contents/MacOS/Brave Browser"] },
+    { label: "Chromium", paths: ["/Applications/Chromium.app/Contents/MacOS/Chromium"] },
+    { label: "Arc", paths: ["/Applications/Arc.app/Contents/MacOS/Arc"] }
+  ] : [
+    { label: "Brave", paths: ["/usr/bin/brave-browser", "/usr/bin/brave"] },
+    { label: "Chromium", paths: ["/usr/bin/chromium", "/usr/bin/chromium-browser", "/snap/bin/chromium"] }
+  ];
+  const found = [];
+  for (const c of candidates) {
+    const path = c.paths.find((p) => existsSync5(p));
+    if (path)
+      found.push({ label: c.label, path });
+  }
+  return found;
+}
 async function launchBrowser() {
   const { chromium } = await loadPlaywright();
   const tries = [];
   if (process.env.FIGMA_BRIDGE_BROWSER)
     tries.push({ label: process.env.FIGMA_BRIDGE_BROWSER, opts: { executablePath: process.env.FIGMA_BRIDGE_BROWSER } });
-  tries.push({ label: "Chrome", opts: { channel: "chrome" } }, { label: "Edge", opts: { channel: "msedge" } }, { label: "Playwright Chromium", opts: {} });
+  tries.push({ label: "Chrome", opts: { channel: "chrome" } }, { label: "Edge", opts: { channel: "msedge" } });
+  for (const b of otherChromiumBrowsers())
+    tries.push({ label: b.label, opts: { executablePath: b.path } });
+  tries.push({ label: "Playwright Chromium", opts: {} });
   const errors = [];
   for (const t of tries) {
     try {
@@ -30608,7 +30804,7 @@ async function launchBrowser() {
 `)[0]}`);
     }
   }
-  throw new WebImportError(`No browser found to render the page. Install Google Chrome or Microsoft Edge, or set FIGMA_BRIDGE_BROWSER to a Chromium-based browser. (${errors.join("; ")})`, "NO_BROWSER");
+  throw new WebImportError(`No browser found to render the page. Install Chrome, Edge or Brave, or set FIGMA_BRIDGE_BROWSER to a Chromium-based browser. (${errors.join("; ")})`, "NO_BROWSER");
 }
 async function render(source, opts) {
   const given = [source.url, source.html, source.path].filter((v) => v !== undefined).length;
@@ -31647,7 +31843,7 @@ var init_import = __esm(() => {
 import { createHash as createHash2 } from "node:crypto";
 import { mkdirSync as mkdirSync5, readdirSync as readdirSync2, readFileSync as readFileSync8, rmSync, statSync as statSync2, writeFileSync as writeFileSync5 } from "node:fs";
 import { homedir as homedir2 } from "node:os";
-import { join as join8 } from "node:path";
+import { join as join9 } from "node:path";
 function ensureDir() {
   mkdirSync5(SNIPPETS_DIR, { recursive: true });
 }
@@ -31664,14 +31860,14 @@ function files() {
 }
 function listSnippets() {
   return files().map((f) => {
-    const source = readFileSync8(join8(SNIPPETS_DIR, f), "utf8");
+    const source = readFileSync8(join9(SNIPPETS_DIR, f), "utf8");
     return { name: f.slice(0, -3), description: header2(source, "description"), usage: header2(source, "usage") };
   });
 }
 function getSnippet(name) {
   checkName(name);
   try {
-    return readFileSync8(join8(SNIPPETS_DIR, `${name}.js`), "utf8");
+    return readFileSync8(join9(SNIPPETS_DIR, `${name}.js`), "utf8");
   } catch {
     throw new BridgeError(`No snippet named "${name}".`, "NOT_FOUND");
   }
@@ -31684,37 +31880,37 @@ function saveSnippet(name, code, description = "", usage = "") {
 // @usage ${usage.replace(/\n/g, " ") || `await lib.${name}(args)`}
 ${body}
 `;
-  const path = join8(SNIPPETS_DIR, `${name}.js`);
+  const path = join9(SNIPPETS_DIR, `${name}.js`);
   writeFileSync5(path, text);
   return path;
 }
 function deleteSnippet(name) {
   checkName(name);
-  rmSync(join8(SNIPPETS_DIR, `${name}.js`), { force: true });
+  rmSync(join9(SNIPPETS_DIR, `${name}.js`), { force: true });
 }
 function loadLibrary() {
   const list = files();
-  const stamp = list.map((f) => `${f}:${statSync2(join8(SNIPPETS_DIR, f)).mtimeMs}`).join("|");
+  const stamp = list.map((f) => `${f}:${statSync2(join9(SNIPPETS_DIR, f)).mtimeMs}`).join("|");
   if (cached2 && cached2.stamp === stamp)
     return cached2;
   const lib = {};
   for (const f of list)
-    lib[f.slice(0, -3)] = readFileSync8(join8(SNIPPETS_DIR, f), "utf8");
+    lib[f.slice(0, -3)] = readFileSync8(join9(SNIPPETS_DIR, f), "utf8");
   cached2 = { stamp, hash: stamp ? createHash2("sha1").update(stamp + JSON.stringify(lib)).digest("base64url").slice(0, 12) : "empty", lib };
   return cached2;
 }
 var SNIPPETS_DIR, NAME, cached2 = null;
 var init_snippets = __esm(() => {
   init_bridge();
-  SNIPPETS_DIR = process.env.FIGMA_BRIDGE_SNIPPETS || join8(homedir2(), ".figma-bridge", "snippets");
+  SNIPPETS_DIR = process.env.FIGMA_BRIDGE_SNIPPETS || join9(homedir2(), ".figma-bridge", "snippets");
   NAME = /^[A-Za-z_][A-Za-z0-9_]{0,63}$/;
 });
 
 // src/server.ts
 import { appendFileSync, mkdirSync as mkdirSync6, statSync as statSync3, truncateSync, writeFileSync as writeFileSync6 } from "node:fs";
 import { mkdir, readFile, stat, writeFile } from "node:fs/promises";
-import { tmpdir } from "node:os";
-import { dirname as dirname4, join as join9 } from "node:path";
+import { homedir as homedir3, tmpdir } from "node:os";
+import { dirname as dirname4, join as join10 } from "node:path";
 import { fileURLToPath } from "node:url";
 function log(line) {
   const text = `[${new Date().toISOString().slice(11, 23)}] ${line}`;
@@ -31918,12 +32114,13 @@ var init_server3 = __esm(async () => {
   init_tokens();
   init_tokens_export();
   init_import();
+  init_setup();
   init_snippets();
   init_package();
   PORT = Number(process.env.FIGMA_BRIDGE_PORT) || 3055;
   CHANNEL = process.env.FIGMA_BRIDGE_CHANNEL || "default";
-  OUT_DIR = process.env.FIGMA_BRIDGE_OUT || join9(tmpdir(), "figma-bridge");
-  LOG_FILE = join9(OUT_DIR, "bridge.log");
+  OUT_DIR = process.env.FIGMA_BRIDGE_OUT || join10(tmpdir(), "figma-bridge");
+  LOG_FILE = join10(OUT_DIR, "bridge.log");
   MAX_IMAGE_BYTES = 50 << 20;
   mkdirSync6(OUT_DIR, { recursive: true });
   try {
@@ -31932,6 +32129,16 @@ var init_server3 = __esm(async () => {
   } catch {}
   bridge = new Bridge({ port: PORT, channel: CHANNEL, version, log });
   bridge.start();
+  if (process.env.FIGMA_BRIDGE_PLUGIN_SYNC !== "0") {
+    try {
+      const target = process.env.FIGMA_BRIDGE_PLUGIN_DIR || join10(homedir3(), ".figma-bridge", "plugin");
+      const status = syncPlugin(join10(dirname4(fileURLToPath(import.meta.url)), "..", "plugin"), target, version);
+      if (status === "installed" || status === "updated")
+        log(`Figma plugin ${status} to v${version} in ${target}; reopen it in Figma`);
+    } catch (e) {
+      log(`Could not update the Figma plugin copy: ${e.message}`);
+    }
+  }
   INSTRUCTIONS = [
     "Figma Bridge drives the user's Figma desktop app through a local plugin. No rate limits: iterate freely.",
     "Workflow:",
@@ -32076,7 +32283,7 @@ ${f.content}`).join(`
       const single = files.length === 1 && /\.[a-z0-9]+$/i.test(args.path);
       const written = [];
       for (const f of files) {
-        const target = single ? args.path : join9(args.path, f.path);
+        const target = single ? args.path : join10(args.path, f.path);
         written.push({ format: f.format, path: target, status: await writeIfChanged(target, f.content) });
       }
       return ok({ counts, files: written, ...warnings.length ? { warnings } : {} });
@@ -32114,7 +32321,7 @@ ${f.content}`).join(`
     const bytes = Buffer.from(r.bytesB64, "base64");
     const info = imageInfo(bytes);
     const ext = r.format === "JPG" ? "jpg" : "png";
-    const path = join9(OUT_DIR, `${safeName(r.name)}-${safeName(r.nodeId)}-${Date.now()}.${ext}`);
+    const path = join10(OUT_DIR, `${safeName(r.name)}-${safeName(r.nodeId)}-${Date.now()}.${ext}`);
     await writeFile(path, bytes);
     const meta = { path, nodeId: r.nodeId, name: r.name, width: info?.width, height: info?.height, bytes: bytes.length };
     const content = [{ type: "text", text: json(meta) }];
@@ -32141,7 +32348,7 @@ ${f.content}`).join(`
     const diff = await bridge.request("compare_images", { actual: shot.bytesB64, reference: Buffer.from(refBytes).toString("base64"), referenceMime: info.mime, threshold: args.threshold, sideBySide: !!args.returnImage }, 90000);
     const pct = (v) => Math.round(v * 1e4) / 100;
     const toLayer = (v, axis) => Math.round((v / shot.scale + shot.offset[axis]) * 10) / 10;
-    const heatmapPath = join9(OUT_DIR, `compare-${safeName(shot.name)}-${Date.now()}.png`);
+    const heatmapPath = join10(OUT_DIR, `compare-${safeName(shot.name)}-${Date.now()}.png`);
     await writeFile(heatmapPath, Buffer.from(diff.heatmap, "base64"));
     const refRatio = diff.reference.width / diff.reference.height;
     const ratio = diff.width / diff.height;
@@ -32215,7 +32422,7 @@ Example: {"url":"https://example.com","viewports":[1440,390]}`,
       const built = await bridge.request("build", { spec: v.spec, images, parentId: args.parentId, x, y, select: false, label: "Web import" }, 120000);
       let reference;
       if (v.screenshot) {
-        reference = join9(OUT_DIR, `import-${safeName(v.title || "page")}-${v.viewport}-${Date.now()}.png`);
+        reference = join10(OUT_DIR, `import-${safeName(v.title || "page")}-${v.viewport}-${Date.now()}.png`);
         await writeFile(reference, v.screenshot);
       }
       frames.push({ viewport: v.viewport, rootId: built.rootId, name: v.spec.name, layers: built.created, size: { width: v.width, height: v.height }, reference });
@@ -32285,7 +32492,7 @@ Links are added to existing interactions unless replace:true; clear:[ids] remove
     }
   }, ({ nodeId, projectPath, framework, styling, name, outDir, write, overwrite }) => track("export_code", `${nodeId ?? "(selection)"} ${projectPath ?? `${framework ?? "html"}/${styling ?? "css"}`}`, async () => {
     const r = await bridge.request("export_tree", { nodeId }, 120000);
-    const dir = join9(OUT_DIR, `export-${safeName(r.tree.name)}-${Date.now()}`);
+    const dir = join10(OUT_DIR, `export-${safeName(r.tree.name)}-${Date.now()}`);
     const finalName = {};
     const assetBytes = {};
     for (const [file, a] of Object.entries(r.assets)) {
@@ -32301,8 +32508,8 @@ Links are added to existing interactions unless replace:true; clear:[ids] remove
     if (projectPath) {
       const plan = planProjectExport(projectPath, tree, assetBytes, { framework, styling, name, outDir });
       for (const f of plan.files) {
-        mkdirSync6(dirname4(join9(dir, f.path)), { recursive: true });
-        writeFileSync6(join9(dir, f.path), typeof f.content === "string" ? f.content : Buffer.from(f.content));
+        mkdirSync6(dirname4(join10(dir, f.path)), { recursive: true });
+        writeFileSync6(join10(dir, f.path), typeof f.content === "string" ? f.content : Buffer.from(f.content));
       }
       const written = write ? writePlan(projectPath, plan.files, !!overwrite) : null;
       const s = plan.stack;
@@ -32327,13 +32534,13 @@ ${f.content}`).join(`
 … truncated: the full code is in ${dir}`;
       return { content: [{ type: "text", text: json(meta) }, { type: "text", text }] };
     }
-    mkdirSync6(join9(dir, "assets"), { recursive: true });
+    mkdirSync6(join10(dir, "assets"), { recursive: true });
     for (const [file, bytes] of Object.entries(assetBytes))
-      writeFileSync6(join9(dir, "assets", file), bytes);
+      writeFileSync6(join10(dir, "assets", file), bytes);
     const fw = framework ?? "html";
     const code = generateCode(tree, { framework: fw, styling: styling ?? "css", assetPath: (f) => `assets/${f}` });
     for (const f of code.files)
-      writeFileSync6(join9(dir, f.path), f.content);
+      writeFileSync6(join10(dir, f.path), f.content);
     warnings.push(...code.warnings);
     const meta = {
       dir,
@@ -32631,154 +32838,20 @@ ${f.content}`).join(`
 });
 
 // src/cli.ts
-import { homedir as homedir3 } from "node:os";
-import { dirname as dirname5, join as join10 } from "node:path";
-import { fileURLToPath as fileURLToPath2 } from "node:url";
-
-// src/setup.ts
-import { copyFileSync, existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
-import { dirname, join } from "node:path";
-var SERVER_NAME = "FigmaBridge";
-function clientList(home, appData) {
-  return [
-    { id: "claude-code", label: "Claude Code", files: [join(home, ".claude.json")], format: "json", extra: { type: "stdio" } },
-    { id: "claude-desktop", label: "Claude Desktop", files: [join(appData, "Claude", "claude_desktop_config.json")], format: "json" },
-    { id: "codex", label: "Codex", files: [join(home, ".codex", "config.toml")], format: "toml" },
-    {
-      id: "antigravity",
-      label: "Antigravity",
-      files: [join(home, ".gemini", "antigravity", "mcp_config.json"), join(home, ".gemini", "config", "mcp_config.json")],
-      format: "json"
-    },
-    { id: "gemini-cli", label: "Gemini CLI", files: [join(home, ".gemini", "settings.json")], format: "json" },
-    { id: "cursor", label: "Cursor", files: [join(home, ".cursor", "mcp.json")], format: "json" },
-    { id: "windsurf", label: "Windsurf", files: [join(home, ".codeium", "windsurf", "mcp_config.json")], format: "json" }
-  ];
-}
-function backup(path, text) {
-  writeFileSync(path + ".bak-figma-bridge", text);
-}
-function writeJson(path, entry) {
-  const text = existsSync(path) ? readFileSync(path, "utf8") : "";
-  const config = text.trim() ? JSON.parse(text) : {};
-  if (text.trim())
-    backup(path, text);
-  config.mcpServers = { ...config.mcpServers, [SERVER_NAME]: entry };
-  mkdirSync(dirname(path), { recursive: true });
-  writeFileSync(path, JSON.stringify(config, null, 2) + `
-`);
-}
-function tomlBlock(command, args) {
-  return [
-    `[mcp_servers.${SERVER_NAME}]`,
-    `command = '${command}'`,
-    `args = [${args.map((a) => `'${a}'`).join(", ")}]`,
-    "startup_timeout_sec = 60",
-    "tool_timeout_sec = 120"
-  ].join(`
-`);
-}
-function writeToml(path, command, args) {
-  const text = existsSync(path) ? readFileSync(path, "utf8") : "";
-  if (text.trim())
-    backup(path, text);
-  const kept = [];
-  let skipping = false;
-  for (const line of text.split(/\r?\n/)) {
-    const header = /^\s*\[([^\]]+)\]\s*$/.exec(line);
-    if (header)
-      skipping = header[1] === `mcp_servers.${SERVER_NAME}` || header[1].startsWith(`mcp_servers.${SERVER_NAME}.`);
-    if (!skipping)
-      kept.push(line);
-  }
-  const body = kept.join(`
-`).trimEnd();
-  mkdirSync(dirname(path), { recursive: true });
-  writeFileSync(path, (body ? body + `
-
-` : "") + tomlBlock(command, args) + `
-`);
-}
-function runSetup(opts) {
-  const all = clientList(opts.home, opts.appData);
-  const forced = opts.clients ?? [];
-  const unknown = forced.filter((id) => !all.some((c) => c.id === id));
-  if (unknown.length)
-    throw new Error(`Unknown client(s): ${unknown.join(", ")}. Known: ${all.map((c) => c.id).join(", ")}`);
-  const result = { updated: [], failed: [], missing: [] };
-  for (const client of all) {
-    const detected = client.files.filter((f) => existsSync(dirname(f)) && (client.id !== "gemini-cli" || existsSync(f)));
-    const targets = forced.length ? forced.includes(client.id) ? detected.length ? detected : [client.files[0]] : [] : detected;
-    if (!targets.length) {
-      if (!forced.length)
-        result.missing.push(client.label);
-      continue;
-    }
-    for (const file of targets) {
-      try {
-        if (client.format === "toml")
-          writeToml(file, opts.command, opts.args);
-        else
-          writeJson(file, { ...client.extra, command: opts.command, args: opts.args });
-        result.updated.push({ client: client.id, label: client.label, file });
-      } catch (e) {
-        result.failed.push({ client: client.id, label: client.label, file, error: e.message });
-      }
-    }
-  }
-  return result;
-}
-function installPlugin(from, to) {
-  mkdirSync(to, { recursive: true });
-  for (const f of ["manifest.json", "code.js", "ui.html"])
-    copyFileSync(join(from, f), join(to, f));
-  return join(to, "manifest.json");
-}
-var color = (code) => (s) => process.stdout.isTTY ? `\x1B[${code}m${s}\x1B[0m` : s;
-var bold = color(1);
-var green = color(32);
-var dim = color(2);
-var yellow = color(33);
-function printSetup(r, rerun) {
-  for (const label of r.missing)
-    console.log(dim(`  –  ${label.padEnd(15)} not found`));
-  for (const u of r.updated)
-    console.log(green(`  ✔  ${u.label.padEnd(15)}`) + dim(u.file));
-  for (const f of r.failed)
-    console.log(yellow(`  !  ${f.label.padEnd(15)}could not update ${f.file}: ${f.error}`));
-  if (!r.updated.length)
-    console.log(yellow(`
-No AI client found. Use \`${rerun} --client <name>\` or \`${rerun} --print\` for manual config.`));
-}
-function printSnippets(command, args) {
-  console.log(bold("JSON clients") + dim(" (Claude, Antigravity, Gemini CLI, Cursor, Windsurf…)"));
-  console.log(JSON.stringify({ mcpServers: { [SERVER_NAME]: { command, args } } }, null, 2));
-  console.log(bold(`
-Codex`) + dim(" (~/.codex/config.toml)"));
-  console.log(tomlBlock(command, args) + `
-`);
-}
-function parseClients(argv) {
-  const out = [];
-  argv.forEach((a, i) => {
-    if (a === "--client" && argv[i + 1])
-      out.push(...argv[i + 1].split(","));
-    else if (a.startsWith("--client="))
-      out.push(...a.slice(9).split(","));
-  });
-  return out;
-}
-
-// src/cli.ts
+init_setup();
 init_package();
+import { homedir as homedir4 } from "node:os";
+import { dirname as dirname5, join as join11 } from "node:path";
+import { fileURLToPath as fileURLToPath2 } from "node:url";
 var PACKAGE = "@clovis500c/figma-bridge";
 var [cmd, ...rest] = process.argv.slice(2);
-var home = homedir3();
-var pluginSource = join10(dirname5(fileURLToPath2(import.meta.url)), "..", "plugin");
-var pluginTarget = join10(home, ".figma-bridge", "plugin");
-var npx = process.platform === "win32" ? { command: "cmd", args: ["/c", "npx", "-y", PACKAGE] } : { command: "npx", args: ["-y", PACKAGE] };
+var home = homedir4();
+var pluginSource = join11(dirname5(fileURLToPath2(import.meta.url)), "..", "plugin");
+var pluginTarget = join11(home, ".figma-bridge", "plugin");
+var spec = `${PACKAGE}@latest`;
+var npx = process.platform === "win32" ? { command: "cmd", args: ["/c", "npx", "-y", spec] } : { command: "npx", args: ["-y", spec] };
 function plugin() {
-  const manifest = installPlugin(pluginSource, pluginTarget);
+  const manifest = installPlugin(pluginSource, pluginTarget, version);
   console.log(`${bold("Figma plugin")} copied to ${dim(pluginTarget)}`);
   return manifest;
 }
@@ -32787,7 +32860,7 @@ function next(manifest) {
 ${bold("Next")}
   1. Figma desktop → Plugins → Development → Import plugin from manifest…
      ${green(manifest)}
-     (once; after an update, run ${bold(`npx ${PACKAGE} plugin`)} again and reopen the plugin)
+     (once: updates install themselves when your AI client restarts; then reopen the plugin)
   2. Restart your AI client, then run Plugins → Development → Figma Bridge in a Figma file.
 `);
 }
@@ -32805,7 +32878,7 @@ Figma Bridge setup
       break;
     }
     try {
-      const appData = process.env.APPDATA || join10(home, "AppData", "Roaming");
+      const appData = process.env.APPDATA || join11(home, "AppData", "Roaming");
       printSetup(runSetup({ home, appData, command: npx.command, args: npx.args, clients: parseClients(rest) }), `npx ${PACKAGE} setup`);
     } catch (e) {
       console.log(yellow(e.message));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clovis500c/figma-bridge",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "type": "module",
   "description": "Local MCP bridge that lets any AI agent design in the Figma desktop app, with no rate limits.",
   "keywords": [
@@ -35,7 +35,8 @@
     "prepare": "bun run build",
     "check": "tsc -p tsconfig.json && tsc -p tsconfig.test.json && tsc -p plugin/tsconfig.json && bun run scripts/check-plugin.ts",
     "test": "bun run build && bun run test/selftest.ts",
-    "test:unit": "bun test"
+    "test:unit": "bun test",
+    "preview": "bun run scripts/render-preview.ts"
   },
   "devDependencies": {
     "@figma/plugin-typings": "^1.139.0",

package/plugin/code.js

@@ -4226,7 +4226,7 @@
     finish(id, codeError("The user cancelled the selection request", "CANCELLED"));
   }
   // package.json
-  var version = "1.12.0";
+  var version = "1.13.0";
 
   // plugin/code.ts
   var DEFAULT_SIZE = { width: 340, height: 540 };
@@ -4309,6 +4309,9 @@
       size = { width: DEFAULT_SIZE.width, height: DEFAULT_SIZE.height };
       applySize2();
       figma.clientStorage.setAsync("size", size);
+    } else if (msg.t === "reopen") {
+      figma.notify("Figma Bridge updated: run it again (Ctrl+Alt+P)", { timeout: 6000 });
+      figma.closePlugin();
     } else if (msg.t === "notify")
       figma.notify(String(msg.text), { timeout: 2500 });
     else if (msg.t === "focus")

package/plugin/ui.html

@@ -357,7 +357,8 @@
 
     <section class="banner warn" id="verBar">
       <span class="bico"><svg width="14" height="14"><use href="#i-alert"/></svg></span>
-      <div class="main"><b>Version mismatch</b><span id="verMsg">Reopen the plugin or update.</span></div>
+      <div class="main"><b id="verTitle">Version mismatch</b><span id="verMsg">Reopen the plugin or update.</span></div>
+      <button class="mini" id="btnReopen">Reopen</button>
     </section>
 
     <section class="banner" id="waitBar">
@@ -932,10 +933,23 @@ function onProgress(msg) {
   renderBar();
 }
 
+function newerThan(a, b) {
+  const pa = a.split(".").map(Number), pb = b.split(".").map(Number);
+  for (let i = 0; i < 3; i++) if ((pa[i] || 0) !== (pb[i] || 0)) return (pa[i] || 0) > (pb[i] || 0);
+  return false;
+}
+
 function renderVersion() {
   const mismatch = !!(serverVersion && version && serverVersion !== version);
   document.body.classList.toggle("mismatch", mismatch);
-  if (mismatch) $("verMsg").textContent = "Plugin v" + version + ", server v" + serverVersion + ": reopen the plugin or update.";
+  if (!mismatch) return;
+  // The server installs the matching plugin when it starts: a newer server means the update is already on disk.
+  const updateReady = newerThan(serverVersion, version);
+  $("verTitle").textContent = updateReady ? "Update installed: v" + serverVersion : "Older server: v" + serverVersion;
+  $("verMsg").textContent = updateReady
+    ? "Reopen the plugin to use it."
+    : "This plugin is v" + version + ". Restart your AI client to update its server.";
+  $("btnReopen").style.display = updateReady ? "" : "none";
 }
 
 // ─── Rendering ──────────────────────────────────────────────────────────────
@@ -1118,6 +1132,7 @@ $("btnWaitCancel").onclick = () => {
   const w = [...waits.values()].pop();
   if (w) toPlugin({ t: "cancelWait", id: w.id });
 };
+$("btnReopen").onclick = () => toPlugin({ t: "reopen" });
 $("btnClear").onclick = () => { entries.length = 0; openId = null; render(); };
 $("btnRetry").onclick = () => { retryDelay = 400; connect(); };
 $("btnCopyCmd").onclick = () => copy("Get-NetTCPConnection -LocalPort 3055");