figma-rust-mcp 2.8.4 → 2.9.5

package/README.md

@@ -1,40 +1,48 @@
-# figma-mcp
+# figma-mcp (figma-rust-mcp)
 
 High-performance, bidirectional Model Context Protocol (MCP) server written in **Rust** connecting AI coding assistants directly to **Figma Desktop**.
 
-Enables AI agents (Claude Code, Cursor, Windsurf, Antigravity, VS Code, Zed) to **draw UI directly on the Figma canvas** and **read existing designs back** as structured JSON trees, design tokens, CSS, and screenshots — with zero external API keys needed.
+Enables AI agents (Google Antigravity, Claude Code, Cursor, Windsurf, VS Code, Zed) to **compile Figma designs into production code**, **extract design tokens**, **draw UI directly on canvas**, and **inspect hierarchy, styles, and assets** — with zero external API keys needed.
 
 ---
 
 ## ⚡ Highlights
 
 - **Pure Rust Native Performance**: Starts in `< 1ms`, uses `~3MB RAM`, zero GC pauses.
-- **Bidirectional Bridge**: AI can both write UI (draw vectors, components, frames, autolayout) and read designs (extract hierarchy, compute styles, capture canvas).
-- **Sandboxed JS Runtime**: Powered by **Boa** (pure Rust ECMAScript engine) for safe execution of design scripts.
-- **Built-in Asset CDN**: Auto-fetches and normalizes SVG icons from 7 icon libraries (Ionicons, Lucide, Tabler, Bootstrap, Fluent, Phosphor).
+- **In-Memory Deep Indexing (`figma_index`)**: Queries layers, components, styles, and tokens in `< 1ms` without slow canvas roundtrips.
+- **Binary IPC & Chunk Streaming**: Powered by **MessagePack** (`rmp-serde`) and progressive subtree chunking for instant transfers of massive design files.
+- **Incremental Diff Updates**: Sub-millisecond live document sync (`upsert_node`) keeps the server index fresh as you edit in Figma.
+- **Instant Design-to-Code (`figma_to_code`)**: Compiles Figma frames into clean, semantic components (**React + Tailwind**, **React Native**, **Vue 3 + Tailwind**, **HTML**, **SwiftUI**).
+- **Design Token Exporter (`figma_get_tokens`)**: Exports variables and styles to **Tailwind config**, **CSS custom properties** (`:root` & dark mode), **TypeScript consts**, or **W3C DTCG Token Studio JSON**.
+- **Batch Asset Extractor (`figma_export_assets` / `figma_export_asset`)**: Extracts SVG icons and raster images directly to project folders (`outputPath`) with auto-generated TypeScript barrel exports (`index.ts`) — zero chat token bloating.
+- **Sandboxed JS Drawing Engine (`figma_write`)**: Powered by **Boa** (pure Rust ECMAScript engine) with built-in asset resolvers and 7 icon packs (*Ionicons, Lucide, Tabler, Bootstrap, Fluent, Phosphor*).
 - **Multi-Tab / Multi-Session Support**: Seamlessly connects to multiple open Figma files simultaneously.
-- **100% Localhost Privacy**: All communication stays strictly on `127.0.0.1:38451` via HTTP long-polling.
+- **100% Localhost Privacy**: All communication stays strictly on `127.0.0.1:38451`.
 
 ---
 
 ## 🏛️ Architecture
 
 ```text
-┌─────────────────────────────────────────────────────────┐
-│               Terminal (Standalone Server)              │
-│                       figma-mcp                         │
-│  • MCP SSE Transport (/sse, /message)                   │
-│  • Sandboxed JS Runtime (Boa)                           │
-│  • Built-in Asset & Icon Resolver                       │
-│  • Async WebSocket & HTTP Long-Polling Bridge (Axum)    │
-└───────────────▲─────────────────────────▲───────────────┘
-                │ (ws://127.0.0.1:38451)  │ (http://127.0.0.1:38451/sse)
-                │                         │
-      ┌─────────┴─────────┐     ┌─────────┴─────────┐
-      │   Figma Desktop   │     │ AI Assistant(s)   │
-      │ (Plugin Bridge)   │     │ Antigravity/Cursor│
-      └───────────────────┘     │ Claude Code / Zed │
-                                └───────────────────┘
+┌────────────────────────────────────────────────────────────────────────┐
+│                      Terminal / Standalone Service                     │
+│                       figma-mcp (Pure Rust Engine)                     │
+│  • MCP SSE Transport (/sse, /message) & Direct HTTP (/mcp)             │
+│  • In-Memory Fast Index (<1ms Lookups & Incremental Diffs)             │
+│  • Design-to-Code Compiler (React/Tailwind, Vue, RN, SwiftUI)          │
+│  • Design Token Transformer (CSS, Tailwind, TypeScript, W3C DTCG)      │
+│  • Sandboxed JS Runtime (Boa ECMAScript Engine)                        │
+│  • Binary MessagePack & Progressive Subtree Chunk Receiver             │
+└───────────────▲────────────────────────────────────────▲───────────────┘
+                │ (ws://127.0.0.1:38451)                 │ (http://127.0.0.1:38451/sse)
+                │ (MessagePack / JSON IPC)               │
+      ┌─────────┴─────────┐                    ┌─────────┴─────────┐
+      │   Figma Desktop   │                    │ AI Assistant(s)   │
+      │ (Plugin Bridge)   │                    │ Google Antigravity│
+      │                   │                    │ Cursor / Windsurf │
+      │ • Canvas Tracker  │                    │ Claude Code / Zed │
+      │ • SVG/PNG Render  │                    └───────────────────┘
+      └───────────────────┘
 ```
 
 ---
@@ -43,34 +51,37 @@ Enables AI agents (Claude Code, Cursor, Windsurf, Antigravity, VS Code, Zed) to
 
 ### 1. One-Line Launch with NPX (No Rust toolchain needed)
 
-You can launch `figma-rust-mcp` on any Mac, Linux, or Windows machine with zero setup:
+Launch `figma-rust-mcp` on macOS, Linux, or Windows with zero manual setup:
 
 ```bash
 npx figma-rust-mcp
 ```
 
-This automatically downloads the prebuilt native binary for your architecture and starts the server.
+This automatically downloads the prebuilt native binary for your OS and architecture and starts the server.
 
 ---
 
 ### 2. Auto-Start as Background Service (Recommended for SSE)
 
-If you use SSE transport across multiple AI IDEs (Antigravity, Claude, Cursor, Windsurf) and want `figma-rust-mcp` to **automatically start on OS login and keep running in the background**:
+To make `figma-rust-mcp` start automatically upon OS login and run in the background across all your AI IDEs:
 
 ```bash
 # Install and start auto-start background service (macOS LaunchAgent, Linux systemd, Windows Task Scheduler)
 npx figma-rust-mcp --install-service
 
-# Check background service status
+# Update/Upgrade to the latest version and hot-reload background service
+npx -y figma-rust-mcp@latest --install-service
+
+# Check service status
 npx figma-rust-mcp --service-status
 
-# Uninstall service
+# Uninstall background service
 npx figma-rust-mcp --uninstall-service
 ```
 
 ---
 
-### 3. Or Build from Source (Rust)
+### 3. Build from Source (Rust)
 
 Prerequisites: [Rust toolchain](https://rustup.rs/) (`cargo >= 1.80`).
 
@@ -87,9 +98,9 @@ cargo build --release
 
 1. Open **Figma Desktop**.
 2. Go to **Plugins** → **Development** → **Import plugin from manifest...**
-3. Select the file: `plugin/manifest.json` from this repository.
+3. Select `plugin/manifest.json` from this repository.
 4. Run the plugin (**Plugins** → **Development** → **Figma MCP Bridge**).
-5. The plugin UI will show a green dot (**Connected**).
+5. The plugin UI will display a green dot (**Connected**).
 
 ---
 
@@ -107,10 +118,9 @@ Add to your `~/.gemini/config/mcp_config.json` or project `.agents/mcp_config.js
 }
 ```
 
-#### Claude Code / Cursor / Windsurf / VS Code
-You can connect via SSE or stdio:
+#### Claude Code / Cursor / Windsurf / VS Code / Zed
 
-**Option A: SSE Transport (Recommended)**
+**Option A: SSE Transport (Recommended for background service)**
 ```json
 {
   "mcpServers": {
@@ -137,46 +147,85 @@ You can connect via SSE or stdio:
 
 ## 🛠️ MCP Tools Reference
 
-`figma-mcp` exposes 7 first-class MCP tools:
+`figma-mcp` provides **12 first-class MCP tools**:
 
-### `figma_get_selection`
-Ultra-fast, token-compressed inspection of currently selected layers/frames on the Figma canvas. Returns compacted layout and typography hierarchy with 60-80% fewer tokens.
+### 1. `figma_status`
+Checks live bridge connection status, connected Figma tabs/files, in-memory index health, queue length, and latency statistics.
 
-### `figma_inspect_node`
-Inspects a specific node by ID or name, returning complete design context, CSS, auto-layout rules, and typography.
+### 2. `figma_inspect_node`
+Inspects a specific node by ID or name, returning CSS styles, flex layout rules, tokens, typography, and fills in a clean format (served in `< 1ms` via in-memory index or direct bridge).
 
-### `figma_export_asset`
-Exports any Figma node/layer directly into PNG, JPG, or SVG.
-- `outputPath`: When specified (e.g. `src/assets/logo.png`), saves directly to disk and returns minimal JSON metadata instead of filling context window with large base64 strings!
+### 3. `figma_to_code`
+Compiles any Figma node (Frame, Component, Section, or selection) directly into clean, production-ready component code.
+- **`framework`**: `"react-tailwind"` (default), `"react-native"`, `"vue-tailwind"`, `"html"`, `"swiftui"`.
+- **`outputPath`**: Directly saves the generated component to your codebase (e.g. `src/components/UserProfileCard.tsx`).
+- **`componentName`**: Custom component name override.
+
+### 4. `figma_get_tokens`
+Exports Figma Variables (Design Tokens), Color Styles, Typography Styles, and Elevation/Shadow Styles directly into frontend code.
+- **`format`**: `"tailwind"` (`tailwind.config.js` theme.extend), `"css"` (`:root` CSS custom properties with light/dark theme modes), `"typescript"` (`tokens.ts`), `"w3c"` (W3C DTCG Token Studio JSON), or `"json"`.
+- **`outputPath`**: Writes directly to disk (e.g. `src/styles/tokens.css` or `tailwind.config.js`).
+- **`collection`** / **`mode`** / **`prefix`**: Optional filters and naming prefixes.
 
-### `figma_status`
-Checks live bridge connection status, connected Figma tabs, active file name, and latency statistics.
+### 5. `figma_get_selection`
+Token-compressed inspection of currently selected layers/frames on the Figma canvas. Returns compacted layout and typography hierarchy with **60–80% fewer tokens**.
+- **`detail`**: `"compact"` (recommended), `"minimal"`, `"full"`.
+- **`depth`**: Tree depth limit or `"full"`.
 
-### `figma_write`
+### 6. `figma_export_asset`
+Exports any Figma node/layer directly into PNG, JPG, or SVG.
+- **`outputPath`**: When specified (e.g. `src/assets/logo.png`), saves directly to disk and returns minimal JSON metadata instead of bloating context with large base64 strings.
+- **`format`**: `"png"` (default), `"jpg"`, `"svg"`.
+- **`scale`**: Scaling factor (default `2` for high-res).
+
+### 7. `figma_export_assets`
+Batch extracts all SVG icons and PNG images from a Figma frame/page directly into project directories.
+- **`iconDir`**: Directory path for SVG icons (e.g. `src/assets/icons`).
+- **`imageDir`**: Directory path for raster images (e.g. `public/images`).
+- **`createBarrel`**: Automatically creates an `index.ts` barrel export file in `iconDir`.
+
+### 8. `figma_index`
+Instant `< 1ms` in-memory queries against pre-indexed Figma file structures.
+- **`operation`**:
+  - `"status"`: View index health and node counts.
+  - `"search_nodes"`: Search nodes by text name, query, and type (`FRAME`, `TEXT`, `COMPONENT`, `INSTANCE`).
+  - `"get_node"`: Instant node lookup by ID.
+  - `"search_components"`: Find component sets and variants.
+  - `"search_styles"`: Find paint, text, and effect styles.
+  - `"search_variables"`: Find design token variables by name or collection.
+  - `"refresh"`: Trigger full background re-indexing of the canvas.
+
+### 9. `figma_read`
+Universal reader for advanced queries:
+- **Design-to-code**: `get_design_context`, `get_css`, `get_component_map`, `get_unmapped_components`.
+- **Inspection & Hierarchy**: `get_selection`, `get_design`, `get_page_nodes`, `get_node_detail`, `scan_design`, `search_nodes`.
+- **Design Systems**: `get_styles`, `get_variables`, `get_local_components`, `get_tokens`.
+- **Visuals & Canvas**: `screenshot`, `export_svg`, `export_image`, `get_viewport`.
+
+### 10. `figma_write`
 Executes JavaScript draw commands inside the sandboxed VM to build or modify designs on the Figma canvas.
 - Supports Auto-layout (`layoutMode`, `itemSpacing`, `padding`), typography, fills, strokes, corner radius, drop shadows, and component creation.
 - Supports icon loading: `figma.loadIcon("ionicons", "heart", { size: 24, fill: "#ff4757" })`.
 - Supports image insertion: `figma.loadImage(url, { width: 300, height: 200 })`.
+- Supports Design Tokens: `createVariableCollection`, `createVariable`, `addVariableMode`, `applyVariable`.
+- Supports Prototyping & Reactions: `setReactions`, `getReactions`, `setScrollBehavior`.
 
-### `figma_read`
-Universal reader for advanced queries: `get_design`, `scan_design`, `screenshot`, `export_svg`, `get_variables`, `get_styles`, `search_nodes`. Supports `outputPath` for file exports.
+### 11. `figma_rules`
+Audits the current Figma document and generates a complete design system rule sheet (color tokens, typography styles, variables, component catalog) in `< 1ms` from cache.
 
-### `figma_docs`
+### 12. `figma_docs`
 Fetches built-in documentation, design rules, layout guidelines, and code examples for `figma_write`.
-- `section`: `"all"` | `"rules"` | `"layout"` | `"api"` | `"tokens"` | `"icons"`
-
-### `figma_rules`
-Audits the current Figma document and generates consistency rules and token definitions to guide AI generation.
+- **`section`**: `"rules"` | `"layout"` | `"api"` | `"tokens"` | `"icons"`
 
 ---
 
 ## 💻 Development & Testing
 
 ```bash
-# Run server directly in debug mode
+# Run server in debug mode
 cargo run
 
-# Build release binary
+# Build optimized release binary
 cargo build --release
 
 # Run automated MCP test suite

package/bin/figma-mcp.js

@@ -19,7 +19,7 @@ const __dirname = path.dirname(__filename);
 
 // Read package.json version
 const pkgPath = path.resolve(__dirname, '../package.json');
-let pkgVersion = '2.8.4';
+let pkgVersion = '2.9.5';
 let repoOwner = 'BuiHung1612';
 let repoName = 'figma-mcp';
 
@@ -234,6 +234,7 @@ async function installService(binPath) {
   <key>ProgramArguments</key>
   <array>
     <string>${binPath}</string>
+    <string>--server</string>
   </array>
   <key>RunAtLoad</key>
   <true/>
@@ -272,7 +273,7 @@ After=network.target
 
 [Service]
 Type=simple
-ExecStart=${binPath}
+ExecStart=${binPath} --server
 Restart=on-failure
 RestartSec=5
 
@@ -325,6 +326,7 @@ async function uninstallService() {
     }
 
     try { execSync(`launchctl unload -w "${plistPath}"`, { stdio: 'inherit' }); } catch (_) {}
+    try { execSync(`pkill -f figma-mcp 2>/dev/null`, { stdio: 'pipe' }); } catch (_) {}
     fs.unlinkSync(plistPath);
 
     console.log(`\x1b[32m✓ figma-rust-mcp service uninstalled.\x1b[0m`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "figma-rust-mcp",
-  "version": "2.8.4",
+  "version": "2.9.5",
   "description": "Claude Code to Figma — Bidirectional MCP bridge. AI draws UI on Figma canvas, reads designs back. Works with Claude, Cursor, VS Code, Windsurf, Antigravity. No API key needed.",
   "mcpName": "io.github.BuiHung1612/figma-mcp",
   "type": "module",

package/plugin/code.js

@@ -1,7 +1,7 @@
 // figma-mcp — Figma Plugin main thread v1.2.1
 // Handles both WRITE (draw UI) and READ (extract design) operations.
 // AUTO-GENERATED by scripts/build-plugin.js — edit plugin-src/*.js instead
-// Generated: 2026-08-26T04:26:26.667Z
+// Generated: 2026-08-26T09:42:07.781Z
 
 // ── plugin-src/utils.js ──
 // ─── UTILS ────────────────────────────────────────────────────────────────────
@@ -1238,7 +1238,7 @@ const handlers = {};
 
 handlers.status = async () => ({
   connected:   true,
-  version:     "2.8.3",
+  version:     "2.8.5",
   fileName:    figma.root.name,
   currentPage: figma.currentPage.name,
   pageCount:   figma.root.children.length,
@@ -2902,8 +2902,37 @@ handlers.screenshot = async function(params) {
     return Promise.reject(new Error("[v1.9.1-export] " + exportErr.message + " type=" + node.type + " id=" + node.id));
   }
 
+  var annotations = [];
+  if (params && (params.withAnnotations || params.annotated) && "children" in node && Array.isArray(node.children)) {
+    var annCount = 0;
+    for (var ci = 0; ci < node.children.length; ci++) {
+      var child = node.children[ci];
+      if (child.visible === false) continue;
+      annCount++;
+      annotations.push({
+        index: annCount,
+        id: child.id,
+        name: child.name,
+        type: child.type,
+        x: Math.round(child.x),
+        y: Math.round(child.y),
+        width: Math.round(child.width),
+        height: Math.round(child.height)
+      });
+      if (annCount >= 40) break;
+    }
+  }
+
   try {
-    return { dataUrl: "data:image/png;base64," + uint8ArrayToBase64(bytes), nodeId: node.id, width: node.width, height: node.height };
+    var resObj = {
+      dataUrl: "data:image/png;base64," + uint8ArrayToBase64(bytes),
+      nodeId: node.id,
+      nodeName: node.name,
+      width: node.width,
+      height: node.height
+    };
+    if (annotations.length) resObj.annotations = annotations;
+    return resObj;
   } catch(encodeErr) {
     return Promise.reject(new Error("[v1.9.1-encode] " + encodeErr.message));
   }
@@ -3061,9 +3090,13 @@ handlers.index_scan = async function() {
   var variables = results[2];
   var components = results[3];
 
+  var resolvedSid = figma.fileKey || (function() {
+    try { return figma.root.getPluginData("mcp_session_id") || "_default"; } catch(e) { return "_default"; }
+  })();
+
   return {
     fileName: figma.root ? figma.root.name : "unknown",
-    sessionId: figma.root ? figma.root.id : "_default",
+    sessionId: resolvedSid,
     pageNodes: pageNodes,
     styles: styles,
     variables: variables,
@@ -3884,6 +3917,131 @@ handlers.get_variables = async function() {
   return { collections: collections };
 };
 
+// ─── EXPORT ASSETS (Batch Icon & Image Extractor) ────────────────────────────
+handlers.export_assets = async function(params) {
+  var id = params ? (params.id || params.nodeId) : null;
+  var targetNode = null;
+  if (id) targetNode = await findNodeByIdAsync(id);
+  if (!targetNode) {
+    var sel = figma.currentPage.selection;
+    targetNode = sel && sel.length > 0 ? sel[0] : figma.currentPage;
+  }
+  if (!targetNode) throw new Error("No node found to export assets from");
+
+  var icons = [];
+  var images = [];
+  var seenNames = {};
+
+  function sanitizeAssetName(rawName, fallback) {
+    var name = (rawName || fallback)
+      .toLowerCase()
+      .replace(/^icon[s\/_\-\s]+/, '')
+      .replace(/^ic[_\-\s]+/, '')
+      .replace(/[\/\s_\.]+/g, '-')
+      .replace(/[^a-z0-9\-]/g, '')
+      .replace(/^-+|-+$/g, '');
+    if (!name) name = fallback;
+    if (seenNames[name]) {
+      seenNames[name]++;
+      return name + "-" + seenNames[name];
+    }
+    seenNames[name] = 1;
+    return name;
+  }
+
+  function isVectorIcon(nd) {
+    if (!nd || nd.visible === false) return false;
+    var t = nd.type;
+    if (t === "VECTOR" || t === "BOOLEAN_OPERATION" || t === "STAR" || t === "POLYGON") return true;
+    if ((t === "FRAME" || t === "COMPONENT" || t === "INSTANCE" || t === "GROUP") && nd.width <= 96 && nd.height <= 96) {
+      var n = nd.name.toLowerCase();
+      if (n.indexOf("icon") >= 0 || n.indexOf("ic_") >= 0 || n.indexOf("ic-") >= 0) return true;
+      if (nd.children && nd.children.length > 0 && nd.children.length <= 8) {
+        var allVectors = nd.children.every(function(c) {
+          return c.type === "VECTOR" || c.type === "BOOLEAN_OPERATION" || c.type === "LINE" || c.type === "ELLIPSE" || c.type === "RECTANGLE";
+        });
+        if (allVectors) return true;
+      }
+    }
+    return false;
+  }
+
+  function hasImageFill(nd) {
+    if (!nd || !nd.fills || !Array.isArray(nd.fills)) return false;
+    return nd.fills.some(function(f) { return f && f.type === "IMAGE" && f.visible !== false; });
+  }
+
+  var nodesToInspect = [];
+  function collectAssetNodes(nd, depth) {
+    if (!nd || nd.visible === false || depth > 20) return;
+    if (isVectorIcon(nd)) {
+      nodesToInspect.push({ node: nd, kind: "icon" });
+      return;
+    }
+    if (hasImageFill(nd)) {
+      nodesToInspect.push({ node: nd, kind: "image" });
+    }
+    if (nd.children && Array.isArray(nd.children)) {
+      for (var ci = 0; ci < nd.children.length; ci++) {
+        collectAssetNodes(nd.children[ci], depth + 1);
+      }
+    }
+  }
+
+  if (targetNode === figma.currentPage) {
+    for (var pi = 0; pi < targetNode.children.length; pi++) {
+      collectAssetNodes(targetNode.children[pi], 0);
+    }
+  } else {
+    collectAssetNodes(targetNode, 0);
+  }
+
+  var exportLimit = Math.min(nodesToInspect.length, 60);
+  for (var i = 0; i < exportLimit; i++) {
+    var item = nodesToInspect[i];
+    var nd = item.node;
+    var baseName = sanitizeAssetName(nd.name, "asset-" + (i + 1));
+
+    if (item.kind === "icon") {
+      try {
+        var svgBytes = await nd.exportAsync({ format: "SVG" });
+        var svgStr = String.fromCharCode.apply(null, Array.from(svgBytes));
+        icons.push({
+          id: nd.id,
+          name: baseName,
+          fileName: baseName + ".svg",
+          width: Math.round(nd.width),
+          height: Math.round(nd.height),
+          svg: svgStr
+        });
+      } catch (e) {}
+    } else if (item.kind === "image") {
+      try {
+        var pngBytes = await nd.exportAsync({ format: "PNG", constraint: { type: "SCALE", value: 2 } });
+        var b64 = uint8ArrayToBase64(pngBytes);
+        images.push({
+          id: nd.id,
+          name: baseName,
+          fileName: baseName + ".png",
+          width: Math.round(nd.width),
+          height: Math.round(nd.height),
+          dataUrl: "data:image/png;base64," + b64
+        });
+      } catch (e) {}
+    }
+  }
+
+  return {
+    success: true,
+    sourceNodeId: targetNode.id,
+    sourceNodeName: targetNode.name,
+    totalIcons: icons.length,
+    totalImages: images.length,
+    icons: icons,
+    images: images
+  };
+};
+
 
 // ── plugin-src/handlers-tokens.js ──
 // ─── DESIGN TOKEN OPERATIONS (v1.7.0) ───────────────────────────────────────
@@ -5148,12 +5306,39 @@ figma.clientStorage.getAsync("mcp_window_size").then(function(saved) {
   }
 }).catch(function() {});
 
+// ─── UNIQUE SESSION IDENTIFIER (Multi-tab Support) ───────────────────────────
+// In Figma, figma.root.id is always "0:0" across all files. To support running
+// multiple plugins concurrently across multiple tabs/files, generate and persist
+// a unique document session ID in document pluginData.
+function getOrCreateSessionId() {
+  if (figma.fileKey) {
+    return figma.fileKey;
+  }
+  try {
+    var stored = figma.root.getPluginData("mcp_session_id");
+    if (stored && stored.length > 0) {
+      return stored;
+    }
+  } catch(e) {}
+
+  var rand = Math.random().toString(36).substring(2, 10);
+  var ts = Date.now().toString(36);
+  var newId = "doc_" + rand + "_" + ts;
+  try {
+    figma.root.setPluginData("mcp_session_id", newId);
+  } catch(e) {}
+  return newId;
+}
+
+var currentSessionId = getOrCreateSessionId();
+var currentFileName = figma.root ? figma.root.name : "Untitled";
+
 // Broadcast active file / session metadata on startup
 try {
   figma.ui.postMessage({
     type: "session-info",
-    sessionId: figma.root.id,
-    fileName: figma.root.name
+    sessionId: currentSessionId,
+    fileName: currentFileName
   });
 } catch (e) {}
 
@@ -5162,13 +5347,26 @@ figma.on("selectionchange", function() {
   try {
     var sel = figma.currentPage.selection;
     var summary = [];
+    var fullNode = null;
     for (var i = 0; i < Math.min(sel.length, 5); i++) {
-      summary.push({ id: sel[i].id, name: sel[i].name, type: sel[i].type });
+      var n = sel[i];
+      summary.push({
+        id: n.id,
+        name: n.name,
+        type: n.type,
+        width: typeof n.width === "number" ? Math.round(n.width) : undefined,
+        height: typeof n.height === "number" ? Math.round(n.height) : undefined
+      });
+    }
+    if (sel.length === 1 && typeof nodeToInfo === "function") {
+      try { fullNode = nodeToInfo(sel[0]); } catch(e0) {}
     }
     figma.ui.postMessage({
       type: "selection-change",
       count: sel.length,
-      selection: summary
+      pageName: figma.currentPage ? figma.currentPage.name : undefined,
+      selection: summary,
+      fullNode: fullNode
     });
   } catch (e) {}
 });
@@ -5190,6 +5388,28 @@ function onDocChange(event) {
       var ids = Array.from(pendingChangedNodeIds);
       pendingChangedNodeIds.clear();
 
+      if (ids.length === 1) {
+        try {
+          var singleNode = await findNodeByIdAsync(ids[0]);
+          if (singleNode) {
+            figma.ui.postMessage({
+              type: "delta-diff",
+              id: singleNode.id,
+              diff: {
+                name: singleNode.name,
+                characters: "characters" in singleNode ? singleNode.characters : undefined,
+                visible: singleNode.visible,
+                width: singleNode.width,
+                height: singleNode.height,
+                x: singleNode.x,
+                y: singleNode.y
+              }
+            });
+            return;
+          }
+        } catch(e1) {}
+      }
+
       if (ids.length > 0 && ids.length <= 15) {
         // Incremental micro-diff update for fast real-time editing
         var diffNodes = [];
@@ -5209,7 +5429,7 @@ function onDocChange(event) {
 
       // Fallback for large batch changes: mark dirty or trigger background sync
       figma.ui.postMessage({ type: "document-change" });
-    }, 800);
+    }, 500);
   } catch (e) {}
 }
 
@@ -5235,8 +5455,8 @@ setTimeout(async function() {
       figma.ui.postMessage({
         type: "index-update",
         data: scanResult,
-        fileName: figma.root ? figma.root.name : "unknown",
-        sessionId: figma.root ? figma.root.id : "_default",
+        fileName: currentFileName,
+        sessionId: currentSessionId,
         startMs: startMs
       });
     }
@@ -5288,6 +5508,43 @@ figma.ui.onmessage = async (request) => {
     return;
   }
 
+  // Zoom to selection when clicked on selection bar
+  if (request.type === "zoom-to-selection") {
+    try {
+      if (figma.currentPage.selection.length > 0) {
+        figma.viewport.scrollAndZoomIntoView(figma.currentPage.selection);
+        figma.notify("Focused on selection", { timeout: 1000 });
+      }
+    } catch(e) {}
+    return;
+  }
+
+  // Export selection image as PNG for UI clipboard/download
+  if (request.type === "export-selection-image") {
+    try {
+      var sel = figma.currentPage.selection;
+      if (!sel || sel.length === 0) {
+        figma.notify("Please select a layer to capture", { timeout: 1500 });
+        return;
+      }
+      var targetNode = sel[0];
+      var scale = request.scale || 2;
+      var bytes = await targetNode.exportAsync({
+        format: "PNG",
+        constraint: { type: "SCALE", value: scale }
+      });
+      figma.ui.postMessage({
+        type: "selection-image-exported",
+        nodeId: targetNode.id,
+        nodeName: targetNode.name,
+        bytes: Array.from(bytes)
+      });
+    } catch (err) {
+      figma.notify("Export failed: " + (err && err.message ? err.message : String(err)), { error: true });
+    }
+    return;
+  }
+
   // Handle manual reindex request from UI
   if (request.type === "manual-reindex") {
     try {
@@ -5297,8 +5554,8 @@ figma.ui.onmessage = async (request) => {
         figma.ui.postMessage({
           type: "index-update",
           data: scanResult,
-          fileName: figma.root ? figma.root.name : "unknown",
-          sessionId: figma.root ? figma.root.id : "_default",
+          fileName: currentFileName,
+          sessionId: currentSessionId,
           startMs: startMs
         });
       }