@sangheepark/figma-ds-mcp 0.2.4 → 0.2.6

package/dist/tools/pipeline-tools.js

@@ -112,18 +112,52 @@ function enrichSpec(traversal, mapping) {
             if (component) {
                 node['library-key'] = component['library-key'];
                 // Step 2: _ds_props → variant-props + overrides 분리
+                // value 역검색 + default fallback 로직 포함
                 if (node._ds_props) {
                     const variantProps = {};
                     const overrides = {};
                     for (const [key, value] of Object.entries(node._ds_props)) {
                         if (component.variants && key in component.variants) {
-                            // variant axis에 해당하는 prop
+                            // 1) exact key match → variant-props
                             if (typeof value === 'string' && component.defaults?.[key] !== value) {
                                 variantProps[key] = value;
                             }
                         }
+                        else if (component.variants && typeof value === 'string') {
+                            // 2) exact match 실패 → value 역검색: 이 값을 가진 variant axis 찾기
+                            const matchingAxes = [];
+                            for (const [axis, options] of Object.entries(component.variants)) {
+                                if (axis in variantProps)
+                                    continue; // 이미 매핑된 axis 스킵
+                                if (options.includes(value) && component.defaults?.[axis] !== value) {
+                                    matchingAxes.push(axis);
+                                }
+                            }
+                            if (matchingAxes.length === 1) {
+                                // 정확히 1개 axis에서만 발견 → 매핑
+                                variantProps[matchingAxes[0]] = value;
+                            }
+                            // 0개 또는 2개 이상 → 매핑 포기 (default variant 사용)
+                        }
+                        else if (component.properties && typeof value === 'string') {
+                            // 3) variant가 아닌 prop → property name 역검색
+                            if (key in component.properties) {
+                                // exact property name match
+                                overrides[key] = value;
+                            }
+                            else {
+                                // exact match 실패 → TEXT property 자동 매핑
+                                const textProps = Object.entries(component.properties)
+                                    .filter(([, type]) => type === 'TEXT')
+                                    .map(([name]) => name);
+                                if (textProps.length === 1) {
+                                    overrides[textProps[0]] = value;
+                                }
+                                // 0개 또는 2개 이상 → 매핑 포기
+                            }
+                        }
                         else {
-                            // variant가 아닌 prop → overrides (text, boolean, swap)
+                            // boolean 등 기타 → overrides에 직접
                             overrides[key] = value;
                         }
                     }
@@ -222,6 +256,19 @@ function enrichSpec(traversal, mapping) {
                 node.layout.direction = 'column';
             }
         }
+        // 6-D: absolute + fill 정규화
+        // Figma에서 absolute 요소는 parent auto-layout에 참여하지 않으므로
+        // fill은 layoutSizingHorizontal/Vertical = 'FILL'로 처리 → constraints STRETCH 동작
+        // 별도 변환 불필요 — NodeBuilder가 absolute child에 fill을 적용하면 STRETCH로 동작
+        // 다만 x/y가 없으면 0으로 기본값 설정하여 parent 좌상단 정렬
+        if (node.layout?.positioning === 'absolute') {
+            if ((node.layout.width === 'fill' || node.layout.width === '100%') && node.layout.x === undefined) {
+                node.layout.x = '0';
+            }
+            if ((node.layout.height === 'fill' || node.layout.height === '100%') && node.layout.y === undefined) {
+                node.layout.y = '0';
+            }
+        }
         // children 재귀
         if (node.children) {
             node.children.forEach((child, i) => {
@@ -230,13 +277,13 @@ function enrichSpec(traversal, mapping) {
         }
     }
     walk(spec, 'root');
-    // Step 6-C: root frame sizing (fill → 1440px width, hug height)
+    // Step 6-C: root frame sizing (viewport defaults: 1440×900 PC)
     if (spec.layout) {
         if (spec.layout.width === 'fill') {
             spec.layout.width = '1440';
         }
         if (spec.layout.height === 'fill') {
-            spec.layout.height = 'hug';
+            spec.layout.height = '900';
         }
     }
     return { spec, errors };
@@ -420,6 +467,80 @@ function gateCheck(spec) {
     const pass = results.every(r => r.pass);
     return { pass, results };
 }
+// --- _repeat: Component Auto-Extraction ---
+function extractRepeatComponents(spec, defaultCount = 3) {
+    const extracted = new Map(); // name → component spec
+    function deepClone(obj) {
+        return JSON.parse(JSON.stringify(obj));
+    }
+    function getRepeatCount(node) {
+        if (typeof node._repeat === 'number' && node._repeat > 0)
+            return node._repeat;
+        return defaultCount;
+    }
+    // Depth-first walk: process children first so nested _repeat resolves before parent
+    function walk(node) {
+        // Process children first (depth-first)
+        if (node.children) {
+            for (const child of node.children) {
+                walk(child);
+            }
+        }
+        // Now process this node's children for _repeat
+        if (!node.children)
+            return;
+        const newChildren = [];
+        for (const child of node.children) {
+            if (!child._repeat) {
+                newChildren.push(child);
+                continue;
+            }
+            const count = getRepeatCount(child);
+            const nodeAny = child;
+            const hasLibraryKey = !!nodeAny['library-key'];
+            const hasDs = !!child._ds;
+            // Library instance: just duplicate N times, no component extraction
+            if (hasLibraryKey || hasDs) {
+                const cleanChild = deepClone(child);
+                delete cleanChild._repeat;
+                for (let i = 0; i < count; i++) {
+                    const instance = deepClone(cleanChild);
+                    if (instance.name)
+                        instance.name = `${instance.name}_${i + 1}`;
+                    newChildren.push(instance);
+                }
+                continue;
+            }
+            // Custom frame: extract as component + insert instances
+            const compName = child.name || `RepeatComponent_${extracted.size + 1}`;
+            if (!extracted.has(compName)) {
+                // Extract as component
+                const compSpec = deepClone(child);
+                compSpec.type = 'component';
+                compSpec.name = compName;
+                delete compSpec._repeat;
+                extracted.set(compName, compSpec);
+            }
+            // Insert N instances in place
+            for (let i = 0; i < count; i++) {
+                newChildren.push({
+                    type: 'instance',
+                    component: compName,
+                    name: `${compName}_${i + 1}`,
+                });
+            }
+        }
+        node.children = newChildren;
+    }
+    const page = deepClone(spec);
+    // Skip if root itself has _repeat (standalone component, no extraction needed)
+    if (page._repeat) {
+        delete page._repeat;
+        return { page, components: [] };
+    }
+    walk(page);
+    return { page, components: Array.from(extracted.values()) };
+}
 // fontWeight name → CSS number (reverse of display names in data files)
 const FONT_WEIGHT_NAME_TO_NUM = {
     thin: '100', hairline: '100',
@@ -946,9 +1067,16 @@ If no reviewNeeded, completes in 1 pass.`, {
                         }],
                 };
             }
+            // Step 3.5: Extract _repeat components
+            // Components are placed before pages so builder creates them first
+            const finalSpecs = [];
+            for (const spec of specs) {
+                const { page, components } = extractRepeatComponents(spec);
+                finalSpecs.push(...components, page);
+            }
             // Step 4: Gate check each spec
             const gateResults = [];
-            for (const spec of specs) {
+            for (const spec of finalSpecs) {
                 gateResults.push(gateCheck(spec));
             }
             const allGatesPass = gateResults.every(g => g.pass);
@@ -956,18 +1084,18 @@ If no reviewNeeded, completes in 1 pass.`, {
             mkdirSync(dirname(outputPath), { recursive: true });
             const trees = [];
             const allStats = [];
-            if (specs.length === 1) {
-                writeFileSync(outputPath, JSON.stringify(specs[0], null, 2));
-                trees.push(specToTree(specs[0]));
-                allStats.push(countSpecNodes(specs[0]));
+            if (finalSpecs.length === 1) {
+                writeFileSync(outputPath, JSON.stringify(finalSpecs[0], null, 2));
+                trees.push(specToTree(finalSpecs[0]));
+                allStats.push(countSpecNodes(finalSpecs[0]));
             }
             else {
                 // Multiple specs → save each with index
-                for (let i = 0; i < specs.length; i++) {
+                for (let i = 0; i < finalSpecs.length; i++) {
                     const specPath = outputPath.replace(/\.json$/, `_${i}.json`);
-                    writeFileSync(specPath, JSON.stringify(specs[i], null, 2));
-                    trees.push(specToTree(specs[i]));
-                    allStats.push(countSpecNodes(specs[i]));
+                    writeFileSync(specPath, JSON.stringify(finalSpecs[i], null, 2));
+                    trees.push(specToTree(finalSpecs[i]));
+                    allStats.push(countSpecNodes(finalSpecs[i]));
                 }
             }
             // Collect unresolved

package/dist/tools/utility-tools.js

@@ -57,20 +57,47 @@ function analyzeLayoutWarnings(spec) {
     return warnings;
 }
 export function registerUtilityTools(server, bridge) {
-    // get_status — Check connection status
+    // get_status — Check connection status + bridge version/capabilities
     server.tool('get_status', 'Check if the Figma Bridge plugin is connected and ready', {}, async () => {
         const connected = bridge.isConnected();
-        return {
-            content: [{
-                    type: 'text',
-                    text: JSON.stringify({
-                        connected,
-                        message: connected
-                            ? 'Figma Bridge plugin is connected and ready.'
-                            : 'Figma Bridge plugin is NOT connected. Please open the "Code to Figma Bridge" plugin in Figma.',
-                    }, null, 2),
-                }],
-        };
+        if (!connected) {
+            return {
+                content: [{
+                        type: 'text',
+                        text: JSON.stringify({
+                            connected: false,
+                            message: 'Figma Bridge plugin is NOT connected. Please open the "Code to Figma Bridge" plugin in Figma.',
+                        }, null, 2),
+                    }],
+            };
+        }
+        try {
+            const bridgeStatus = await bridge.send('bridge-get-status');
+            return {
+                content: [{
+                        type: 'text',
+                        text: JSON.stringify({
+                            connected: true,
+                            message: 'Figma Bridge plugin is connected and ready.',
+                            bridge: {
+                                version: bridgeStatus.version || 'unknown',
+                                capabilities: bridgeStatus.capabilities || [],
+                            },
+                        }, null, 2),
+                    }],
+            };
+        }
+        catch {
+            return {
+                content: [{
+                        type: 'text',
+                        text: JSON.stringify({
+                            connected: true,
+                            message: 'Figma Bridge plugin is connected but bridge-get-status failed. Bridge plugin dist may need rebuild.',
+                        }, null, 2),
+                    }],
+            };
+        }
     });
     // validate_spec — Validate a JSON spec without creating anything
     server.tool('validate_spec', 'Validate a component/variable/style spec (JSON) without creating anything in Figma. Returns validation errors if any.', {

package/package.json

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