@atezer/figma-mcp-bridge 1.4.0 → 1.4.1

package/dist/cloudflare/core/enrichment/style-resolver.js

@@ -1,326 +0,0 @@
-/**
- * Style Value Resolver
- * Resolves style values from variable references and provides formatted outputs
- */
-export class StyleValueResolver {
-    constructor(logger) {
-        this.cache = new Map();
-        this.variableCache = new Map();
-        this.logger = logger;
-    }
-    /**
-     * Resolve a style's value, handling variable references
-     */
-    async resolveStyleValue(style, variables, maxDepth = 10) {
-        const cacheKey = `style:${style.key || style.node_id}`;
-        // Check cache
-        if (this.cache.has(cacheKey)) {
-            return this.cache.get(cacheKey);
-        }
-        try {
-            // Get the actual style node data
-            const styleData = await this.getStyleData(style);
-            if (!styleData) {
-                return { value: null };
-            }
-            // Check if this style uses a variable
-            const variableRef = this.findVariableReference(styleData);
-            if (variableRef && variables.has(variableRef.id)) {
-                // Resolve the variable value
-                const variable = variables.get(variableRef.id);
-                const resolvedValue = await this.resolveVariableValue(variable, variables, maxDepth);
-                const result = {
-                    value: resolvedValue,
-                    variableRef: {
-                        id: variableRef.id,
-                        name: variable.name,
-                        collection: variable.variableCollectionId,
-                        resolvedType: variable.resolvedType,
-                    },
-                };
-                this.cache.set(cacheKey, result);
-                return result;
-            }
-            // No variable reference, return direct value
-            const directValue = this.extractDirectValue(styleData, style.style_type);
-            const result = { value: directValue };
-            this.cache.set(cacheKey, result);
-            return result;
-        }
-        catch (error) {
-            this.logger.error({
-                error,
-                style: style.name,
-            }, "Error resolving style value");
-            return { value: null };
-        }
-    }
-    /**
-     * Resolve a variable's value, handling alias chains
-     */
-    async resolveVariableValue(variable, allVariables, maxDepth = 10, currentDepth = 0) {
-        if (currentDepth >= maxDepth) {
-            this.logger.warn({
-                variable: variable.name,
-            }, "Max resolution depth reached");
-            return null;
-        }
-        const cacheKey = `var:${variable.id}`;
-        if (this.variableCache.has(cacheKey)) {
-            return this.variableCache.get(cacheKey);
-        }
-        try {
-            // Get the value for the default mode (or first available mode)
-            const modes = Object.keys(variable.valuesByMode || {});
-            if (modes.length === 0) {
-                return null;
-            }
-            const defaultMode = modes[0]; // TODO: Support mode selection
-            const value = variable.valuesByMode[defaultMode];
-            // Check if this is an alias (reference to another variable)
-            if (typeof value === "object" && value.type === "VARIABLE_ALIAS") {
-                const targetVariable = allVariables.get(value.id);
-                if (!targetVariable) {
-                    this.logger.warn({
-                        source: variable.name,
-                        targetId: value.id,
-                    }, "Variable alias target not found");
-                    return null;
-                }
-                // Recursively resolve the alias
-                const resolvedValue = await this.resolveVariableValue(targetVariable, allVariables, maxDepth, currentDepth + 1);
-                this.variableCache.set(cacheKey, resolvedValue);
-                return resolvedValue;
-            }
-            // Direct value - format based on type
-            const formattedValue = this.formatVariableValue(value, variable.resolvedType);
-            this.variableCache.set(cacheKey, formattedValue);
-            return formattedValue;
-        }
-        catch (error) {
-            this.logger.error({
-                error,
-                variable: variable.name,
-            }, "Error resolving variable value");
-            return null;
-        }
-    }
-    /**
-     * Format a variable value based on its type
-     */
-    formatVariableValue(value, type) {
-        if (!value)
-            return null;
-        switch (type) {
-            case "COLOR":
-                return this.formatColor(value);
-            case "FLOAT":
-            case "NUMBER":
-                return value;
-            case "STRING":
-                return value;
-            case "BOOLEAN":
-                return Boolean(value);
-            default:
-                return value;
-        }
-    }
-    /**
-     * Format a color value to hex string
-     */
-    formatColor(color) {
-        if (typeof color === "string") {
-            return color;
-        }
-        if (color.r !== undefined && color.g !== undefined && color.b !== undefined) {
-            const r = Math.round(color.r * 255);
-            const g = Math.round(color.g * 255);
-            const b = Math.round(color.b * 255);
-            return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`.toUpperCase();
-        }
-        return null;
-    }
-    /**
-     * Generate export formats for a resolved value
-     */
-    generateExportFormats(name, value, type, formats = ["css", "sass", "tailwind", "typescript", "json"]) {
-        const result = {};
-        // Sanitize name for different formats
-        const cssName = this.toCSSVariableName(name);
-        const sassName = this.toSassVariableName(name);
-        const tailwindName = this.toTailwindClassName(name);
-        const tsName = this.toTypeScriptPath(name);
-        const jsonPath = this.toJSONPath(name);
-        for (const format of formats) {
-            switch (format) {
-                case "css":
-                    result.css = `var(${cssName})`;
-                    break;
-                case "sass":
-                    result.sass = sassName;
-                    break;
-                case "tailwind":
-                    result.tailwind = tailwindName;
-                    break;
-                case "typescript":
-                    result.typescript = tsName;
-                    break;
-                case "json":
-                    result.json = jsonPath;
-                    break;
-            }
-        }
-        return result;
-    }
-    /**
-     * Convert token name to CSS variable format
-     * Example: "color/background/primary-default" -> "--color-background-primary-default"
-     */
-    toCSSVariableName(name) {
-        return `--${name.replace(/\//g, "-").toLowerCase()}`;
-    }
-    /**
-     * Convert token name to Sass variable format
-     * Example: "color/background/primary-default" -> "$color-background-primary-default"
-     */
-    toSassVariableName(name) {
-        return `$${name.replace(/\//g, "-").toLowerCase()}`;
-    }
-    /**
-     * Convert token name to Tailwind class format
-     * Example: "color/background/primary-default" -> "bg-primary"
-     */
-    toTailwindClassName(name) {
-        const parts = name.split("/");
-        // Try to infer Tailwind utility class
-        if (parts[0] === "color") {
-            if (parts[1] === "background") {
-                return `bg-${parts[parts.length - 1].toLowerCase()}`;
-            }
-            if (parts[1] === "text") {
-                return `text-${parts[parts.length - 1].toLowerCase()}`;
-            }
-            if (parts[1] === "border") {
-                return `border-${parts[parts.length - 1].toLowerCase()}`;
-            }
-        }
-        if (parts[0] === "spacing") {
-            return `space-${parts[parts.length - 1].toLowerCase()}`;
-        }
-        // Fallback: use last part
-        return parts[parts.length - 1].toLowerCase();
-    }
-    /**
-     * Convert token name to TypeScript path format
-     * Example: "color/background/primary-default" -> "tokens.color.background.primaryDefault"
-     */
-    toTypeScriptPath(name) {
-        const parts = name.split("/");
-        const camelCaseParts = parts.map((part, index) => {
-            if (index === 0)
-                return part.toLowerCase();
-            return part
-                .split("-")
-                .map((word, i) => i === 0
-                ? word.toLowerCase()
-                : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-                .join("");
-        });
-        return `tokens.${camelCaseParts.join(".")}`;
-    }
-    /**
-     * Convert token name to nested JSON path
-     * Example: "color/background/primary-default" -> { color: { background: { primaryDefault: value } } }
-     */
-    toJSONPath(name) {
-        const parts = name.split("/");
-        const result = {};
-        let current = result;
-        for (let i = 0; i < parts.length; i++) {
-            const key = parts[i]
-                .split("-")
-                .map((word, j) => j === 0
-                ? word.toLowerCase()
-                : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-                .join("");
-            if (i === parts.length - 1) {
-                current[key] = "[VALUE]"; // Placeholder
-            }
-            else {
-                current[key] = {};
-                current = current[key];
-            }
-        }
-        return result;
-    }
-    /**
-     * Get style data from Figma API
-     * This would be called via the Figma API client
-     */
-    async getStyleData(style) {
-        // TODO: Implement actual Figma API call
-        // For now, return the style object itself
-        return style;
-    }
-    /**
-     * Find variable reference in style data
-     */
-    findVariableReference(styleData) {
-        // Check for boundVariables (new variables API)
-        if (styleData.boundVariables) {
-            // Check common properties that can be bound to variables
-            const props = ["fills", "strokes", "effects", "text"];
-            for (const prop of props) {
-                if (styleData.boundVariables[prop]) {
-                    const binding = styleData.boundVariables[prop];
-                    if (Array.isArray(binding) && binding.length > 0) {
-                        return { id: binding[0].id };
-                    }
-                    if (binding.id) {
-                        return { id: binding.id };
-                    }
-                }
-            }
-        }
-        return null;
-    }
-    /**
-     * Extract direct value from style (no variable)
-     */
-    extractDirectValue(styleData, styleType) {
-        switch (styleType) {
-            case "FILL":
-                if (styleData.fills && styleData.fills.length > 0) {
-                    const fill = styleData.fills[0];
-                    if (fill.type === "SOLID") {
-                        return this.formatColor(fill.color);
-                    }
-                }
-                return null;
-            case "TEXT":
-                if (styleData.fontFamily) {
-                    return {
-                        fontFamily: styleData.fontFamily,
-                        fontSize: styleData.fontSize,
-                        fontWeight: styleData.fontWeight,
-                        lineHeight: styleData.lineHeight,
-                    };
-                }
-                return null;
-            case "EFFECT":
-                if (styleData.effects && styleData.effects.length > 0) {
-                    return styleData.effects;
-                }
-                return null;
-            default:
-                return null;
-        }
-    }
-    /**
-     * Clear the cache
-     */
-    clearCache() {
-        this.cache.clear();
-        this.variableCache.clear();
-    }
-}

package/dist/cloudflare/core/figma-api.js

@@ -1,273 +0,0 @@
-/**
- * Figma REST API Client
- * Handles HTTP calls to Figma's REST API for file data, variables, components, and styles
- */
-import { createChildLogger } from './logger.js';
-const logger = createChildLogger({ component: 'figma-api' });
-const FIGMA_API_BASE = 'https://api.figma.com/v1';
-/**
- * Extract file key from Figma URL
- * @example https://www.figma.com/design/abc123/My-File -> abc123
- */
-export function extractFileKey(url) {
-    try {
-        const urlObj = new URL(url);
-        // Match patterns like /design/FILE_KEY or /file/FILE_KEY
-        const match = urlObj.pathname.match(/\/(design|file)\/([a-zA-Z0-9]+)/);
-        return match ? match[2] : null;
-    }
-    catch (error) {
-        logger.error({ error, url }, 'Failed to extract file key from URL');
-        return null;
-    }
-}
-/**
- * Figma API Client
- * Makes authenticated requests to Figma REST API
- */
-export class FigmaAPI {
-    constructor(config) {
-        this.accessToken = config.accessToken;
-    }
-    /**
-     * Make authenticated request to Figma API
-     */
-    async request(endpoint, options = {}) {
-        const url = `${FIGMA_API_BASE}${endpoint}`;
-        // Detect token type and use appropriate authentication header
-        // OAuth tokens start with 'figu_' and require Authorization: Bearer header
-        // Personal Access Tokens use X-Figma-Token header
-        const isOAuthToken = this.accessToken.startsWith('figu_');
-        // Debug logging to verify token is being used
-        const tokenPreview = this.accessToken ? `${this.accessToken.substring(0, 10)}...` : 'NO TOKEN';
-        logger.info({
-            url,
-            tokenPreview,
-            hasToken: !!this.accessToken,
-            tokenLength: this.accessToken?.length,
-            isOAuthToken,
-            authMethod: isOAuthToken ? 'Bearer' : 'X-Figma-Token'
-        }, 'Making Figma API request with token');
-        const headers = {
-            'Content-Type': 'application/json',
-            ...(options.headers || {}),
-        };
-        // Add authentication header based on token type
-        if (isOAuthToken) {
-            headers['Authorization'] = `Bearer ${this.accessToken}`;
-        }
-        else {
-            headers['X-Figma-Token'] = this.accessToken;
-        }
-        const response = await fetch(url, {
-            ...options,
-            headers,
-        });
-        if (!response.ok) {
-            const errorText = await response.text();
-            logger.error({ status: response.status, statusText: response.statusText, body: errorText }, 'Figma API request failed');
-            throw new Error(`Figma API error (${response.status}): ${errorText}`);
-        }
-        const data = await response.json();
-        return data;
-    }
-    /**
-     * GET /v1/files/:file_key
-     * Get full file data including document tree, components, and styles
-     */
-    async getFile(fileKey, options) {
-        let endpoint = `/files/${fileKey}`;
-        const params = new URLSearchParams();
-        if (options?.version)
-            params.append('version', options.version);
-        if (options?.ids)
-            params.append('ids', options.ids.join(','));
-        if (options?.depth !== undefined)
-            params.append('depth', options.depth.toString());
-        if (options?.geometry)
-            params.append('geometry', options.geometry);
-        if (options?.plugin_data)
-            params.append('plugin_data', options.plugin_data);
-        if (options?.branch_data)
-            params.append('branch_data', 'true');
-        if (params.toString()) {
-            endpoint += `?${params.toString()}`;
-        }
-        return this.request(endpoint);
-    }
-    /**
-     * GET /v1/files/:file_key/variables/local
-     * Get local variables (design tokens) from a file
-     */
-    async getLocalVariables(fileKey) {
-        const response = await this.request(`/files/${fileKey}/variables/local`);
-        // Figma API returns {status, error, meta: {variableCollections, variables}}
-        // Extract meta to match expected format
-        return response.meta || response;
-    }
-    /**
-     * GET /v1/files/:file_key/variables/published
-     * Get published variables from a file
-     */
-    async getPublishedVariables(fileKey) {
-        const response = await this.request(`/files/${fileKey}/variables/published`);
-        // Figma API returns {status, error, meta: {variableCollections, variables}}
-        // Extract meta to match expected format
-        return response.meta || response;
-    }
-    /**
-     * GET /v1/files/:file_key/nodes
-     * Get specific nodes by ID
-     */
-    async getNodes(fileKey, nodeIds, options) {
-        let endpoint = `/files/${fileKey}/nodes`;
-        const params = new URLSearchParams();
-        params.append('ids', nodeIds.join(','));
-        if (options?.version)
-            params.append('version', options.version);
-        if (options?.depth !== undefined)
-            params.append('depth', options.depth.toString());
-        if (options?.geometry)
-            params.append('geometry', options.geometry);
-        if (options?.plugin_data)
-            params.append('plugin_data', options.plugin_data);
-        endpoint += `?${params.toString()}`;
-        return this.request(endpoint);
-    }
-    /**
-     * GET /v1/files/:file_key/styles
-     * Get styles from a file
-     */
-    async getStyles(fileKey) {
-        return this.request(`/files/${fileKey}/styles`);
-    }
-    /**
-     * GET /v1/files/:file_key/components
-     * Get components from a file
-     */
-    async getComponents(fileKey) {
-        return this.request(`/files/${fileKey}/components`);
-    }
-    /**
-     * GET /v1/files/:file_key/component_sets
-     * Get component sets (variants) from a file
-     */
-    async getComponentSets(fileKey) {
-        return this.request(`/files/${fileKey}/component_sets`);
-    }
-    /**
-     * GET /v1/images/:file_key
-     * Renders images for specified nodes
-     * @param fileKey - The file key
-     * @param nodeIds - Node IDs to render (single string or array)
-     * @param options - Rendering options
-     * @returns Map of node IDs to image URLs (URLs expire after 30 days)
-     */
-    async getImages(fileKey, nodeIds, options) {
-        const params = new URLSearchParams();
-        // Handle single or multiple node IDs
-        const ids = Array.isArray(nodeIds) ? nodeIds.join(',') : nodeIds;
-        params.append('ids', ids);
-        // Add optional parameters
-        if (options?.scale !== undefined)
-            params.append('scale', options.scale.toString());
-        if (options?.format)
-            params.append('format', options.format);
-        if (options?.svg_outline_text !== undefined)
-            params.append('svg_outline_text', options.svg_outline_text.toString());
-        if (options?.svg_include_id !== undefined)
-            params.append('svg_include_id', options.svg_include_id.toString());
-        if (options?.svg_include_node_id !== undefined)
-            params.append('svg_include_node_id', options.svg_include_node_id.toString());
-        if (options?.svg_simplify_stroke !== undefined)
-            params.append('svg_simplify_stroke', options.svg_simplify_stroke.toString());
-        if (options?.contents_only !== undefined)
-            params.append('contents_only', options.contents_only.toString());
-        const endpoint = `/images/${fileKey}?${params.toString()}`;
-        logger.info({ fileKey, ids, options }, 'Rendering images');
-        return this.request(endpoint);
-    }
-    /**
-     * Helper: Get all design tokens (variables) with formatted output
-     */
-    async getAllVariables(fileKey) {
-        // Don't catch errors - let them bubble up so proper error messages are shown
-        const [local, published] = await Promise.all([
-            this.getLocalVariables(fileKey),
-            this.getPublishedVariables(fileKey).catch(() => ({ variables: {} })), // Published can fail gracefully
-        ]);
-        return { local, published };
-    }
-    /**
-     * Helper: Get component metadata with properties
-     */
-    async getComponentData(fileKey, nodeId) {
-        const response = await this.getNodes(fileKey, [nodeId], { depth: 2 });
-        return response.nodes?.[nodeId];
-    }
-    /**
-     * Helper: Search for components by name
-     */
-    async searchComponents(fileKey, searchTerm) {
-        const { meta } = await this.getComponents(fileKey);
-        const components = meta?.components || [];
-        return components.filter((comp) => comp.name?.toLowerCase().includes(searchTerm.toLowerCase()));
-    }
-}
-/**
- * Helper function to format variables for display
- */
-export function formatVariables(variablesData) {
-    const collections = Object.entries(variablesData.variableCollections || {}).map(([id, collection]) => ({
-        id,
-        name: collection.name,
-        key: collection.key,
-        modes: collection.modes,
-        variableIds: collection.variableIds,
-    }));
-    const variables = Object.entries(variablesData.variables || {}).map(([id, variable]) => ({
-        id,
-        name: variable.name,
-        key: variable.key,
-        resolvedType: variable.resolvedType,
-        valuesByMode: variable.valuesByMode,
-        variableCollectionId: variable.variableCollectionId,
-        scopes: variable.scopes,
-        description: variable.description,
-    }));
-    const variablesByType = variables.reduce((acc, v) => {
-        acc[v.resolvedType] = (acc[v.resolvedType] || 0) + 1;
-        return acc;
-    }, {});
-    return {
-        collections,
-        variables,
-        summary: {
-            totalCollections: collections.length,
-            totalVariables: variables.length,
-            variablesByType,
-        },
-    };
-}
-/**
- * Helper function to format component data for display
- */
-export function formatComponentData(componentNode) {
-    return {
-        id: componentNode.id,
-        name: componentNode.name,
-        type: componentNode.type,
-        description: componentNode.description,
-        descriptionMarkdown: componentNode.descriptionMarkdown,
-        properties: componentNode.componentPropertyDefinitions,
-        children: componentNode.children?.map((child) => ({
-            id: child.id,
-            name: child.name,
-            type: child.type,
-        })),
-        bounds: componentNode.absoluteBoundingBox,
-        fills: componentNode.fills,
-        strokes: componentNode.strokes,
-        effects: componentNode.effects,
-    };
-}