@mp3wizard/figma-console-mcp 1.17.3 → 1.19.2

package/README.md

@@ -11,7 +11,7 @@
 
 > **🔒 Security Reviewed Fork:** This fork (`@mp3wizard/figma-console-mcp`) has passed a full security review following OWASP Top 10 and CWE standards, including automated scanning (Semgrep, Trivy, TruffleHog) and manual vulnerability analysis. Review reports are available in the [`Security review report/`](Security%20review%20report/) folder.
 
-> **🆕 FigJam + Slides — AI Across All Figma Products:** 24 new tools bring AI to FigJam boards and Figma Slides. Create stickies, flowcharts, and tables on whiteboards. Manage entire presentations — slides, transitions, content, and reordering. [FigJam Guide →](docs/figjam.md) | [Slides Guide →](docs/slides.md)
+> **🆕 High-Fidelity Design-to-Code:** Deep component trees (depth 4), resolved design tokens, interaction state machines with CSS mappings, and codebase-aware component scanning. AI gets everything a senior engineer needs — tokens, sizing, states, annotations, and a cross-reference of what already exists in your codebase. [See what's new →](docs/figma-mcp-vs-figma-console-mcp.md)
 
 ## What is this?
 
@@ -54,9 +54,9 @@ Figma Console MCP connects AI assistants (like Claude) to Figma, enabling:
 | Real-time monitoring (console, selection) | ✅ | ❌ | ❌ |
 | Desktop Bridge plugin | ✅ | ✅ | ❌ |
 | Requires Node.js | Yes | **No** | No |
-| **Total tools available** | **84+** | **43** | **22** |
+| **Total tools available** | **89+** | **43** | **22** |
 
-> **Bottom line:** Remote SSE is **read-only** with ~38% of the tools. **Cloud Mode** unlocks write access from web AI clients without Node.js. NPX/Local Git gives the full 84+ tools with real-time monitoring.
+> **Bottom line:** Remote SSE is **read-only** with ~38% of the tools. **Cloud Mode** unlocks write access from web AI clients without Node.js. NPX/Local Git gives the full 89+ tools with real-time monitoring.
 
 ---
 
@@ -64,7 +64,7 @@ Figma Console MCP connects AI assistants (like Claude) to Figma, enabling:
 
 **Best for:** Designers who want full AI-assisted design capabilities.
 
-**What you get:** All 84+ tools including design creation, variable management, and component instantiation.
+**What you get:** All 89+ tools including design creation, variable management, and component instantiation.
 
 #### Prerequisites
 
@@ -77,7 +77,8 @@ Figma Console MCP connects AI assistants (like Claude) to Figma, enabling:
 1. Go to [Manage personal access tokens](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens) in Figma Help
 2. Follow the steps to **create a new personal access token**
 3. Enter description: `Figma Console MCP`
-4. **Copy the token** — you won't see it again! (starts with `figd_`)
+4. Set scopes: **File content** (Read), **Variables** (Read), **Comments** (Read and write)
+5. **Copy the token** — you won't see it again! (starts with `figd_`)
 
 #### Step 2: Configure Your MCP Client
 
@@ -158,7 +159,7 @@ Create a simple frame with a blue background
 
 **Best for:** Developers who want to modify source code or contribute to the project.
 
-**What you get:** Same 84+ tools as NPX, plus full source code access.
+**What you get:** Same 89+ tools as NPX, plus full source code access.
 
 #### Quick Setup
 
@@ -247,7 +248,7 @@ Ready for design creation? Follow the [NPX Setup](#-npx-setup-recommended) guide
 
 **Best for:** Using Claude.ai, v0, Replit, or Lovable to create and modify Figma designs — no Node.js required.
 
-**What you get:** 76 tools including full write access — design creation, variable management, component instantiation, and all REST API tools. Only real-time monitoring (console logs, selection tracking, document changes) requires Local Mode.
+**What you get:** 79 tools including full write access — design creation, variable management, component instantiation, and all REST API tools. Only real-time monitoring (console logs, selection tracking, document changes) requires Local Mode.
 
 #### Prerequisites
 
@@ -304,7 +305,7 @@ AI Client → Cloud MCP Server → Durable Object Relay → Desktop Bridge Plugi
 | Feature | NPX (Recommended) | Cloud Mode | Local Git | Remote SSE |
 |---------|-------------------|------------|-----------|------------|
 | **Setup time** | ~10 minutes | ~5 minutes | ~15 minutes | ~2 minutes |
-| **Total tools** | **84+** | **43** | **84+** | **22** (read-only) |
+| **Total tools** | **89+** | **43** | **89+** | **22** (read-only) |
 | **Design creation** | ✅ | ✅ | ✅ | ❌ |
 | **Variable management** | ✅ | ✅ | ✅ | ❌ |
 | **Component instantiation** | ✅ | ✅ | ✅ | ❌ |
@@ -319,7 +320,7 @@ AI Client → Cloud MCP Server → Durable Object Relay → Desktop Bridge Plugi
 | **Automatic updates** | ✅ (`@latest`) | ✅ | Manual (`git pull`) | ✅ |
 | **Source code access** | ❌ | ❌ | ✅ | ❌ |
 
-> **Key insight:** Remote SSE is read-only. Cloud Mode adds write access for web AI clients without Node.js. NPX/Local Git give the full 84+ tools.
+> **Key insight:** Remote SSE is read-only. Cloud Mode adds write access for web AI clients without Node.js. NPX/Local Git give the full 89+ tools.
 
 **📖 [Complete Feature Comparison](docs/mode-comparison.md)**
 
@@ -365,7 +366,7 @@ When you first use design system tools:
 ### Local Mode - Personal Access Token (Manual)
 
 1. Visit https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens
-2. Generate token
+2. Generate token with scopes: **File content** (Read), **Variables** (Read), **Comments** (Read and write)
 3. Add to MCP config as `FIGMA_ACCESS_TOKEN` environment variable
 
 ---
@@ -651,7 +652,7 @@ The **Figma Desktop Bridge** plugin is the recommended way to connect Figma to t
 - The MCP server communicates via **WebSocket** through the Desktop Bridge plugin
 - The server tries port 9223 first, then automatically falls back through ports 9224–9232 if needed
 - The plugin scans all ports in the range and connects to every active server it finds
-- All 84+ tools work through the WebSocket transport
+- All 89+ tools work through the WebSocket transport
 
 **Multiple files:** The WebSocket server supports multiple simultaneous plugin connections — one per open Figma file. Each connection is tracked by file key with independent state (selection, document changes, console logs).
 
@@ -788,7 +789,7 @@ The architecture supports adding new apps with minimal boilerplate — each app
 
 ## 🛤️ Roadmap
 
-**Current Status:** v1.17.0 (Stable) - Production-ready with FigJam + Slides support, Cloud Write Relay, Design System Kit, WebSocket-only connectivity, smart multi-file tracking, 84+ tools, Comments API, and MCP Apps
+**Current Status:** v1.17.0 (Stable) - Production-ready with FigJam + Slides support, Cloud Write Relay, Design System Kit, WebSocket-only connectivity, smart multi-file tracking, 89+ tools, Comments API, and MCP Apps
 
 **Recent Releases:**
 - [x] **v1.17.0** - Figma Slides Support: 15 new tools for managing presentations — slides, transitions, content, reordering, and navigation. Inspired by Toni Haidamous (PR #11).

package/dist/cloudflare/core/annotation-tools.js

@@ -0,0 +1,230 @@
+/**
+ * Figma Annotations MCP Tools
+ * Tools for reading, writing, and managing design annotations on Figma nodes.
+ * Annotations are a Plugin API feature — requires Desktop Bridge plugin connection.
+ *
+ * Annotations are distinct from comments: they are node-level design specs that
+ * can pin specific properties (fills, width, typography, etc.) and support
+ * markdown-formatted labels. Designers use them to communicate animation timings,
+ * accessibility requirements, interaction specs, and other implementation details
+ * that don't fit in the description field.
+ */
+import { z } from "zod";
+import { createChildLogger } from "./logger.js";
+const logger = createChildLogger({ component: "annotation-tools" });
+// Valid AnnotationPropertyType values from the Figma Plugin API
+// Sourced from @figma/plugin-typings — keep in sync with AnnotationPropertyType union
+// Reference: https://developers.figma.com/docs/plugins/api/AnnotationProperty
+const ANNOTATION_PROPERTY_TYPES = [
+    "width",
+    "height",
+    "maxWidth",
+    "minWidth",
+    "maxHeight",
+    "minHeight",
+    "fills",
+    "strokes",
+    "effects",
+    "strokeWeight",
+    "cornerRadius",
+    "textStyleId",
+    "textAlignHorizontal",
+    "fontFamily",
+    "fontStyle",
+    "fontSize",
+    "fontWeight",
+    "lineHeight",
+    "letterSpacing",
+    "itemSpacing",
+    "padding",
+    "layoutMode",
+    "alignItems",
+    "opacity",
+    "mainComponent",
+    "gridRowGap",
+    "gridColumnGap",
+    "gridRowCount",
+    "gridColumnCount",
+    "gridRowAnchorIndex",
+    "gridColumnAnchorIndex",
+    "gridRowSpan",
+    "gridColumnSpan",
+];
+// Zod schema for annotation property
+const annotationPropertySchema = z.object({
+    type: z
+        .enum(ANNOTATION_PROPERTY_TYPES)
+        .describe("Design property to pin (e.g., 'fills', 'width', 'fontSize')"),
+});
+// Zod schema for a single annotation
+const annotationSchema = z.object({
+    label: z
+        .string()
+        .optional()
+        .describe("Plain text annotation label"),
+    labelMarkdown: z
+        .string()
+        .optional()
+        .describe("Rich text annotation label with markdown formatting. Supports bold, italic, links, lists, code, and headers."),
+    properties: z
+        .array(annotationPropertySchema)
+        .optional()
+        .describe("Design properties to pin to this annotation (e.g., fills, width, fontSize)"),
+    categoryId: z
+        .string()
+        .optional()
+        .describe("Annotation category ID. Use figma_get_annotation_categories to list available categories."),
+});
+// ============================================================================
+// Tool Registration
+// ============================================================================
+export function registerAnnotationTools(server, getDesktopConnector) {
+    // -----------------------------------------------------------------------
+    // Tool: figma_get_annotations
+    // -----------------------------------------------------------------------
+    server.tool("figma_get_annotations", "Read annotations from a Figma node. Annotations are designer-authored specs attached to nodes — they can include notes (plain text or markdown), pinned design properties (fills, width, fontSize, etc.), and category labels. Use this to discover animation timings, interaction specs, accessibility requirements, and other implementation details that designers annotate directly on the design. Set include_children=true to get annotations from child nodes too (useful for full component documentation). Requires Desktop Bridge plugin.", {
+        nodeId: z
+            .string()
+            .describe("Node ID to read annotations from (e.g., '695:313')"),
+        include_children: z.preprocess((v) => (typeof v === "string" ? v === "true" : v), z.boolean().optional().default(false)).describe("Also read annotations from child nodes. Useful for getting all annotations within a component tree."),
+        depth: z.preprocess((v) => (typeof v === "string" ? Number(v) : v), z.number().optional().default(1)).describe("How many levels deep to traverse when include_children is true (default: 1, max recommended: 5)"),
+    }, async ({ nodeId, include_children = false, depth = 1 }) => {
+        try {
+            logger.info({ nodeId, include_children, depth }, "Getting annotations");
+            const connector = await getDesktopConnector();
+            const result = await connector.getAnnotations(nodeId, include_children, Math.min(depth, 10));
+            if (!result || (result.success === false)) {
+                throw new Error(result?.error || "Failed to get annotations");
+            }
+            // The result may come back as { success, data } (WebSocket) or directly as data
+            const data = result.data || result;
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify(data),
+                    },
+                ],
+            };
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            logger.error({ error }, "Failed to get annotations");
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify({
+                            error: "get_annotations_failed",
+                            message: `Cannot get annotations. ${message}`,
+                            hint: "Annotations require the Desktop Bridge plugin to be running in Figma.",
+                        }),
+                    },
+                ],
+                isError: true,
+            };
+        }
+    });
+    // -----------------------------------------------------------------------
+    // Tool: figma_set_annotations
+    // -----------------------------------------------------------------------
+    server.tool("figma_set_annotations", "Write or clear annotations on a Figma node. Annotations communicate design specs to developers — use them to document animation timings, easing curves, interaction behaviors, accessibility requirements, and implementation notes. Supports plain text labels, rich markdown labels, pinned design properties, and annotation categories. Pass an empty array to clear all annotations. Use mode='append' to add to existing annotations, or mode='replace' (default) to overwrite. Requires Desktop Bridge plugin. This operation is undoable in Figma (Cmd+Z).", {
+        nodeId: z
+            .string()
+            .describe("Node ID to write annotations to (e.g., '695:313')"),
+        annotations: z.preprocess((v) => {
+            if (typeof v === "string") {
+                try {
+                    return JSON.parse(v);
+                }
+                catch {
+                    return v;
+                }
+            }
+            return v;
+        }, z.array(annotationSchema)).describe("Array of annotations to set. Each annotation can have a label (plain or markdown), pinned properties, and a category. Pass an empty array [] to clear all annotations."),
+        mode: z
+            .enum(["replace", "append"])
+            .optional()
+            .default("replace")
+            .describe("'replace' (default) overwrites all existing annotations. 'append' adds new annotations while keeping existing ones."),
+    }, async ({ nodeId, annotations, mode = "replace" }) => {
+        try {
+            logger.info({ nodeId, count: annotations.length, mode }, "Setting annotations");
+            const connector = await getDesktopConnector();
+            const result = await connector.setAnnotations(nodeId, annotations, mode);
+            if (!result || (result.success === false)) {
+                throw new Error(result?.error || "Failed to set annotations");
+            }
+            const data = result.data || result;
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify({
+                            success: true,
+                            ...data,
+                            note: "Annotations set successfully. This operation is undoable in Figma (Cmd+Z).",
+                        }),
+                    },
+                ],
+            };
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            logger.error({ error }, "Failed to set annotations");
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify({
+                            error: "set_annotations_failed",
+                            message: `Cannot set annotations. ${message}`,
+                            hint: "Annotations require the Desktop Bridge plugin to be running in Figma.",
+                        }),
+                    },
+                ],
+                isError: true,
+            };
+        }
+    });
+    // -----------------------------------------------------------------------
+    // Tool: figma_get_annotation_categories
+    // -----------------------------------------------------------------------
+    server.tool("figma_get_annotation_categories", "List available annotation categories in the current Figma file. Categories group annotations by purpose (e.g., interactions, accessibility, development notes). Use the returned category IDs when creating annotations with figma_set_annotations. Requires Desktop Bridge plugin.", {}, async () => {
+        try {
+            logger.info("Getting annotation categories");
+            const connector = await getDesktopConnector();
+            const result = await connector.getAnnotationCategories();
+            if (!result || (result.success === false)) {
+                throw new Error(result?.error || "Failed to get annotation categories");
+            }
+            const data = result.data || result;
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify(data),
+                    },
+                ],
+            };
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            logger.error({ error }, "Failed to get annotation categories");
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify({
+                            error: "get_annotation_categories_failed",
+                            message: `Cannot get annotation categories. ${message}`,
+                            hint: "Annotation categories require the Desktop Bridge plugin to be running in Figma.",
+                        }),
+                    },
+                ],
+                isError: true,
+            };
+        }
+    });
+}

package/dist/cloudflare/core/cloud-websocket-connector.js

@@ -130,6 +130,24 @@ export class CloudWebSocketConnector {
     async setNodeDescription(nodeId, description, descriptionMarkdown) {
         return this.sendCommand('SET_NODE_DESCRIPTION', { nodeId, description, descriptionMarkdown });
     }
+    // ============================================================================
+    // Annotation operations
+    // ============================================================================
+    async getAnnotations(nodeId, includeChildren, depth) {
+        return this.sendCommand('GET_ANNOTATIONS', { nodeId, includeChildren, depth }, 10000);
+    }
+    async setAnnotations(nodeId, annotations, mode) {
+        return this.sendCommand('SET_ANNOTATIONS', { nodeId, annotations, mode: mode || 'replace' });
+    }
+    async getAnnotationCategories() {
+        return this.sendCommand('GET_ANNOTATION_CATEGORIES', {}, 5000);
+    }
+    async deepGetComponent(nodeId, depth) {
+        return this.sendCommand('DEEP_GET_COMPONENT', { nodeId, depth: depth || 10 }, 30000);
+    }
+    async analyzeComponentSet(nodeId) {
+        return this.sendCommand('ANALYZE_COMPONENT_SET', { nodeId }, 30000);
+    }
     async addComponentProperty(nodeId, propertyName, type, defaultValue, options) {
         const params = { nodeId, propertyName, propertyType: type, defaultValue };
         if (options?.preferredValues)
@@ -244,6 +262,81 @@ export class CloudWebSocketConnector {
         return this.sendCommand('LINT_DESIGN', params, 120000);
     }
     // ============================================================================
+    // FigJam operations
+    // ============================================================================
+    async createSticky(params) {
+        return this.sendCommand('CREATE_STICKY', params);
+    }
+    async createStickies(params) {
+        return this.sendCommand('CREATE_STICKIES', params, 30000);
+    }
+    async createConnector(params) {
+        return this.sendCommand('CREATE_CONNECTOR', params);
+    }
+    async createShapeWithText(params) {
+        return this.sendCommand('CREATE_SHAPE_WITH_TEXT', params);
+    }
+    async createTable(params) {
+        return this.sendCommand('CREATE_TABLE', params, 30000);
+    }
+    async createCodeBlock(params) {
+        return this.sendCommand('CREATE_CODE_BLOCK', params);
+    }
+    async getBoardContents(params) {
+        return this.sendCommand('GET_BOARD_CONTENTS', params, 30000);
+    }
+    async getConnections() {
+        return this.sendCommand('GET_CONNECTIONS', {}, 15000);
+    }
+    // ============================================================================
+    // Slides operations
+    // ============================================================================
+    async listSlides() {
+        return this.sendCommand('LIST_SLIDES', {}, 10000);
+    }
+    async getSlideContent(params) {
+        return this.sendCommand('GET_SLIDE_CONTENT', params, 10000);
+    }
+    async createSlide(params) {
+        return this.sendCommand('CREATE_SLIDE', params, 10000);
+    }
+    async deleteSlide(params) {
+        return this.sendCommand('DELETE_SLIDE', params, 5000);
+    }
+    async duplicateSlide(params) {
+        return this.sendCommand('DUPLICATE_SLIDE', params, 5000);
+    }
+    async getSlideGrid() {
+        return this.sendCommand('GET_SLIDE_GRID', {}, 10000);
+    }
+    async reorderSlides(params) {
+        return this.sendCommand('REORDER_SLIDES', params, 15000);
+    }
+    async setSlideTransition(params) {
+        return this.sendCommand('SET_SLIDE_TRANSITION', params, 5000);
+    }
+    async getSlideTransition(params) {
+        return this.sendCommand('GET_SLIDE_TRANSITION', params, 5000);
+    }
+    async setSlidesViewMode(params) {
+        return this.sendCommand('SET_SLIDES_VIEW_MODE', params, 5000);
+    }
+    async getFocusedSlide() {
+        return this.sendCommand('GET_FOCUSED_SLIDE', {}, 5000);
+    }
+    async focusSlide(params) {
+        return this.sendCommand('FOCUS_SLIDE', params, 5000);
+    }
+    async skipSlide(params) {
+        return this.sendCommand('SKIP_SLIDE', params, 5000);
+    }
+    async addTextToSlide(params) {
+        return this.sendCommand('ADD_TEXT_TO_SLIDE', params, 10000);
+    }
+    async addShapeToSlide(params) {
+        return this.sendCommand('ADD_SHAPE_TO_SLIDE', params, 5000);
+    }
+    // ============================================================================
     // Cache management (no-op for cloud relay)
     // ============================================================================
     clearFrameCache() {

package/dist/cloudflare/core/deep-component-tools.js

@@ -0,0 +1,128 @@
+/**
+ * Deep Component Extraction MCP Tool
+ *
+ * Provides unlimited-depth component tree extraction via the Desktop Bridge
+ * Plugin API. Returns full visual properties, resolved design token names,
+ * instance references (mainComponent), prototype reactions, and annotations
+ * at every level of the tree.
+ *
+ * This complements figma_get_component_for_development (REST API, depth 4)
+ * with deeper, richer data when the Desktop Bridge plugin is connected.
+ */
+import { z } from "zod";
+import { createChildLogger } from "./logger.js";
+const logger = createChildLogger({ component: "deep-component-tools" });
+export function registerDeepComponentTools(server, getDesktopConnector) {
+    server.tool("figma_get_component_for_development_deep", "Get a deeply nested component tree with full visual properties, resolved design token names, instance references, prototype interactions, and annotations at every level. Uses the Desktop Bridge Plugin API for unlimited depth traversal — essential for complex components like data tables, nested menus, date pickers, and compound form fields where the standard depth-4 REST API tool misses deeper structure. Returns boundVariables resolved to actual token names (not just IDs), mainComponent references for INSTANCE nodes, and reactions for interaction states. Requires Desktop Bridge plugin. For simpler components (depth ≤ 4), use figma_get_component_for_development instead.", {
+        nodeId: z
+            .string()
+            .describe("Component node ID to extract (e.g., '695:313')"),
+        depth: z.preprocess((v) => (typeof v === "string" ? Number(v) : v), z.number().optional().default(10)).describe("Maximum tree depth to traverse (default: 10, max: 20). Use higher values for deeply nested components."),
+    }, async ({ nodeId, depth = 10 }) => {
+        try {
+            const clampedDepth = Math.min(Math.max(depth, 1), 20);
+            logger.info({ nodeId, depth: clampedDepth }, "Deep component extraction");
+            const connector = await getDesktopConnector();
+            const result = await connector.deepGetComponent(nodeId, clampedDepth);
+            if (!result || (result.success === false)) {
+                throw new Error(result?.error || "Failed to extract component");
+            }
+            const data = result.data || result;
+            // Measure response size and warn if large
+            const responseJson = JSON.stringify(data);
+            const sizeKB = Math.round(responseJson.length / 1024);
+            const response = {
+                nodeId,
+                component: data,
+                metadata: {
+                    purpose: "deep_component_development",
+                    treeDepth: clampedDepth,
+                    responseSizeKB: sizeKB,
+                    variablesResolved: data._variableMapSize || 0,
+                    note: [
+                        `Deep component tree extracted via Plugin API (depth ${clampedDepth}).`,
+                        "boundVariables are resolved to token names, collections, and codeSyntax.",
+                        "INSTANCE nodes include mainComponent references (key, name, component set).",
+                        "Use this data to generate production-quality, token-aware, accessible code.",
+                        sizeKB > 200 ? "Response is large — consider targeting a specific child node for deeper analysis." : null,
+                    ].filter(Boolean).join(" "),
+                },
+            };
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify(response),
+                    },
+                ],
+            };
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            logger.error({ error }, "Deep component extraction failed");
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify({
+                            error: "deep_component_failed",
+                            message: `Cannot extract deep component. ${message}`,
+                            hint: "This tool requires the Desktop Bridge plugin to be running in Figma. For REST API fallback (depth 4), use figma_get_component_for_development.",
+                        }),
+                    },
+                ],
+                isError: true,
+            };
+        }
+    });
+    // -----------------------------------------------------------------------
+    // Tool: figma_analyze_component_set
+    // -----------------------------------------------------------------------
+    server.tool("figma_analyze_component_set", "Analyze a Figma COMPONENT_SET to extract variant state machine and cross-variant diffs for code generation. Returns: (1) variant axes (size, state) with all values, (2) CSS pseudo-class mappings for interaction states (hover→:hover, focus→:focus-visible, disabled→:disabled, error→[aria-invalid]), (3) visual diff from default state per variant (only changed properties — fill token, stroke token, stroke weight, text color, opacity, effects, visibility), (4) component property definitions mapped to code props (BOOLEAN→boolean, TEXT→string, INSTANCE_SWAP→slot/ReactNode). Use this on the parent COMPONENT_SET node, not individual variants. Requires Desktop Bridge plugin.", {
+        nodeId: z
+            .string()
+            .describe("COMPONENT_SET node ID (the parent of all variants, e.g., '214:274')"),
+    }, async ({ nodeId }) => {
+        try {
+            logger.info({ nodeId }, "Analyzing component set");
+            const connector = await getDesktopConnector();
+            const result = await connector.analyzeComponentSet(nodeId);
+            if (!result || (result.success === false)) {
+                throw new Error(result?.error || "Failed to analyze component set");
+            }
+            const data = result.data || result;
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify({
+                            nodeId,
+                            analysis: data,
+                            metadata: {
+                                purpose: "variant_state_machine",
+                                note: "Use cssMapping to implement interaction states as CSS pseudo-classes/attributes. diffFromDefault shows only what changes per variant — apply as style overrides. componentProps maps to your component's TypeScript interface.",
+                            },
+                        }),
+                    },
+                ],
+            };
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            logger.error({ error }, "Component set analysis failed");
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify({
+                            error: "analyze_component_set_failed",
+                            message: `Cannot analyze component set. ${message}`,
+                            hint: "This tool requires the Desktop Bridge plugin and a COMPONENT_SET node ID (not an individual variant). Use figma_search_components to find component sets.",
+                        }),
+                    },
+                ],
+                isError: true,
+            };
+        }
+    });
+}