@vadenai/mcp-server 0.2.1 → 0.3.1

package/dist/utils/tailwind-resolver.js

@@ -0,0 +1,632 @@
+const SIZE_MAP = {
+    "0": "0px",
+    "0.5": "2px",
+    "1": "4px",
+    "1.5": "6px",
+    "2": "8px",
+    "2.5": "10px",
+    "3": "12px",
+    "3.5": "14px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "7": "28px",
+    "8": "32px",
+    "9": "36px",
+    "10": "40px",
+    "11": "44px",
+    "12": "48px",
+    "14": "56px",
+    "16": "64px",
+    "20": "80px",
+    "24": "96px",
+    full: "100%",
+};
+const RADIUS_MAP = {
+    none: "0px",
+    sm: "0.125rem",
+    "": "0.25rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    "2xl": "1rem",
+    "3xl": "1.5rem",
+    full: "9999px",
+};
+const FONT_WEIGHT_MAP = {
+    thin: "100",
+    extralight: "200",
+    light: "300",
+    normal: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700",
+    extrabold: "800",
+    black: "900",
+};
+const FONT_SIZE_MAP = {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    base: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem",
+    "2xl": "1.5rem",
+    "3xl": "1.875rem",
+};
+const STATIC_COLORS = {
+    white: "#ffffff",
+    black: "#000000",
+    transparent: "transparent",
+};
+const TAILWIND_PALETTE = {
+    // Gray
+    "gray-50": "#f9fafb",
+    "gray-100": "#f3f4f6",
+    "gray-200": "#e5e7eb",
+    "gray-300": "#d1d5db",
+    "gray-400": "#9ca3af",
+    "gray-500": "#6b7280",
+    "gray-600": "#4b5563",
+    "gray-700": "#374151",
+    "gray-800": "#1f2937",
+    "gray-900": "#111827",
+    // Pink
+    "pink-50": "#fdf2f8",
+    "pink-100": "#fce7f3",
+    "pink-200": "#fbcfe8",
+    "pink-300": "#f9a8d4",
+    "pink-400": "#f472b6",
+    "pink-500": "#ec4899",
+    "pink-600": "#db2777",
+    "pink-700": "#be185d",
+    "pink-800": "#9d174d",
+    "pink-900": "#831843",
+    // Purple
+    "purple-400": "#a78bfa",
+    "purple-500": "#8b5cf6",
+    "purple-600": "#7c3aed",
+    "purple-900": "#4c1d95",
+    // Cyan
+    "cyan-400": "#22d3ee",
+    "cyan-500": "#06b6d4",
+    // Yellow
+    "yellow-200": "#fef08a",
+    "yellow-400": "#facc15",
+    // Red
+    "red-500": "#ef4444",
+    "red-600": "#dc2626",
+    // Green
+    "green-500": "#22c55e",
+    // Blue
+    "blue-500": "#3b82f6",
+    "blue-600": "#2563eb",
+};
+const SHADOW_MAP = {
+    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    "": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+    md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+    xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.1)",
+    "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+    none: "none",
+};
+const TRACKING_MAP = {
+    tighter: "-0.05em",
+    tight: "-0.025em",
+    normal: "0em",
+    wide: "0.025em",
+    wider: "0.05em",
+    widest: "0.1em",
+};
+const FONT_FAMILY_MAP = {
+    sans: "sans-serif",
+    serif: "serif",
+    mono: "monospace",
+    body: "var(--font-body)",
+    heading: "var(--font-heading)",
+};
+const GRADIENT_DIR_MAP = {
+    r: "right",
+    l: "left",
+    t: "top",
+    b: "bottom",
+    tr: "top right",
+    tl: "top left",
+    br: "bottom right",
+    bl: "bottom left",
+};
+const FONT_SIZE_KEYS = new Set(Object.keys(FONT_SIZE_MAP));
+function normalizeHex(hex) {
+    const h = hex.replace("#", "");
+    if (h.length === 3) {
+        return `#${h[0]}${h[0]}${h[1]}${h[1]}${h[2]}${h[2]}`;
+    }
+    if (h.length === 4) {
+        const r = parseInt(`${h[0]}${h[0]}`, 16);
+        const g = parseInt(`${h[1]}${h[1]}`, 16);
+        const b = parseInt(`${h[2]}${h[2]}`, 16);
+        const a = parseInt(`${h[3]}${h[3]}`, 16) / 255;
+        return `rgba(${r},${g},${b},${Number(a.toFixed(3))})`;
+    }
+    if (h.length === 8) {
+        const r = parseInt(h.slice(0, 2), 16);
+        const g = parseInt(h.slice(2, 4), 16);
+        const b = parseInt(h.slice(4, 6), 16);
+        const a = parseInt(h.slice(6, 8), 16) / 255;
+        return `rgba(${r},${g},${b},${Number(a.toFixed(3))})`;
+    }
+    return `#${h.slice(0, 6)}`;
+}
+function parseArbitraryValue(val) {
+    const m = val.match(/^\[(.+)\]$/);
+    // Tailwind の arbitrary value では _ はスペースとして扱われる
+    // e.g. w-[calc(100%_-_1rem)] → calc(100% - 1rem)
+    return m ? m[1].replace(/_/g, " ") : null;
+}
+function resolveColorValue(value, resolvedColors) {
+    // 0. Arbitrary bracket color: [#hex], [rgba(...)], [hsl(...)], [oklch(...)]
+    const arbitrary = parseArbitraryValue(value);
+    if (arbitrary) {
+        // raw hex
+        if (/^#([0-9a-fA-F]{3,8})$/.test(arbitrary)) {
+            return normalizeHex(arbitrary);
+        }
+        // css function: rgba(...), hsl(...), oklch(...)
+        if (/^(rgba?|hsla?|oklch)\(.+\)$/i.test(arbitrary)) {
+            return arbitrary;
+        }
+        return null;
+    }
+    // 0.5. Raw hex without brackets (used in gradient stops like from-#hex)
+    if (/^#([0-9a-fA-F]{3,8})$/.test(value)) {
+        return normalizeHex(value);
+    }
+    // 1a. Bracket opacity: {name}/[0.05]
+    const bracketOpacityMatch = value.match(/^(.+)\/\[([0-9.]+)\]$/);
+    if (bracketOpacityMatch) {
+        const [, colorName, opacityStr] = bracketOpacityMatch;
+        const opacity = Number(opacityStr);
+        if (colorName === "white")
+            return `rgba(255,255,255,${opacity})`;
+        if (colorName === "black")
+            return `rgba(0,0,0,${opacity})`;
+        const baseColor = resolveColorValue(colorName, resolvedColors);
+        if (baseColor?.startsWith("#")) {
+            const r = parseInt(baseColor.slice(1, 3), 16);
+            const g = parseInt(baseColor.slice(3, 5), 16);
+            const b = parseInt(baseColor.slice(5, 7), 16);
+            return `rgba(${r},${g},${b},${opacity})`;
+        }
+    }
+    // 1b. Opacity-suffixed colors: white/10, black/50, primary/10
+    const opacityMatch = value.match(/^(.+)\/(\d+)$/);
+    if (opacityMatch) {
+        const [, colorName, opacityStr] = opacityMatch;
+        const opacity = Number(opacityStr) / 100;
+        if (colorName === "white")
+            return `rgba(255,255,255,${opacity})`;
+        if (colorName === "black")
+            return `rgba(0,0,0,${opacity})`;
+        // Try resolving semantic color
+        const baseColor = resolveColorValue(colorName, resolvedColors);
+        if (baseColor?.startsWith("#")) {
+            const r = parseInt(baseColor.slice(1, 3), 16);
+            const g = parseInt(baseColor.slice(3, 5), 16);
+            const b = parseInt(baseColor.slice(5, 7), 16);
+            return `rgba(${r},${g},${b},${opacity})`;
+        }
+    }
+    // 2. Static colors
+    if (value in STATIC_COLORS) {
+        return STATIC_COLORS[value];
+    }
+    // 2.5 Tailwind palette colors (e.g. gray-300, pink-400)
+    if (value in TAILWIND_PALETTE) {
+        return TAILWIND_PALETTE[value];
+    }
+    // 3. Semantic tokens from resolvedColors
+    // muted-foreground → resolvedColors.muted.foreground
+    // foreground → resolvedColors.base.foreground
+    // muted → resolvedColors.muted.background
+    // primary → resolvedColors.primary.background
+    // destructive → resolvedColors.destructive (if string)
+    // Handle compound tokens like "muted-foreground", "primary-foreground"
+    const dashIndex = value.indexOf("-");
+    if (dashIndex !== -1) {
+        const prefix = value.substring(0, dashIndex);
+        const suffix = value.substring(dashIndex + 1);
+        const group = resolvedColors[prefix];
+        if (group && typeof group === "object" && group !== null) {
+            const resolved = group[suffix];
+            if (typeof resolved === "string") {
+                return resolved;
+            }
+        }
+        return null;
+    }
+    // Handle simple tokens
+    if (value === "foreground") {
+        const base = resolvedColors.base;
+        if (base && typeof base === "object" && base !== null) {
+            const fg = base.foreground;
+            if (typeof fg === "string")
+                return fg;
+        }
+        return null;
+    }
+    if (value === "background") {
+        const base = resolvedColors.base;
+        if (base && typeof base === "object" && base !== null) {
+            const bg = base.background;
+            if (typeof bg === "string")
+                return bg;
+        }
+        return null;
+    }
+    // For tokens like "muted", "primary" → look up .background
+    const group = resolvedColors[value];
+    if (typeof group === "string") {
+        return group;
+    }
+    if (group && typeof group === "object" && group !== null) {
+        const bg = group.background;
+        if (typeof bg === "string")
+            return bg;
+    }
+    return null;
+}
+export function resolveVisualProperties(classes, resolvedColors) {
+    const result = {};
+    const tokens = classes.split(/\s+/).filter(Boolean);
+    for (const token of tokens) {
+        // Height
+        if (token.startsWith("h-")) {
+            const val = token.slice(2);
+            if (val === "screen") {
+                result.height = "100vh";
+            }
+            else if (val in SIZE_MAP) {
+                result.height = SIZE_MAP[val];
+            }
+            else {
+                const arb = parseArbitraryValue(val);
+                if (arb)
+                    result.height = arb;
+            }
+            continue;
+        }
+        // Width
+        if (token.startsWith("w-")) {
+            const val = token.slice(2);
+            if (val === "screen") {
+                result.width = "100vw";
+            }
+            else if (val in SIZE_MAP) {
+                result.width = SIZE_MAP[val];
+            }
+            else {
+                const arb = parseArbitraryValue(val);
+                if (arb)
+                    result.width = arb;
+            }
+            continue;
+        }
+        // Padding (check px-/py-/pt-/pb-/pl-/pr- before p- to avoid false match)
+        if (token.startsWith("px-")) {
+            const val = token.slice(3);
+            if (val in SIZE_MAP)
+                result.paddingX = SIZE_MAP[val];
+            else {
+                const arb = parseArbitraryValue(val);
+                if (arb)
+                    result.paddingX = arb;
+            }
+            continue;
+        }
+        if (token.startsWith("py-")) {
+            const val = token.slice(3);
+            if (val in SIZE_MAP)
+                result.paddingY = SIZE_MAP[val];
+            else {
+                const arb = parseArbitraryValue(val);
+                if (arb)
+                    result.paddingY = arb;
+            }
+            continue;
+        }
+        if (token.startsWith("pt-")) {
+            const val = token.slice(3);
+            if (val in SIZE_MAP)
+                result.paddingTop = SIZE_MAP[val];
+            else {
+                const arb = parseArbitraryValue(val);
+                if (arb)
+                    result.paddingTop = arb;
+            }
+            continue;
+        }
+        if (token.startsWith("pb-")) {
+            const val = token.slice(3);
+            if (val in SIZE_MAP)
+                result.paddingBottom = SIZE_MAP[val];
+            else {
+                const arb = parseArbitraryValue(val);
+                if (arb)
+                    result.paddingBottom = arb;
+            }
+            continue;
+        }
+        if (token.startsWith("pl-")) {
+            const val = token.slice(3);
+            if (val in SIZE_MAP)
+                result.paddingLeft = SIZE_MAP[val];
+            else {
+                const arb = parseArbitraryValue(val);
+                if (arb)
+                    result.paddingLeft = arb;
+            }
+            continue;
+        }
+        if (token.startsWith("pr-")) {
+            const val = token.slice(3);
+            if (val in SIZE_MAP)
+                result.paddingRight = SIZE_MAP[val];
+            else {
+                const arb = parseArbitraryValue(val);
+                if (arb)
+                    result.paddingRight = arb;
+            }
+            continue;
+        }
+        if (token.startsWith("p-")) {
+            const val = token.slice(2);
+            if (val in SIZE_MAP)
+                result.padding = SIZE_MAP[val];
+            else {
+                const arb = parseArbitraryValue(val);
+                if (arb)
+                    result.padding = arb;
+            }
+            continue;
+        }
+        // Gap
+        if (token.startsWith("gap-")) {
+            const val = token.slice(4);
+            if (val in SIZE_MAP)
+                result.gap = SIZE_MAP[val];
+            else {
+                const arb = parseArbitraryValue(val);
+                if (arb)
+                    result.gap = arb;
+            }
+            continue;
+        }
+        // Letter-spacing (tracking)
+        if (token.startsWith("tracking-")) {
+            const val = token.slice(9);
+            if (val in TRACKING_MAP)
+                result.letterSpacing = TRACKING_MAP[val];
+            continue;
+        }
+        // Flex-shrink
+        if (token === "shrink-0") {
+            result.flexShrink = "0";
+            continue;
+        }
+        if (token === "shrink") {
+            result.flexShrink = "1";
+            continue;
+        }
+        // Border radius
+        if (token === "rounded") {
+            result.borderRadius = "0.25rem";
+            continue;
+        }
+        if (token.startsWith("rounded-")) {
+            const val = token.slice(8);
+            if (val in RADIUS_MAP) {
+                result.borderRadius = RADIUS_MAP[val];
+            }
+            continue;
+        }
+        // Display
+        if (token === "flex") {
+            result.display = "flex";
+            continue;
+        }
+        if (token === "inline-flex") {
+            result.display = "inline-flex";
+            continue;
+        }
+        if (token === "grid") {
+            result.display = "grid";
+            continue;
+        }
+        // Align items
+        if (token === "items-center") {
+            result.alignItems = "center";
+            continue;
+        }
+        if (token === "items-start") {
+            result.alignItems = "flex-start";
+            continue;
+        }
+        if (token === "items-end") {
+            result.alignItems = "flex-end";
+            continue;
+        }
+        // Justify content
+        if (token === "justify-center") {
+            result.justifyContent = "center";
+            continue;
+        }
+        if (token === "justify-between") {
+            result.justifyContent = "space-between";
+            continue;
+        }
+        // Overflow
+        if (token === "overflow-hidden") {
+            result.overflow = "hidden";
+            continue;
+        }
+        // Aspect ratio
+        if (token === "aspect-square") {
+            result.aspectRatio = "1/1";
+            continue;
+        }
+        if (token === "aspect-video") {
+            result.aspectRatio = "16/9";
+            continue;
+        }
+        // Object fit
+        if (token === "object-cover") {
+            result.objectFit = "cover";
+            continue;
+        }
+        if (token === "object-contain") {
+            result.objectFit = "contain";
+            continue;
+        }
+        // Font family / weight
+        if (token.startsWith("font-")) {
+            const val = token.slice(5);
+            if (val in FONT_FAMILY_MAP) {
+                result.fontFamily = FONT_FAMILY_MAP[val];
+                continue;
+            }
+            if (val in FONT_WEIGHT_MAP) {
+                result.fontWeight = FONT_WEIGHT_MAP[val];
+            }
+            continue;
+        }
+        // Opacity
+        if (token.startsWith("opacity-")) {
+            const val = token.slice(8);
+            const num = Number(val);
+            if (!Number.isNaN(num)) {
+                result.opacity = String(num / 100);
+            }
+            continue;
+        }
+        // Shadow: semantic values first, then arbitrary
+        if (token === "shadow") {
+            result.boxShadow = SHADOW_MAP[""];
+            continue;
+        }
+        if (token.startsWith("shadow-[")) {
+            const inner = token.slice(8, -1);
+            result.boxShadow = inner.replace(/_/g, " ");
+            continue;
+        }
+        if (token.startsWith("shadow-")) {
+            const val = token.slice(7);
+            if (val in SHADOW_MAP) {
+                result.boxShadow = SHADOW_MAP[val];
+            }
+            continue;
+        }
+        // Border: must check before bg-/text- color resolution
+        if (token === "border") {
+            result.border = {
+                width: "1px",
+                color: result.border?.color ?? "",
+            };
+            continue;
+        }
+        // border-{n} where n is a single digit
+        if (token.startsWith("border-")) {
+            const val = token.slice(7);
+            // border-style: dashed, dotted, solid (must check before color resolution)
+            if (val === "dashed" || val === "dotted" || val === "solid") {
+                result.borderStyle = val;
+                continue;
+            }
+            // border-[{n}px] arbitrary value
+            const arbitraryMatch = val.match(/^\[(\d+)px\]$/);
+            if (arbitraryMatch) {
+                result.border = {
+                    width: `${arbitraryMatch[1]}px`,
+                    color: result.border?.color ?? "",
+                };
+                continue;
+            }
+            // border-{n} numeric
+            if (/^\d+$/.test(val)) {
+                result.border = {
+                    width: `${val}px`,
+                    color: result.border?.color ?? "",
+                };
+                continue;
+            }
+            // border-{colorValue}
+            const color = resolveColorValue(val, resolvedColors);
+            if (color) {
+                result.border = {
+                    width: result.border?.width ?? "1px",
+                    color,
+                };
+            }
+            continue;
+        }
+        // text-{size} MUST come before text-{color}
+        if (token.startsWith("text-")) {
+            const val = token.slice(5);
+            if (FONT_SIZE_KEYS.has(val)) {
+                result.fontSize = FONT_SIZE_MAP[val];
+                continue;
+            }
+            // text-{color}
+            const color = resolveColorValue(val, resolvedColors);
+            if (color) {
+                result.color = color;
+            }
+            continue;
+        }
+        // bg-gradient-to-{direction} (must check before bg-{color})
+        if (token.startsWith("bg-gradient-to-")) {
+            const dir = token.slice(15);
+            result.gradient = `linear-gradient(to ${GRADIENT_DIR_MAP[dir] ?? dir}`;
+            continue;
+        }
+        // bg-{color}
+        if (token.startsWith("bg-")) {
+            const val = token.slice(3);
+            const color = resolveColorValue(val, resolvedColors);
+            if (color) {
+                result.backgroundColor = color;
+            }
+            continue;
+        }
+        // from-{color} (gradient)
+        if (token.startsWith("from-")) {
+            const val = token.slice(5);
+            const color = resolveColorValue(val, resolvedColors);
+            if (color) {
+                result.gradient = `${result.gradient ?? "linear-gradient("}, ${color}`;
+            }
+            continue;
+        }
+        // via-{color} (gradient middle stop)
+        if (token.startsWith("via-")) {
+            const val = token.slice(4);
+            const color = resolveColorValue(val, resolvedColors);
+            if (color) {
+                result.gradient = `${result.gradient ?? "linear-gradient("}, ${color}`;
+            }
+            continue;
+        }
+        // to-{color} (gradient stop)
+        if (token.startsWith("to-")) {
+            const val = token.slice(3);
+            const color = resolveColorValue(val, resolvedColors);
+            if (color) {
+                result.gradient = `${result.gradient ?? "linear-gradient("}, ${color})`;
+            }
+        }
+    }
+    // グラデーションが閉じ括弧なしで終わっている場合は追加
+    if (result.gradient && !result.gradient.endsWith(")")) {
+        result.gradient = `${result.gradient})`;
+    }
+    return result;
+}

package/dist/validation.d.ts

@@ -0,0 +1,42 @@
+/**
+ * MCP ツール引数のバリデーションユーティリティ
+ */
+/**
+ * update_concept / update_wireframe 用のフィールド更新引数を検証・抽出する
+ *
+ * @returns { fieldPath, value } — 検証済みの値
+ * @throws {Error} 引数が不正な場合
+ */
+export declare function validateFieldUpdateArgs(args: Record<string, unknown>): {
+    fieldPath: string;
+    value: string | number | boolean | null;
+};
+/**
+ * add_wireframe_element / add_concept_element 用の引数を検証・抽出する
+ *
+ * @returns { fieldPath, value } — 検証済みの値
+ * @throws {Error} 引数が不正な場合
+ */
+export declare function validateArrayAddArgs(args: Record<string, unknown>): {
+    fieldPath: string;
+    value: unknown;
+};
+/**
+ * remove_wireframe_element / remove_concept_element 用の引数を検証・抽出する
+ *
+ * @returns { fieldPath } — 検証済みの値
+ * @throws {Error} 引数が不正な場合
+ */
+export declare function validateArrayRemoveArgs(args: Record<string, unknown>): {
+    fieldPath: string;
+};
+/**
+ * push_wireframes 用の files 引数を検証する
+ *
+ * @returns 検証済みの files 配列
+ * @throws {Error} 引数が不正な場合
+ */
+export declare function validatePushWireframesArgs(args: Record<string, unknown>): Array<{
+    filename: string;
+    content: string;
+}>;