figma-rust-mcp 3.2.8 → 3.2.11

package/plugin/ui.html

@@ -1,211 +1,211 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Figma MCP Loader</title>
-  <style>
-    :root {
-      --bg: #0d0e12;
-      --surface-base: #12141a;
-      --surface-card: #171922;
-      --border-subtle: rgba(255, 255, 255, 0.08);
-      --border-ghost: rgba(147, 129, 255, 0.35);
-      --text-primary: #f4f4f7;
-      --text-secondary: #9aa1b2;
-      --text-muted: #52596d;
-      --ghost-lavender: #9381ff;
-      --ghost-mint: #34d399;
-      --font-ui: -apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Text', sans-serif;
-      --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
-    }
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-    html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text-primary); font-family: var(--font-ui); font-size: 11px; }
-
-    .loader-container {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-      padding: 24px;
-      text-align: center;
-      position: relative;
-    }
-
-    .radar-pulse {
-      position: relative;
-      width: 54px;
-      height: 54px;
-      margin-bottom: 20px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .radar-ring {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-      border: 2px solid var(--ghost-lavender);
-      opacity: 0;
-      animation: pulse 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
-    }
-    .radar-ring:nth-child(2) { animation-delay: 0.6s; }
-    .radar-ring:nth-child(3) { animation-delay: 1.2s; }
-    .radar-core {
-      width: 14px;
-      height: 14px;
-      border-radius: 50%;
-      background: var(--ghost-lavender);
-      box-shadow: 0 0 16px var(--ghost-lavender);
-    }
-
-    @keyframes pulse {
-      0% { transform: scale(0.3); opacity: 0.9; }
-      100% { transform: scale(1.6); opacity: 0; }
-    }
-
-    .title {
-      font-size: 13px;
-      font-weight: 600;
-      letter-spacing: -0.01em;
-      margin-bottom: 6px;
-      color: var(--text-primary);
-    }
-    .status-text {
-      font-size: 11px;
-      color: var(--text-secondary);
-      margin-bottom: 16px;
-      line-height: 1.5;
-    }
-    .badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      padding: 4px 10px;
-      background: var(--surface-card);
-      border: 1px solid var(--border-subtle);
-      border-radius: 9999px;
-      font-family: var(--font-mono);
-      font-size: 10px;
-      color: var(--ghost-mint);
-      margin-bottom: 16px;
-    }
-    .hint-box {
-      background: var(--surface-base);
-      border: 1px solid var(--border-subtle);
-      border-radius: 8px;
-      padding: 10px 12px;
-      max-width: 280px;
-      font-size: 10px;
-      color: var(--text-muted);
-      line-height: 1.4;
-      text-align: left;
-    }
-    .hint-box code {
-      font-family: var(--font-mono);
-      color: var(--ghost-lavender);
-      display: block;
-      margin-top: 4px;
-      background: rgba(0,0,0,0.3);
-      padding: 3px 6px;
-      border-radius: 4px;
-    }
-  </style>
-</head>
-<body>
-  <div class="loader-container">
-    <div class="radar-pulse">
-      <div class="radar-ring"></div>
-      <div class="radar-ring"></div>
-      <div class="radar-ring"></div>
-      <div class="radar-core"></div>
-    </div>
-    <div class="title">Connecting to figma-mcp</div>
-    <div id="status" class="status-text">Scanning local ports (38451-38455)...</div>
-    <div class="badge">
-      <span>●</span> <span id="port-label">localhost:38451</span>
-    </div>
-    <div class="hint-box">
-      Ensure the local Rust server is running:
-      <code>npx figma-rust-mcp</code>
-    </div>
-  </div>
-
-  <script>
-    const PORTS = [38451, 38452, 38453, 38454, 38455];
-    let attempts = 0;
-
-    async function checkPort(port) {
-      const controller = new AbortController();
-      const timeoutId = setTimeout(() => controller.abort(), 800);
-      try {
-        const res = await fetch(`http://localhost:${port}/plugin/version`, {
-          signal: controller.signal,
-          cache: "no-store"
-        });
-        clearTimeout(timeoutId);
-        if (res.ok) {
-          const data = await res.json();
-          return { ok: true, data };
-        }
-      } catch (_) {
-        clearTimeout(timeoutId);
-      }
-      return { ok: false };
-    }
-
-    async function bootstrapFromPort(port) {
-      const statusEl = document.getElementById("status");
-      if (statusEl) statusEl.textContent = "Loading dynamic runtime...";
-
-      try {
-        // 1. Fetch main thread code
-        const codeRes = await fetch(`http://localhost:${port}/plugin/code.js?t=${Date.now()}`);
-        if (!codeRes.ok) throw new Error("Failed to load plugin code: " + codeRes.status);
-        const codeText = await codeRes.text();
-
-        // Send to main thread
-        parent.postMessage({ pluginMessage: { type: "EVAL_MAIN_CODE", code: codeText } }, "*");
-
-        // 2. Fetch full UI HTML
-        const uiRes = await fetch(`http://localhost:${port}/plugin/ui.html?t=${Date.now()}`);
-        if (!uiRes.ok) throw new Error("Failed to load plugin UI: " + uiRes.status);
-        const uiHtml = await uiRes.text();
-
-        // 3. Inject full UI cleanly
-        document.open();
-        document.write(uiHtml);
-        document.close();
-      } catch (err) {
-        console.error("[figma-mcp stub]", err);
-        if (statusEl) statusEl.textContent = "Failed to load: " + err.message + ". Retrying...";
-        setTimeout(findAndConnect, 1500);
-      }
-    }
-
-    async function findAndConnect() {
-      attempts++;
-      const statusEl = document.getElementById("status");
-      const portEl = document.getElementById("port-label");
-
-      for (const port of PORTS) {
-        if (portEl) portEl.textContent = `localhost:${port}`;
-        const result = await checkPort(port);
-        if (result.ok) {
-          await bootstrapFromPort(port);
-          return;
-        }
-      }
-
-      if (statusEl) {
-        statusEl.textContent = `Waiting for server (attempt #${attempts})...`;
-      }
-      setTimeout(findAndConnect, 1000);
-    }
-
-    findAndConnect();
-  </script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Figma MCP Loader</title>
+  <style>
+    :root {
+      --bg: #0d0e12;
+      --surface-base: #12141a;
+      --surface-card: #171922;
+      --border-subtle: rgba(255, 255, 255, 0.08);
+      --border-ghost: rgba(147, 129, 255, 0.35);
+      --text-primary: #f4f4f7;
+      --text-secondary: #9aa1b2;
+      --text-muted: #52596d;
+      --ghost-lavender: #9381ff;
+      --ghost-mint: #34d399;
+      --font-ui: -apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Text', sans-serif;
+      --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
+    }
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text-primary); font-family: var(--font-ui); font-size: 11px; }
+
+    .loader-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      padding: 24px;
+      text-align: center;
+      position: relative;
+    }
+
+    .radar-pulse {
+      position: relative;
+      width: 54px;
+      height: 54px;
+      margin-bottom: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .radar-ring {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      border: 2px solid var(--ghost-lavender);
+      opacity: 0;
+      animation: pulse 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
+    }
+    .radar-ring:nth-child(2) { animation-delay: 0.6s; }
+    .radar-ring:nth-child(3) { animation-delay: 1.2s; }
+    .radar-core {
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background: var(--ghost-lavender);
+      box-shadow: 0 0 16px var(--ghost-lavender);
+    }
+
+    @keyframes pulse {
+      0% { transform: scale(0.3); opacity: 0.9; }
+      100% { transform: scale(1.6); opacity: 0; }
+    }
+
+    .title {
+      font-size: 13px;
+      font-weight: 600;
+      letter-spacing: -0.01em;
+      margin-bottom: 6px;
+      color: var(--text-primary);
+    }
+    .status-text {
+      font-size: 11px;
+      color: var(--text-secondary);
+      margin-bottom: 16px;
+      line-height: 1.5;
+    }
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 10px;
+      background: var(--surface-card);
+      border: 1px solid var(--border-subtle);
+      border-radius: 9999px;
+      font-family: var(--font-mono);
+      font-size: 10px;
+      color: var(--ghost-mint);
+      margin-bottom: 16px;
+    }
+    .hint-box {
+      background: var(--surface-base);
+      border: 1px solid var(--border-subtle);
+      border-radius: 8px;
+      padding: 10px 12px;
+      max-width: 280px;
+      font-size: 10px;
+      color: var(--text-muted);
+      line-height: 1.4;
+      text-align: left;
+    }
+    .hint-box code {
+      font-family: var(--font-mono);
+      color: var(--ghost-lavender);
+      display: block;
+      margin-top: 4px;
+      background: rgba(0,0,0,0.3);
+      padding: 3px 6px;
+      border-radius: 4px;
+    }
+  </style>
+</head>
+<body>
+  <div class="loader-container">
+    <div class="radar-pulse">
+      <div class="radar-ring"></div>
+      <div class="radar-ring"></div>
+      <div class="radar-ring"></div>
+      <div class="radar-core"></div>
+    </div>
+    <div class="title">Connecting to figma-mcp</div>
+    <div id="status" class="status-text">Scanning local ports (38451-38455)...</div>
+    <div class="badge">
+      <span>●</span> <span id="port-label">localhost:38451</span>
+    </div>
+    <div class="hint-box">
+      Ensure the local Rust server is running:
+      <code>npx figma-rust-mcp</code>
+    </div>
+  </div>
+
+  <script>
+    const PORTS = [38451, 38452, 38453, 38454, 38455];
+    let attempts = 0;
+
+    async function checkPort(port) {
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), 800);
+      try {
+        const res = await fetch(`http://localhost:${port}/plugin/version`, {
+          signal: controller.signal,
+          cache: "no-store"
+        });
+        clearTimeout(timeoutId);
+        if (res.ok) {
+          const data = await res.json();
+          return { ok: true, data };
+        }
+      } catch (_) {
+        clearTimeout(timeoutId);
+      }
+      return { ok: false };
+    }
+
+    async function bootstrapFromPort(port) {
+      const statusEl = document.getElementById("status");
+      if (statusEl) statusEl.textContent = "Loading dynamic runtime...";
+
+      try {
+        // 1. Fetch main thread code
+        const codeRes = await fetch(`http://localhost:${port}/plugin/code.js?t=${Date.now()}`);
+        if (!codeRes.ok) throw new Error("Failed to load plugin code: " + codeRes.status);
+        const codeText = await codeRes.text();
+
+        // Send to main thread
+        parent.postMessage({ pluginMessage: { type: "EVAL_MAIN_CODE", code: codeText } }, "*");
+
+        // 2. Fetch full UI HTML
+        const uiRes = await fetch(`http://localhost:${port}/plugin/ui.html?t=${Date.now()}`);
+        if (!uiRes.ok) throw new Error("Failed to load plugin UI: " + uiRes.status);
+        const uiHtml = await uiRes.text();
+
+        // 3. Inject full UI cleanly
+        document.open();
+        document.write(uiHtml);
+        document.close();
+      } catch (err) {
+        console.error("[figma-mcp stub]", err);
+        if (statusEl) statusEl.textContent = "Failed to load: " + err.message + ". Retrying...";
+        setTimeout(findAndConnect, 1500);
+      }
+    }
+
+    async function findAndConnect() {
+      attempts++;
+      const statusEl = document.getElementById("status");
+      const portEl = document.getElementById("port-label");
+
+      for (const port of PORTS) {
+        if (portEl) portEl.textContent = `localhost:${port}`;
+        const result = await checkPort(port);
+        if (result.ok) {
+          await bootstrapFromPort(port);
+          return;
+        }
+      }
+
+      if (statusEl) {
+        statusEl.textContent = `Waiting for server (attempt #${attempts})...`;
+      }
+      setTimeout(findAndConnect, 1000);
+    }
+
+    findAndConnect();
+  </script>
+</body>
+</html>

package/scripts/build-plugin.js

@@ -1,51 +1,52 @@
-// Build script — concatenate plugin-src/*.js into plugin-runtime/code.js
-// No module system used: files are plain JS sharing a single scope when concatenated.
-import { readFileSync, writeFileSync } from "fs";
-
-const { version } = JSON.parse(readFileSync("package.json", "utf8"));
-const cargoVersion = readFileSync("Cargo.toml", "utf8").match(/^version\s*=\s*"([^"]+)"/m)?.[1];
-if (version !== cargoVersion) throw new Error(`Version mismatch: package.json ${version}, Cargo.toml ${cargoVersion}`);
-if (process.env.GITHUB_REF_TYPE === "tag" && process.env.GITHUB_REF_NAME !== `v${version}`) {
-  throw new Error(`Release tag ${process.env.GITHUB_REF_NAME} does not match build version v${version}`);
-}
-
-const files = [
-  "plugin-src/utils.js",
-  "plugin-src/svg-path-helpers.js",
-  "plugin-src/paint-and-effects.js",
-  "plugin-src/token-helpers.js",
-  "plugin-src/read-helpers.js",
-  "plugin-src/handlers-write.js",
-  "plugin-src/handlers-library.js",
-  "plugin-src/handlers-read.js",
-  "plugin-src/handlers-read-detail.js",
-  "plugin-src/handlers-tokens.js",
-  "plugin-src/handlers-write-ops.js",
-  "plugin-src/main.js",
-];
-
-const banner = `// figma-mcp — Figma Plugin main thread v${version}
-// Handles both WRITE (draw UI) and READ (extract design) operations.
-// AUTO-GENERATED by scripts/build-plugin.js — edit plugin-src/*.js instead
-`;
-
-const parts = files.map(f => {
-  const content = readFileSync(f, "utf8");
-  return `\n// ── ${f} ──\n${content}`;
-});
-
-const output = (banner + parts.join("\n")).replace(/\{\{PLUGIN_VERSION\}\}/g, version);
-
-const uiPath = "plugin-runtime/ui.html";
-const ui = readFileSync(uiPath, "utf8").replace(/(<span class="brand-ver"[^>]*>)[^<]*(<\/span>)/,
-  `$1v${version}$2`);
-if (!ui.includes(`id="runtime-version">v${version}</span>`)) throw new Error("Missing runtime version badge");
-if (process.argv.includes('--check')) {
-  if (readFileSync("plugin-runtime/code.js", "utf8") !== output || readFileSync(uiPath, "utf8") !== ui) {
-    throw new Error("Plugin bundle is stale; run npm run build:plugin");
-  }
-} else {
-  writeFileSync("plugin-runtime/code.js", output);
-  writeFileSync(uiPath, ui);
-}
-console.log(`✓ plugin-runtime/code.js written (${output.length} chars, ${output.split("\n").length} lines)`);
+// Build script — concatenate plugin-src/*.js into plugin-runtime/code.js
+// No module system used: files are plain JS sharing a single scope when concatenated.
+import { readFileSync, writeFileSync } from "fs";
+
+const { version } = JSON.parse(readFileSync("package.json", "utf8"));
+const cargoVersion = readFileSync("Cargo.toml", "utf8").match(/^version\s*=\s*"([^"]+)"/m)?.[1];
+if (version !== cargoVersion) throw new Error(`Version mismatch: package.json ${version}, Cargo.toml ${cargoVersion}`);
+if (process.env.GITHUB_REF_TYPE === "tag" && process.env.GITHUB_REF_NAME !== `v${version}`) {
+  throw new Error(`Release tag ${process.env.GITHUB_REF_NAME} does not match build version v${version}`);
+}
+
+const files = [
+  "plugin-src/utils.js",
+  "plugin-src/svg-path-helpers.js",
+  "plugin-src/paint-and-effects.js",
+  "plugin-src/token-helpers.js",
+  "plugin-src/read-helpers.js",
+  "plugin-src/handlers-write.js",
+  "plugin-src/handlers-library.js",
+  "plugin-src/handlers-read.js",
+  "plugin-src/handlers-read-detail.js",
+  "plugin-src/handlers-tokens.js",
+  "plugin-src/handlers-write-ops.js",
+  "plugin-src/task-scope.js",
+  "plugin-src/main.js",
+];
+
+const banner = `// figma-mcp — Figma Plugin main thread v${version}
+// Handles both WRITE (draw UI) and READ (extract design) operations.
+// AUTO-GENERATED by scripts/build-plugin.js — edit plugin-src/*.js instead
+`;
+
+const parts = files.map(f => {
+  const content = readFileSync(f, "utf8");
+  return `\n// ── ${f} ──\n${content}`;
+});
+
+const output = (banner + parts.join("\n")).replace(/\{\{PLUGIN_VERSION\}\}/g, version);
+
+const uiPath = "plugin-runtime/ui.html";
+const ui = readFileSync(uiPath, "utf8").replace(/(<span class="brand-ver"[^>]*>)[^<]*(<\/span>)/,
+  `$1v${version}$2`);
+if (!ui.includes(`id="runtime-version">v${version}</span>`)) throw new Error("Missing runtime version badge");
+if (process.argv.includes('--check')) {
+  if (readFileSync("plugin-runtime/code.js", "utf8") !== output || readFileSync(uiPath, "utf8") !== ui) {
+    throw new Error("Plugin bundle is stale; run npm run build:plugin");
+  }
+} else {
+  writeFileSync("plugin-runtime/code.js", output);
+  writeFileSync(uiPath, ui);
+}
+console.log(`✓ plugin-runtime/code.js written (${output.length} chars, ${output.split("\n").length} lines)`);