figma-console-mcp 0.1.0

package/dist/cloudflare/core/figma-desktop-connector.js

@@ -0,0 +1,383 @@
+/**
+ * Figma Desktop Connector
+ *
+ * This service connects directly to Figma Desktop's plugin context
+ * to execute code with access to the full Figma Plugin API,
+ * including variables without Enterprise access.
+ *
+ * Uses Puppeteer's Worker API to directly access plugin workers,
+ * bypassing CDP context enumeration limitations.
+ */
+import { logger } from './logger.js';
+export class FigmaDesktopConnector {
+    constructor(page) {
+        this.page = page;
+    }
+    /**
+     * Initialize connection to Figma Desktop's plugin context
+     * No setup needed - Puppeteer handles worker access automatically
+     */
+    async initialize() {
+        logger.info('Figma Desktop connector initialized (using Puppeteer Worker API)');
+    }
+    /**
+     * Execute code in Figma's plugin context where the figma API is available
+     * Uses Puppeteer's direct worker access instead of CDP context enumeration
+     */
+    async executeInPluginContext(code) {
+        try {
+            // Use Puppeteer's worker API directly - this can access plugin workers
+            // that CDP's Runtime.getExecutionContexts cannot enumerate
+            const workers = this.page.workers();
+            // Log to browser console so MCP can capture it
+            await this.page.evaluate((count, urls) => {
+                console.log(`[DESKTOP_CONNECTOR] Found ${count} workers via Puppeteer API:`, urls);
+            }, workers.length, workers.map(w => w.url()));
+            logger.info({
+                workerCount: workers.length,
+                workerUrls: workers.map(w => w.url())
+            }, 'Found workers via Puppeteer API');
+            // Try each worker to find one with figma API
+            for (const worker of workers) {
+                try {
+                    // Log to browser console
+                    await this.page.evaluate((url) => {
+                        console.log(`[DESKTOP_CONNECTOR] Checking worker: ${url}`);
+                    }, worker.url());
+                    // Check if this worker has the figma API
+                    // Use string evaluation to avoid TypeScript errors about figma global
+                    const hasFigmaApi = await worker.evaluate('typeof figma !== "undefined"');
+                    // Log result to browser console
+                    await this.page.evaluate((url, hasApi) => {
+                        console.log(`[DESKTOP_CONNECTOR] Worker ${url} has figma API: ${hasApi}`);
+                    }, worker.url(), hasFigmaApi);
+                    if (hasFigmaApi) {
+                        logger.info({ workerUrl: worker.url() }, 'Found worker with Figma API');
+                        await this.page.evaluate((url) => {
+                            console.log(`[DESKTOP_CONNECTOR] ✅ SUCCESS! Found worker with Figma API: ${url}`);
+                        }, worker.url());
+                        // Execute the code in this worker context
+                        // Wrap the code in a function to ensure proper evaluation
+                        const wrappedCode = `(${code})`;
+                        const result = await worker.evaluate(wrappedCode);
+                        return result;
+                    }
+                }
+                catch (workerError) {
+                    // This worker doesn't have figma API or evaluation failed, try next
+                    await this.page.evaluate((url, err) => {
+                        console.error(`[DESKTOP_CONNECTOR] ❌ Worker ${url} check failed:`, err);
+                    }, worker.url(), workerError instanceof Error ? workerError.message : String(workerError));
+                    logger.error({ error: workerError, workerUrl: worker.url() }, 'Worker check failed, trying next');
+                    continue;
+                }
+            }
+            // If no worker found with figma API, throw error
+            throw new Error('No plugin worker found with Figma API. Make sure a plugin is running in Figma Desktop.');
+        }
+        catch (error) {
+            logger.error({ error, code: code.substring(0, 200) }, 'Failed to execute in plugin context');
+            throw error;
+        }
+    }
+    /**
+     * Get Figma variables from plugin UI window object
+     * This bypasses Figma's plugin sandbox security restrictions
+     * by accessing data that the plugin posted to its UI iframe
+     */
+    async getVariablesFromPluginUI(fileKey) {
+        try {
+            // Log to browser console
+            await this.page.evaluate((key) => {
+                console.log(`[DESKTOP_CONNECTOR] 🚀 getVariablesFromPluginUI() called, fileKey: ${key}`);
+            }, fileKey);
+            logger.info({ fileKey }, 'Getting variables from plugin UI iframe');
+            // Get all frames (iframes) in the page
+            const frames = this.page.frames();
+            await this.page.evaluate((count) => {
+                console.log(`[DESKTOP_CONNECTOR] Found ${count} frames (iframes)`);
+            }, frames.length);
+            logger.info({ frameCount: frames.length }, 'Found frames in page');
+            // Try to find plugin UI iframe with variables data
+            for (const frame of frames) {
+                try {
+                    const frameUrl = frame.url();
+                    await this.page.evaluate((url) => {
+                        console.log(`[DESKTOP_CONNECTOR] Checking frame: ${url}`);
+                    }, frameUrl);
+                    // Check if this frame has our variables data
+                    const hasData = await frame.evaluate('typeof window.__figmaVariablesData !== "undefined" && window.__figmaVariablesReady === true');
+                    await this.page.evaluate((url, has) => {
+                        console.log(`[DESKTOP_CONNECTOR] Frame ${url} has variables data: ${has}`);
+                    }, frameUrl, hasData);
+                    if (hasData) {
+                        logger.info({ frameUrl }, 'Found frame with variables data');
+                        await this.page.evaluate((url) => {
+                            console.log(`[DESKTOP_CONNECTOR] ✅ SUCCESS! Found plugin UI with variables data: ${url}`);
+                        }, frameUrl);
+                        // Get the data from window object
+                        const result = await frame.evaluate('window.__figmaVariablesData');
+                        logger.info({
+                            variableCount: result.variables?.length,
+                            collectionCount: result.variableCollections?.length
+                        }, 'Successfully retrieved variables from plugin UI');
+                        await this.page.evaluate((varCount, collCount) => {
+                            console.log(`[DESKTOP_CONNECTOR] ✅ Retrieved ${varCount} variables in ${collCount} collections`);
+                        }, result.variables?.length || 0, result.variableCollections?.length || 0);
+                        return result;
+                    }
+                }
+                catch (frameError) {
+                    await this.page.evaluate((url, err) => {
+                        console.log(`[DESKTOP_CONNECTOR] Frame ${url} check failed: ${err}`);
+                    }, frame.url(), frameError instanceof Error ? frameError.message : String(frameError));
+                    logger.debug({ error: frameError, frameUrl: frame.url() }, 'Frame check failed, trying next');
+                    continue;
+                }
+            }
+            // If no frame found with data, throw error
+            throw new Error('No plugin UI found with variables data. Make sure the Variables Exporter (Persistent) plugin is running.');
+        }
+        catch (error) {
+            logger.error({ error }, 'Failed to get variables from plugin UI');
+            await this.page.evaluate((msg) => {
+                console.error('[DESKTOP_CONNECTOR] ❌ getVariablesFromPluginUI failed:', msg);
+            }, error instanceof Error ? error.message : String(error));
+            throw error;
+        }
+    }
+    /**
+     * Get component data by node ID from plugin UI window object
+     * This bypasses the REST API bug where descriptions are missing
+     * by accessing data from the Desktop Bridge plugin via its UI iframe
+     */
+    async getComponentFromPluginUI(nodeId) {
+        try {
+            // Log to browser console
+            await this.page.evaluate((id) => {
+                console.log(`[DESKTOP_CONNECTOR] 🎯 getComponentFromPluginUI() called, nodeId: ${id}`);
+            }, nodeId);
+            logger.info({ nodeId }, 'Getting component from plugin UI iframe');
+            // Get all frames (iframes) in the page
+            const frames = this.page.frames();
+            await this.page.evaluate((count) => {
+                console.log(`[DESKTOP_CONNECTOR] Found ${count} frames (iframes)`);
+            }, frames.length);
+            logger.info({ frameCount: frames.length }, 'Found frames in page');
+            // Try to find plugin UI iframe with requestComponentData function
+            for (const frame of frames) {
+                try {
+                    const frameUrl = frame.url();
+                    await this.page.evaluate((url) => {
+                        console.log(`[DESKTOP_CONNECTOR] Checking frame: ${url}`);
+                    }, frameUrl);
+                    // Check if this frame has our requestComponentData function
+                    const hasFunction = await frame.evaluate('typeof window.requestComponentData === "function"');
+                    await this.page.evaluate((url, has) => {
+                        console.log(`[DESKTOP_CONNECTOR] Frame ${url} has requestComponentData: ${has}`);
+                    }, frameUrl, hasFunction);
+                    if (hasFunction) {
+                        logger.info({ frameUrl }, 'Found frame with requestComponentData function');
+                        await this.page.evaluate((url) => {
+                            console.log(`[DESKTOP_CONNECTOR] ✅ SUCCESS! Found plugin UI with requestComponentData: ${url}`);
+                        }, frameUrl);
+                        // Call the function with the nodeId - it returns a Promise
+                        // Use JSON.stringify to safely pass the nodeId as a string literal
+                        const result = await frame.evaluate(`window.requestComponentData(${JSON.stringify(nodeId)})`);
+                        logger.info({
+                            nodeId,
+                            componentName: result.component?.name,
+                            hasDescription: !!result.component?.description
+                        }, 'Successfully retrieved component from plugin UI');
+                        await this.page.evaluate((name, hasDesc) => {
+                            console.log(`[DESKTOP_CONNECTOR] ✅ Retrieved component "${name}", has description: ${hasDesc}`);
+                        }, result.component?.name, !!result.component?.description);
+                        return result;
+                    }
+                }
+                catch (frameError) {
+                    await this.page.evaluate((url, err) => {
+                        console.log(`[DESKTOP_CONNECTOR] Frame ${url} check failed: ${err}`);
+                    }, frame.url(), frameError instanceof Error ? frameError.message : String(frameError));
+                    logger.debug({ error: frameError, frameUrl: frame.url() }, 'Frame check failed, trying next');
+                    continue;
+                }
+            }
+            // If no frame found with function, throw error
+            throw new Error('No plugin UI found with requestComponentData function. Make sure the Desktop Bridge plugin is running.');
+        }
+        catch (error) {
+            logger.error({ error, nodeId }, 'Failed to get component from plugin UI');
+            await this.page.evaluate((msg) => {
+                console.error('[DESKTOP_CONNECTOR] ❌ getComponentFromPluginUI failed:', msg);
+            }, error instanceof Error ? error.message : String(error));
+            throw error;
+        }
+    }
+    /**
+     * Get Figma variables using the desktop connection
+     * This bypasses the Enterprise requirement!
+     */
+    async getVariables(fileKey) {
+        // Log to browser console
+        await this.page.evaluate((key) => {
+            console.log(`[DESKTOP_CONNECTOR] 🚀 getVariables() called, fileKey: ${key}`);
+        }, fileKey);
+        logger.info({ fileKey }, 'Getting variables via Desktop connection');
+        const code = `
+      (async () => {
+        try {
+          // Check if we're in the right context
+          if (typeof figma === 'undefined') {
+            throw new Error('Figma API not available in this context');
+          }
+
+          // Get variables just like the official MCP does
+          const variables = await figma.variables.getLocalVariablesAsync();
+          const collections = await figma.variables.getLocalVariableCollectionsAsync();
+
+          // Format the response
+          const result = {
+            success: true,
+            timestamp: Date.now(),
+            variables: variables.map(v => ({
+              id: v.id,
+              name: v.name,
+              key: v.key,
+              resolvedType: v.resolvedType,
+              valuesByMode: v.valuesByMode,
+              variableCollectionId: v.variableCollectionId,
+              scopes: v.scopes,
+              description: v.description,
+              hiddenFromPublishing: v.hiddenFromPublishing
+            })),
+            variableCollections: collections.map(c => ({
+              id: c.id,
+              name: c.name,
+              key: c.key,
+              modes: c.modes,
+              defaultModeId: c.defaultModeId,
+              variableIds: c.variableIds
+            }))
+          };
+
+          return result;
+        } catch (error) {
+          return {
+            success: false,
+            error: error.message
+          };
+        }
+      })()
+    `;
+        try {
+            const result = await this.executeInPluginContext(code);
+            if (!result.success) {
+                throw new Error(result.error || 'Failed to get variables');
+            }
+            logger.info({
+                variableCount: result.variables?.length,
+                collectionCount: result.variableCollections?.length
+            }, 'Successfully retrieved variables via Desktop');
+            return result;
+        }
+        catch (error) {
+            logger.error({ error }, 'Failed to get variables via Desktop');
+            throw error;
+        }
+    }
+    /**
+     * Clean up resources (no-op since we use Puppeteer's built-in worker management)
+     */
+    /**
+     * Get component data by node ID using Plugin API
+     * This bypasses the REST API bug where descriptions are missing
+     */
+    async getComponentByNodeId(nodeId) {
+        await this.page.evaluate((id) => {
+            console.log(`[DESKTOP_CONNECTOR] 🎯 getComponentByNodeId() called, nodeId: ${id}`);
+        }, nodeId);
+        logger.info({ nodeId }, 'Getting component via Desktop Plugin API');
+        const code = `
+      (async () => {
+        try {
+          // Check if we're in the right context
+          if (typeof figma === 'undefined') {
+            throw new Error('Figma API not available in this context');
+          }
+
+          // Get the node by ID
+          const node = figma.getNodeById('${nodeId}');
+          
+          if (!node) {
+            throw new Error('Node not found with ID: ${nodeId}');
+          }
+
+          // Check if it's a component-like node
+          if (node.type !== 'COMPONENT' && node.type !== 'COMPONENT_SET' && node.type !== 'INSTANCE') {
+            throw new Error('Node is not a component, component set, or instance. Type: ' + node.type);
+          }
+
+          // Extract component data including description fields
+          const result = {
+            success: true,
+            timestamp: Date.now(),
+            component: {
+              id: node.id,
+              name: node.name,
+              type: node.type,
+              description: node.description || null,
+              descriptionMarkdown: node.descriptionMarkdown || null,
+              // Include other useful properties
+              visible: node.visible,
+              locked: node.locked,
+              // For components with properties
+              componentPropertyDefinitions: node.type === 'COMPONENT' || node.type === 'COMPONENT_SET' 
+                ? node.componentPropertyDefinitions 
+                : undefined,
+              // Get children info (lightweight)
+              children: node.children ? node.children.map(child => ({
+                id: child.id,
+                name: child.name,
+                type: child.type
+              })) : undefined
+            }
+          };
+
+          return result;
+        } catch (error) {
+          return {
+            success: false,
+            error: error.message,
+            stack: error.stack
+          };
+        }
+      })()
+    `;
+        try {
+            const result = await this.executeInPluginContext(code);
+            if (!result.success) {
+                throw new Error(result.error || 'Failed to get component data');
+            }
+            logger.info({
+                nodeId,
+                componentName: result.component?.name,
+                hasDescription: !!result.component?.description
+            }, 'Successfully retrieved component via Desktop Plugin API');
+            await this.page.evaluate((name, hasDesc) => {
+                console.log(`[DESKTOP_CONNECTOR] ✅ Retrieved component "${name}", has description: ${hasDesc}`);
+            }, result.component?.name, !!result.component?.description);
+            return result;
+        }
+        catch (error) {
+            logger.error({ error, nodeId }, 'Failed to get component via Desktop Plugin API');
+            await this.page.evaluate((id, err) => {
+                console.error(`[DESKTOP_CONNECTOR] ❌ getComponentByNodeId failed for ${id}:`, err);
+            }, nodeId, error instanceof Error ? error.message : String(error));
+            throw error;
+        }
+    }
+    async dispose() {
+        logger.info('Figma Desktop connector disposed');
+    }
+}

package/dist/cloudflare/core/figma-style-extractor.js

@@ -0,0 +1,311 @@
+/**
+ * Figma Style Extractor
+ *
+ * Extracts style information (colors, typography, spacing) from Figma files
+ * using the REST API /files endpoint. This provides an alternative to the
+ * Enterprise-only Variables API by parsing style data directly from nodes.
+ *
+ * Based on the approach used by Figma-Context-MCP
+ */
+import { logger } from './logger';
+export class FigmaStyleExtractor {
+    constructor() {
+        this.extractedVariables = new Map();
+        this.colorIndex = 0;
+        this.typographyIndex = 0;
+        this.spacingIndex = 0;
+        this.radiusIndex = 0;
+    }
+    /**
+     * Extract style "variables" from Figma file data
+     * This mimics what users would see as variables in Figma
+     */
+    async extractStylesFromFile(fileData) {
+        try {
+            logger.info('Extracting styles from Figma file data');
+            this.extractedVariables.clear();
+            this.colorIndex = 0;
+            this.typographyIndex = 0;
+            this.spacingIndex = 0;
+            this.radiusIndex = 0;
+            // Process the document tree
+            if (fileData.document) {
+                this.processNode(fileData.document);
+            }
+            // Also process components for more style data
+            if (fileData.components) {
+                Object.values(fileData.components).forEach((component) => {
+                    if (component.node) {
+                        this.processNode(component.node);
+                    }
+                });
+            }
+            // Process styles if available
+            if (fileData.styles) {
+                this.processStyles(fileData.styles);
+            }
+            const variables = Array.from(this.extractedVariables.values());
+            logger.info({
+                colorCount: variables.filter(v => v.type === 'COLOR').length,
+                typographyCount: variables.filter(v => v.type === 'TYPOGRAPHY').length,
+                spacingCount: variables.filter(v => v.type === 'SPACING').length,
+                radiusCount: variables.filter(v => v.type === 'RADIUS').length,
+                totalCount: variables.length
+            }, 'Extracted style variables from file');
+            return variables;
+        }
+        catch (error) {
+            logger.error({ error }, 'Failed to extract styles from file');
+            throw error;
+        }
+    }
+    /**
+     * Process a single node and extract style information
+     */
+    processNode(node, depth = 0) {
+        if (!node || depth > 10)
+            return; // Limit depth to prevent infinite recursion
+        // Extract colors from fills
+        if (node.fills && Array.isArray(node.fills)) {
+            node.fills.forEach(fill => {
+                if (fill.type === 'SOLID' && fill.color && fill.visible !== false) {
+                    this.extractColor(fill.color, fill.opacity, node);
+                }
+            });
+        }
+        // Extract colors from strokes
+        if (node.strokes && Array.isArray(node.strokes)) {
+            node.strokes.forEach(stroke => {
+                if (stroke.type === 'SOLID' && stroke.color && stroke.visible !== false) {
+                    this.extractColor(stroke.color, stroke.opacity, node, 'stroke');
+                }
+            });
+        }
+        // Extract typography styles
+        if (node.type === 'TEXT' && node.style) {
+            this.extractTypography(node.style, node);
+        }
+        // Extract spacing from auto-layout
+        if (node.layoutMode) {
+            if (node.itemSpacing !== undefined && node.itemSpacing > 0) {
+                this.extractSpacing('spacing', node.itemSpacing, node);
+            }
+            if (node.paddingLeft !== undefined && node.paddingLeft > 0) {
+                this.extractSpacing('padding', node.paddingLeft, node);
+            }
+        }
+        // Extract corner radius
+        if (node.cornerRadius !== undefined && node.cornerRadius > 0) {
+            this.extractRadius(node.cornerRadius, node);
+        }
+        else if (node.rectangleCornerRadii && node.rectangleCornerRadii.length > 0) {
+            const uniqueRadii = [...new Set(node.rectangleCornerRadii)];
+            uniqueRadii.forEach(radius => {
+                if (radius > 0) {
+                    this.extractRadius(radius, node);
+                }
+            });
+        }
+        // Process children recursively
+        if (node.children && Array.isArray(node.children)) {
+            node.children.forEach(child => {
+                this.processNode(child, depth + 1);
+            });
+        }
+    }
+    /**
+     * Extract color variable
+     */
+    extractColor(color, opacity = 1, node, type = 'fill') {
+        const r = Math.round(color.r * 255);
+        const g = Math.round(color.g * 255);
+        const b = Math.round(color.b * 255);
+        const a = opacity * (color.a || 1);
+        const hex = '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
+        const rgba = a < 1 ? `rgba(${r}, ${g}, ${b}, ${a})` : hex;
+        // Create a unique key based on the color value
+        const key = `color_${hex}_${a}`;
+        if (!this.extractedVariables.has(key)) {
+            // Generate a meaningful name based on the node
+            const category = this.inferColorCategory(node.name);
+            const name = this.generateColorName(category, type, this.colorIndex++);
+            this.extractedVariables.set(key, {
+                id: key,
+                name,
+                value: rgba,
+                type: 'COLOR',
+                category,
+                description: `Extracted from ${node.name || 'unnamed node'}`,
+                nodeId: node.id
+            });
+        }
+    }
+    /**
+     * Extract typography variable
+     */
+    extractTypography(style, node) {
+        const key = `typography_${style.fontFamily}_${style.fontSize}_${style.fontWeight}`;
+        if (!this.extractedVariables.has(key)) {
+            const name = this.generateTypographyName(node.name, this.typographyIndex++);
+            const value = [
+                `font-family: "${style.fontFamily || 'Inter'}"`,
+                style.fontSize ? `font-size: ${style.fontSize}px` : '',
+                style.fontWeight ? `font-weight: ${style.fontWeight}` : '',
+                style.lineHeightPx ? `line-height: ${style.lineHeightPx}px` : '',
+                style.letterSpacing ? `letter-spacing: ${style.letterSpacing}px` : ''
+            ].filter(Boolean).join(', ');
+            this.extractedVariables.set(key, {
+                id: key,
+                name,
+                value,
+                type: 'TYPOGRAPHY',
+                category: 'text',
+                description: `Extracted from ${node.name || 'unnamed text'}`,
+                nodeId: node.id
+            });
+        }
+    }
+    /**
+     * Extract spacing variable
+     */
+    extractSpacing(type, value, node) {
+        const key = `spacing_${type}_${value}`;
+        if (!this.extractedVariables.has(key)) {
+            const name = `${type}/${Math.round(value / 4) * 4 || value}`; // Round to nearest 4px
+            this.extractedVariables.set(key, {
+                id: key,
+                name,
+                value: `${value}px`,
+                type: 'SPACING',
+                category: type,
+                description: `Extracted from ${node.name || 'unnamed node'}`,
+                nodeId: node.id
+            });
+        }
+    }
+    /**
+     * Extract radius variable
+     */
+    extractRadius(value, node) {
+        const key = `radius_${value}`;
+        if (!this.extractedVariables.has(key)) {
+            const name = `radius/${this.categorizeRadius(value)}`;
+            this.extractedVariables.set(key, {
+                id: key,
+                name,
+                value: `${value}px`,
+                type: 'RADIUS',
+                category: 'border',
+                description: `Extracted from ${node.name || 'unnamed node'}`,
+                nodeId: node.id
+            });
+        }
+    }
+    /**
+     * Process Figma styles object
+     */
+    processStyles(styles) {
+        Object.entries(styles).forEach(([styleId, styleData]) => {
+            const { name, description, styleType } = styleData;
+            if (styleType === 'FILL' || styleType === 'TEXT') {
+                // These are named styles that could be considered variables
+                const variable = {
+                    id: styleId,
+                    name: name || styleId,
+                    value: styleId, // We don't have the actual value here
+                    type: styleType === 'FILL' ? 'COLOR' : 'TYPOGRAPHY',
+                    description: description || `Style: ${name}`,
+                    category: 'style'
+                };
+                this.extractedVariables.set(`style_${styleId}`, variable);
+            }
+        });
+    }
+    /**
+     * Helper to infer color category from node name
+     */
+    inferColorCategory(nodeName) {
+        if (!nodeName)
+            return 'color';
+        const name = nodeName.toLowerCase();
+        if (name.includes('background') || name.includes('bg'))
+            return 'background';
+        if (name.includes('text') || name.includes('label') || name.includes('title'))
+            return 'text';
+        if (name.includes('border') || name.includes('stroke'))
+            return 'border';
+        if (name.includes('primary') || name.includes('secondary') || name.includes('accent'))
+            return 'theme';
+        if (name.includes('success') || name.includes('error') || name.includes('warning'))
+            return 'semantic';
+        return 'color';
+    }
+    /**
+     * Generate a meaningful color name
+     */
+    generateColorName(category, type, index) {
+        const tier = index < 5 ? 'primary' : index < 10 ? 'secondary' : 'tertiary';
+        return `${category}/${tier}-${type}`;
+    }
+    /**
+     * Generate a meaningful typography name
+     */
+    generateTypographyName(nodeName, index) {
+        if (nodeName) {
+            const name = nodeName.toLowerCase();
+            if (name.includes('heading') || name.includes('h1') || name.includes('h2')) {
+                return `heading/${name.replace(/[^a-z0-9]/g, '-')}`;
+            }
+            if (name.includes('body') || name.includes('paragraph')) {
+                return `body/${name.replace(/[^a-z0-9]/g, '-')}`;
+            }
+            if (name.includes('caption') || name.includes('label')) {
+                return `caption/${name.replace(/[^a-z0-9]/g, '-')}`;
+            }
+        }
+        return `text/style-${index}`;
+    }
+    /**
+     * Categorize radius values
+     */
+    categorizeRadius(value) {
+        if (value === 0)
+            return 'none';
+        if (value <= 2)
+            return 'xs';
+        if (value <= 4)
+            return 'sm';
+        if (value <= 8)
+            return 'md';
+        if (value <= 16)
+            return 'lg';
+        if (value <= 24)
+            return 'xl';
+        return 'xxl';
+    }
+    /**
+     * Format the extracted variables for output
+     */
+    formatVariablesAsOutput(variables) {
+        // Group variables by type and category
+        const grouped = {};
+        variables.forEach(variable => {
+            const key = variable.name;
+            grouped[key] = variable.value;
+        });
+        // Add metadata about extraction method
+        grouped['_metadata'] = {
+            extractionMethod: 'REST_API_STYLES',
+            note: 'These are extracted style properties, not true Figma Variables (which require Enterprise)',
+            timestamp: new Date().toISOString(),
+            counts: {
+                colors: variables.filter(v => v.type === 'COLOR').length,
+                typography: variables.filter(v => v.type === 'TYPOGRAPHY').length,
+                spacing: variables.filter(v => v.type === 'SPACING').length,
+                radius: variables.filter(v => v.type === 'RADIUS').length,
+                total: variables.length
+            }
+        };
+        return grouped;
+    }
+}