@sangheepark/figma-ds-mcp 0.2.12 → 0.2.14

package/dist/tools/pipeline-tools.js

@@ -298,6 +298,23 @@ function enrichSpec(traversal, mapping) {
             node.layout['clip-content'] = true;
             delete node.layout['overflow'];
         }
+        // 6-G: absolute CSS constraints → Figma sizing
+        // CSS left:0+right:0 = "stretch to parent width" → width:fill
+        // CSS top:0+bottom:0 = "stretch to parent height" → height:fill
+        // 6-A 필터링 전에 실행해야 CSS 좌표 정보를 활용 가능
+        if (node.layout) {
+            const lay = node.layout;
+            if (lay['positioning'] === 'absolute' || lay['positioning'] === 'fixed') {
+                const l = String(lay['left'] || ''), r = String(lay['right'] || '');
+                const t = String(lay['top'] || ''), b = String(lay['bottom'] || '');
+                if ((l === '0' || l === '0px') && (r === '0' || r === '0px') && !lay['width']) {
+                    lay['width'] = 'fill';
+                }
+                if ((t === '0' || t === '0px') && (b === '0' || b === '0px') && !lay['height']) {
+                    lay['height'] = 'fill';
+                }
+            }
+        }
         // 6-A: CSS-only 속성 필터링 (Figma가 지원하지 않는 CSS 속성 제거)
         if (node.style) {
             for (const key of Object.keys(node.style)) {
@@ -390,6 +407,42 @@ function enrichSpec(traversal, mapping) {
                 }
             }
         }
+        // 6-F: sticky-like absolute → normal flow 복원
+        // CSS position:sticky → traversal이 positioning:absolute로 변환하는 경우가 있음
+        // 정적 화면에서 sticky = normal flow. name 패턴으로 감지하여 복원.
+        // 조건: absolute + name이 header/sticky/nav/toolbar 패턴 + 원점 위치 (x:0/없음, y:0/없음)
+        if (node.layout?.positioning === 'absolute' && node.name) {
+            const isHeaderLike = /header|sticky|nav|toolbar/i.test(node.name);
+            const atOrigin = (!node.layout.x || node.layout.x === '0')
+                && (!node.layout.y || node.layout.y === '0');
+            if (isHeaderLike && atOrigin) {
+                delete node.layout['positioning'];
+                delete node.layout['x'];
+                delete node.layout['y'];
+            }
+        }
+        // 6-H: column parent centering inference (mx-auto 패턴)
+        // 웹에서 max-width + mx-auto는 가장 흔한 중앙 정렬 패턴.
+        // traversal이 mx-auto를 놓쳤을 때, 구조 패턴으로 추론:
+        // column + fill width 부모 + 고정폭 children (같은 width, ≥400px) → align-items:center
+        if (node.layout?.direction === 'column'
+            && node.layout.width === 'fill'
+            && node.children && node.children.length > 0
+            && !node.layout['align-items']) {
+            const fixedWidths = [];
+            for (const child of node.children) {
+                const cw = child.layout?.width;
+                if (typeof cw === 'string' && /^\d+/.test(cw) && cw !== 'fill') {
+                    fixedWidths.push(parseInt(cw, 10));
+                }
+            }
+            if (fixedWidths.length > 0) {
+                const allSame = fixedWidths.every(w => w === fixedWidths[0]);
+                if (allSame && fixedWidths[0] >= 400) {
+                    node.layout['align-items'] = 'center';
+                }
+            }
+        }
         // children 재귀
         if (node.children) {
             node.children.forEach((child, i) => {

package/package.json

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