@vadenai/mcp-server 0.3.1 → 0.3.2

package/dist/index.js

@@ -20,7 +20,7 @@ import { handleUpdateComponentStyle } from "./tools/write-components.js";
 import { handleUpdateDesignTokens } from "./tools/write-tokens.js";
 import { validateArrayAddArgs, validateArrayRemoveArgs, validateFieldUpdateArgs, validatePushWireframesArgs, } from "./validation.js";
 // --- コマンドライン引数パース ---
-const VERSION = "0.3.0";
+const VERSION = "0.3.2";
 function parseArgs() {
     const args = process.argv.slice(2);
     if (args.includes("--help") || args.includes("-h")) {

package/dist/tools/components.js

@@ -385,6 +385,16 @@ function formatStyleSection(data) {
             }
             lines.push("");
         }
+        // --- Resolved Styles (JSON) ---
+        const resolvedStylesJson = buildResolvedStylesJson(resolvedStyleEntries, resolvedVariantEntries);
+        lines.push("");
+        lines.push("## Resolved Styles (JSON)");
+        lines.push("");
+        lines.push("Machine-readable resolved styles for programmatic consumption (Figma Plugin API, code generation, etc.).");
+        lines.push("");
+        lines.push("```json");
+        lines.push(JSON.stringify(resolvedStylesJson, null, 2));
+        lines.push("```");
     }
     return lines.join("\n");
 }
@@ -458,6 +468,125 @@ function formatResolvedProps(props) {
     }
     return result;
 }
+/**
+ * ResolvedVisualProperties からテキスト出力用のプロパティ（boxShadow等の文字列形式）を除き、
+ * 構造化された JSON オブジェクトを構築する。
+ */
+function buildResolvedStylesJson(baseEntries, variantEntries) {
+    const json = {};
+    for (const { label, props } of baseEntries) {
+        json[label] = propsToJson(props);
+    }
+    if (variantEntries.length > 0) {
+        const variants = {};
+        for (const { group, name, props } of variantEntries) {
+            const cleaned = propsToJson(props);
+            if (Object.keys(cleaned).length === 0)
+                continue;
+            if (!variants[group])
+                variants[group] = {};
+            variants[group][name] = cleaned;
+        }
+        if (Object.keys(variants).length > 0) {
+            json.variants = variants;
+        }
+    }
+    return json;
+}
+/**
+ * ResolvedVisualProperties を JSON 出力用に整形する。
+ * - undefined フィールドを除外
+ * - boxShadow 文字列の代わりに boxShadowLayers 配列を使用
+ * - padding を統合フィールドに正規化
+ */
+function propsToJson(props) {
+    const result = {};
+    if (props.display)
+        result.display = props.display;
+    if (props.width)
+        result.width = props.width;
+    if (props.height)
+        result.height = props.height;
+    if (props.aspectRatio)
+        result.aspectRatio = props.aspectRatio;
+    if (props.overflow)
+        result.overflow = props.overflow;
+    if (props.borderRadius)
+        result.borderRadius = props.borderRadius;
+    if (props.border) {
+        result.border = {
+            width: props.border.width,
+            style: props.borderStyle ?? (props.border.color ? "solid" : undefined),
+            color: props.border.color || undefined,
+        };
+    }
+    else if (props.borderStyle) {
+        result.borderStyle = props.borderStyle;
+    }
+    if (props.backgroundColor)
+        result.backgroundColor = props.backgroundColor;
+    if (props.color)
+        result.color = props.color;
+    if (props.fontWeight)
+        result.fontWeight = props.fontWeight;
+    if (props.fontSize)
+        result.fontSize = props.fontSize;
+    if (props.fontFamily)
+        result.fontFamily = props.fontFamily;
+    if (props.letterSpacing)
+        result.letterSpacing = props.letterSpacing;
+    if (props.objectFit)
+        result.objectFit = props.objectFit;
+    if (props.alignItems)
+        result.alignItems = props.alignItems;
+    if (props.justifyContent)
+        result.justifyContent = props.justifyContent;
+    if (props.opacity)
+        result.opacity = props.opacity;
+    if (props.flexShrink)
+        result.flexShrink = props.flexShrink;
+    if (props.gap)
+        result.gap = props.gap;
+    // boxShadow: 構造化配列を boxShadowLayers キーで出力
+    if (props.boxShadowLayers && props.boxShadowLayers.length > 0) {
+        result.boxShadowLayers = props.boxShadowLayers;
+    }
+    else if (props.boxShadow) {
+        result.boxShadow = props.boxShadow;
+    }
+    // padding: 常にオブジェクト形式 {top, right, bottom, left} に統一
+    {
+        const p = {};
+        if (props.padding) {
+            p.top = props.padding;
+            p.right = props.padding;
+            p.bottom = props.padding;
+            p.left = props.padding;
+        }
+        if (props.paddingX) {
+            p.left = props.paddingX;
+            p.right = props.paddingX;
+        }
+        if (props.paddingY) {
+            p.top = props.paddingY;
+            p.bottom = props.paddingY;
+        }
+        if (props.paddingTop)
+            p.top = props.paddingTop;
+        if (props.paddingBottom)
+            p.bottom = props.paddingBottom;
+        if (props.paddingLeft)
+            p.left = props.paddingLeft;
+        if (props.paddingRight)
+            p.right = props.paddingRight;
+        if (Object.keys(p).length > 0)
+            result.padding = p;
+    }
+    // gradient
+    if (props.gradient)
+        result.background = props.gradient;
+    return result;
+}
 /** テスト用にキャッシュをクリアする */
 export function clearRegistryCache() {
     cache = new WeakMap();

package/dist/utils/tailwind-resolver.d.ts

@@ -1,3 +1,11 @@
+export interface BoxShadowLayer {
+    type: "drop" | "inset";
+    x: number;
+    y: number;
+    blur: number;
+    spread: number;
+    color: string;
+}
 export interface ResolvedVisualProperties {
     width?: string;
     height?: string;
@@ -18,6 +26,7 @@ export interface ResolvedVisualProperties {
     justifyContent?: string;
     opacity?: string;
     boxShadow?: string;
+    boxShadowLayers?: BoxShadowLayer[];
     padding?: string;
     paddingX?: string;
     paddingY?: string;
@@ -33,3 +42,8 @@ export interface ResolvedVisualProperties {
     gradient?: string;
 }
 export declare function resolveVisualProperties(classes: string, resolvedColors: Record<string, unknown>): ResolvedVisualProperties;
+/**
+ * CSS box-shadow 文字列を構造化された BoxShadowLayer 配列にパースする。
+ * 複数レイヤー（カンマ区切り）、inset キーワード、rgba/rgb カラーに対応。
+ */
+export declare function parseBoxShadow(shadow: string): BoxShadowLayer[];

package/dist/utils/tailwind-resolver.js

@@ -628,5 +628,94 @@ export function resolveVisualProperties(classes, resolvedColors) {
     if (result.gradient && !result.gradient.endsWith(")")) {
         result.gradient = `${result.gradient})`;
     }
+    // boxShadow 文字列を構造化配列にパース
+    if (result.boxShadow && result.boxShadow !== "none") {
+        result.boxShadowLayers = parseBoxShadow(result.boxShadow);
+    }
     return result;
 }
+/**
+ * CSS box-shadow 文字列を構造化された BoxShadowLayer 配列にパースする。
+ * 複数レイヤー（カンマ区切り）、inset キーワード、rgba/rgb カラーに対応。
+ */
+export function parseBoxShadow(shadow) {
+    if (!shadow || shadow === "none")
+        return [];
+    const layers = [];
+    // カンマで分割するが、rgba()/rgb() 内のカンマは無視する
+    const rawLayers = splitShadowLayers(shadow);
+    for (const raw of rawLayers) {
+        const trimmed = raw.trim();
+        if (!trimmed)
+            continue;
+        const isInset = trimmed.startsWith("inset ");
+        const withoutInset = isInset ? trimmed.slice(6).trim() : trimmed;
+        // 色部分を抽出（rgba(...), rgb(...), #hex, named color）
+        let color = "";
+        let numbersStr = withoutInset;
+        // rgba/rgb 関数を先に抽出
+        const rgbaMatch = withoutInset.match(/(rgba?\([^)]+\))/);
+        if (rgbaMatch) {
+            color = rgbaMatch[1];
+            numbersStr = withoutInset.replace(color, "").trim();
+        }
+        else {
+            // #hex or named color — 末尾にあると仮定
+            const hexMatch = withoutInset.match(/(#[0-9a-fA-F]{3,8})\s*$/);
+            if (hexMatch) {
+                color = hexMatch[1];
+                numbersStr = withoutInset.slice(0, hexMatch.index).trim();
+            }
+            else {
+                // css variable like var(--foreground)
+                const varMatch = withoutInset.match(/(var\([^)]+\))\s*$/);
+                if (varMatch) {
+                    color = varMatch[1];
+                    numbersStr = withoutInset.slice(0, varMatch.index).trim();
+                }
+            }
+        }
+        // 数値部分をパース（x, y, blur, spread）
+        const numTokens = numbersStr
+            .split(/\s+/)
+            .filter((t) => /^-?\d/.test(t))
+            .map((t) => Number.parseFloat(t));
+        const x = numTokens[0] ?? 0;
+        const y = numTokens[1] ?? 0;
+        const blur = numTokens[2] ?? 0;
+        const spread = numTokens[3] ?? 0;
+        layers.push({
+            type: isInset ? "inset" : "drop",
+            x,
+            y,
+            blur,
+            spread,
+            color: color || "rgba(0,0,0,0)",
+        });
+    }
+    return layers;
+}
+/**
+ * box-shadow のカンマ区切りを括弧内のカンマを考慮して分割する。
+ */
+function splitShadowLayers(shadow) {
+    const layers = [];
+    let depth = 0;
+    let current = "";
+    for (const ch of shadow) {
+        if (ch === "(")
+            depth++;
+        else if (ch === ")")
+            depth--;
+        if (ch === "," && depth === 0) {
+            layers.push(current);
+            current = "";
+        }
+        else {
+            current += ch;
+        }
+    }
+    if (current.trim())
+        layers.push(current);
+    return layers;
+}

package/package.json

@@ -10,7 +10,7 @@
   ],
   "homepage": "https://vaden.ai",
   "license": "MIT",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "type": "module",
   "publishConfig": {
     "access": "public"