@sangheepark/figma-ds-mcp 0.2.1 → 0.2.2

package/dist/tools/pipeline-tools.js

@@ -3,8 +3,8 @@
  * Phase 2 결정적 파이프라인 도구. Figma 연결 불필요 (순수 JSON 변환).
  */
 import { z } from 'zod';
-import { writeFileSync, mkdirSync } from 'fs';
-import { dirname } from 'path';
+import { writeFileSync, readFileSync, mkdirSync, readdirSync } from 'fs';
+import { dirname, join } from 'path';
 // Layout 허용 key 목록
 // 주의: schema.ts (src/plugin/parser/schema.ts)의 layoutSchema와 동기화 필요.
 // 별도 패키지이므로 import 불가 — schema.ts에 key 추가 시 여기도 수동 업데이트.
@@ -354,6 +354,237 @@ function gateCheck(spec) {
     const pass = results.every(r => r.pass);
     return { pass, results };
 }
+// fontWeight name → CSS number (reverse of display names in data files)
+const FONT_WEIGHT_NAME_TO_NUM = {
+    thin: '100', hairline: '100',
+    extralight: '200', ultralight: '200',
+    light: '300',
+    regular: '400', normal: '400',
+    medium: '500',
+    semibold: '600', demibold: '600',
+    bold: '700',
+    extrabold: '800', ultrabold: '800',
+    black: '900', heavy: '900',
+};
+// Split name into lowercase words (CamelCase, snake_case, kebab-case)
+function splitWords(name) {
+    return name
+        .replace(/([a-z])([A-Z])/g, '$1_$2')
+        .replace(/[-_]+/g, '_')
+        .toLowerCase()
+        .split('_')
+        .filter(w => w.length > 0);
+}
+// 3-stage component matching
+function matchComponent(dsName, allComponents) {
+    // Stage 1: exact match (case-sensitive)
+    const exact = allComponents.get(dsName);
+    if (exact)
+        return { ...exact, matchType: 'exact' };
+    // Stage 2: case-insensitive match
+    const dsLower = dsName.toLowerCase();
+    for (const [name, data] of allComponents) {
+        if (name.toLowerCase() === dsLower) {
+            return { ...data, matchType: 'case-insensitive' };
+        }
+    }
+    // Stage 3: word-split intersection match
+    const inputWords = new Set(splitWords(dsName));
+    if (inputWords.size === 0)
+        return null;
+    let bestScore = 0;
+    let bestMatch = null;
+    let bestName = '';
+    for (const [name, data] of allComponents) {
+        const dataWords = new Set(splitWords(name));
+        let intersection = 0;
+        for (const w of inputWords) {
+            if (dataWords.has(w))
+                intersection++;
+        }
+        const score = intersection / inputWords.size;
+        if (score > bestScore || (score === bestScore && bestName.length > name.length)) {
+            bestScore = score;
+            bestMatch = data;
+            bestName = name;
+        }
+    }
+    if (bestScore >= 0.8 && bestMatch) {
+        return { ...bestMatch, matchType: `word-split(${bestScore.toFixed(2)})` };
+    }
+    return null;
+}
+function generateMapping(traversals, dataDir) {
+    // 1. Load all data files
+    const files = readdirSync(dataDir);
+    const allComponents = new Map();
+    const allVariables = [];
+    const allTextStyles = [];
+    for (const file of files) {
+        if (file.endsWith('-component-sets.json')) {
+            const library = file.replace('-component-sets.json', '');
+            const data = JSON.parse(readFileSync(join(dataDir, file), 'utf-8'));
+            for (const [name, entry] of Object.entries(data)) {
+                if (name === '_metadata')
+                    continue;
+                allComponents.set(name, { entry: entry, library });
+            }
+        }
+        if (file.endsWith('-style.json') || file === 'web-ui.json') {
+            const library = file.replace('-style.json', '').replace('.json', '');
+            const data = JSON.parse(readFileSync(join(dataDir, file), 'utf-8'));
+            if (data.variables) {
+                for (const [name, v] of Object.entries(data.variables)) {
+                    if (v.type === 'COLOR') {
+                        allVariables.push({ name, value: v.value, type: v.type, library });
+                    }
+                }
+            }
+            if (data.styles?.text) {
+                for (const [name, entry] of Object.entries(data.styles.text)) {
+                    allTextStyles.push({ name, entry, library });
+                }
+            }
+        }
+    }
+    // 2. Extract data from traversal nodes
+    const dsNames = new Set();
+    const hexColors = new Set();
+    const fontSpecs = new Set();
+    const elementNodes = [];
+    function extractFromNode(node) {
+        if (node._ds)
+            dsNames.add(node._ds);
+        if (node.style) {
+            for (const value of Object.values(node.style)) {
+                if (typeof value === 'string' && /^#[0-9a-fA-F]{3,8}$/.test(value)) {
+                    hexColors.add(normalizeHex(value));
+                }
+            }
+            const fontSize = node.style['font-size'];
+            let fontWeight = node.style['font-weight'];
+            if (typeof fontWeight === 'number')
+                fontWeight = String(fontWeight);
+            if (typeof fontWeight === 'string') {
+                const normalized = FONT_WEIGHT_NAME_TO_NUM[fontWeight.toLowerCase()];
+                if (normalized)
+                    fontWeight = normalized;
+            }
+            if (fontSize && fontWeight) {
+                fontSpecs.add(`${fontSize}/${fontWeight}`);
+            }
+        }
+        // Collect top-level named frames as potential elements
+        if (node.name && (node.type === 'frame' || node.type === 'component')) {
+            elementNodes.push({ name: node.name, node });
+        }
+        node.children?.forEach(extractFromNode);
+    }
+    traversals.forEach(extractFromNode);
+    // 3. Match components
+    const components = {};
+    for (const dsName of dsNames) {
+        const match = matchComponent(dsName, allComponents);
+        if (match) {
+            const comp = {
+                library: match.library,
+                'library-key': match.entry.key,
+            };
+            if (match.entry.variants) {
+                const variants = {};
+                const defaults = {};
+                for (const [axis, info] of Object.entries(match.entry.variants)) {
+                    variants[axis] = info.options;
+                    defaults[axis] = info.default;
+                }
+                comp.variants = variants;
+                comp.defaults = defaults;
+            }
+            if (match.entry.properties) {
+                const properties = {};
+                for (const [propName, propInfo] of Object.entries(match.entry.properties)) {
+                    properties[propName] = propInfo.type;
+                }
+                comp.properties = properties;
+            }
+            components[dsName] = comp;
+        }
+    }
+    // 4. Match tokens (HEX → variable name)
+    const tokens = {};
+    // Build reverse map: normalized HEX → variable name (semantic preferred)
+    const hexToVar = new Map();
+    for (const v of allVariables) {
+        const hex = normalizeHex(v.value);
+        const existing = hexToVar.get(hex);
+        // Prefer semantic (non-primitive): variables without numbers at the end
+        if (!existing || (!isPrimitive(v.name) && isPrimitive(existing))) {
+            hexToVar.set(hex, `{${v.name}}`);
+        }
+    }
+    for (const hex of hexColors) {
+        const varName = hexToVar.get(hex);
+        if (varName)
+            tokens[hex] = varName;
+    }
+    // 5. Match text styles (fontSize/fontWeight → style name)
+    const textStyles = {};
+    // Build reverse map: "14px/500" → "@StyleName"
+    const specToStyle = new Map();
+    for (const ts of allTextStyles) {
+        const fw = FONT_WEIGHT_NAME_TO_NUM[ts.entry.fontWeight.toLowerCase()] || ts.entry.fontWeight;
+        const key = `${ts.entry.fontSize}px/${fw}`;
+        if (!specToStyle.has(key)) {
+            specToStyle.set(key, `@${ts.name}`);
+        }
+    }
+    for (const spec of fontSpecs) {
+        const styleName = specToStyle.get(spec);
+        if (styleName)
+            textStyles[spec] = styleName;
+    }
+    // 6. Generate element labels
+    const elements = {};
+    for (const { name, node } of elementNodes) {
+        const instanceChildren = collectInstanceChildren(node);
+        const isLibrary = node.type === 'instance' || (node._ds && components[node._ds]);
+        if (isLibrary && node._ds) {
+            const match = components[node._ds];
+            const libLabel = match ? `library: ${node._ds} (${match.library})` : `library: ${node._ds}`;
+            elements[name] = { label: libLabel, internalLibrary: [] };
+        }
+        else {
+            elements[name] = {
+                label: '직접 빌드',
+                internalLibrary: instanceChildren,
+            };
+        }
+    }
+    return { elements, components, tokens, textStyles };
+}
+function normalizeHex(hex) {
+    let h = hex.toUpperCase();
+    // Expand 3-char to 6-char: #ABC → #AABBCC
+    if (/^#[0-9A-F]{3}$/i.test(h)) {
+        h = `#${h[1]}${h[1]}${h[2]}${h[2]}${h[3]}${h[3]}`;
+    }
+    return h;
+}
+function isPrimitive(varName) {
+    // Primitive variables typically have numbers (e.g., gray/100, blue/500)
+    return /\/\d+$/.test(varName) || /Alpha\//.test(varName);
+}
+function collectInstanceChildren(node) {
+    const result = [];
+    function walk(n) {
+        if (n._ds && n !== node) {
+            result.push(n._ds);
+        }
+        n.children?.forEach(walk);
+    }
+    node.children?.forEach(walk);
+    return [...new Set(result)];
+}
 // --- Tool Registration ---
 export function registerPipelineTools(server) {
     // validate_traversal — B2.5
@@ -430,5 +661,61 @@ Run after validate_traversal. If outputPath is provided, spec is saved to file a
                 }],
         };
     });
+    // generate_mapping — D5
+    server.tool('generate_mapping', `Generate mapping.json from traversal JSON + blueprint data files. Zero LLM involvement.
+Reads *-component-sets.json and *-style.json from dataDir. Matches components (3-stage: exact → case-insensitive → word-split), tokens (HEX → variable), text styles (fontSize/fontWeight → style name).
+Saves result to outputPath. Replaces ds-data-lookup sub-agent.`, {
+        traversals: z.array(z.record(z.unknown())).describe('Array of traversal JSON root nodes'),
+        dataDir: z.string().describe('Path to blueprint data directory (e.g., .claude/blueprint/data/)'),
+        outputPath: z.string().describe('File path to save mapping.json'),
+    }, async ({ traversals, dataDir, outputPath }) => {
+        try {
+            const result = generateMapping(traversals, dataDir);
+            mkdirSync(dirname(outputPath), { recursive: true });
+            writeFileSync(outputPath, JSON.stringify(result, null, 2));
+            // Summary for context (not the full mapping)
+            const summary = {
+                success: true,
+                savedTo: outputPath,
+                stats: {
+                    components: Object.keys(result.components || {}).length,
+                    tokens: Object.keys(result.tokens || {}).length,
+                    textStyles: Object.keys(result.textStyles || {}).length,
+                    elements: Object.keys(result.elements || {}).length,
+                },
+                unmatchedDs: [],
+            };
+            // Report unmatched _ds names
+            const matchedDs = new Set(Object.keys(result.components || {}));
+            const allDs = new Set();
+            function collectDs(node) {
+                if (node._ds)
+                    allDs.add(node._ds);
+                node.children?.forEach(collectDs);
+            }
+            traversals.forEach(collectDs);
+            for (const ds of allDs) {
+                if (!matchedDs.has(ds))
+                    summary.unmatchedDs.push(ds);
+            }
+            return {
+                content: [{
+                        type: 'text',
+                        text: JSON.stringify(summary, null, 2),
+                    }],
+            };
+        }
+        catch (err) {
+            return {
+                content: [{
+                        type: 'text',
+                        text: JSON.stringify({
+                            success: false,
+                            error: err instanceof Error ? err.message : String(err),
+                        }, null, 2),
+                    }],
+            };
+        }
+    });
 }
 //# sourceMappingURL=pipeline-tools.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sangheepark/figma-ds-mcp",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "MCP server for Code to Figma Bridge — bridges Claude Code to Figma plugin via WebSocket",
   "type": "module",
   "main": "dist/index.js",