@vadenai/mcp-server 0.3.0 → 0.3.1

package/dist/tools/components.js

@@ -1,5 +1,6 @@
 import { componentMetadata } from "../guides/component-metadata.js";
 import { generateComponentGuide } from "../guides/generate-guide.js";
+import { resolveVisualProperties, } from "../utils/tailwind-resolver.js";
 let cache = new WeakMap();
 const CACHE_TTL_MS = 5 * 60 * 1000; // 5分
 function getClientCache(client) {
@@ -307,8 +308,156 @@ function formatStyleSection(data) {
         }
         lines.push("");
     }
+    // --- Resolved Styles ---
+    const resolvedStyleEntries = [];
+    if (type === "single") {
+        const baseStylesValue = data.baseStyles;
+        if (typeof baseStylesValue === "string" && baseStylesValue.trim()) {
+            resolvedStyleEntries.push({
+                label: "baseStyles",
+                props: resolveVisualProperties(baseStylesValue, resolvedColors ?? {}),
+            });
+        }
+    }
+    else if (type === "multipart") {
+        const slotsObj = data.slots;
+        if (slotsObj && typeof slotsObj === "object") {
+            for (const [slotName, classes] of Object.entries(slotsObj)) {
+                if (typeof classes !== "string" || !classes.trim())
+                    continue;
+                resolvedStyleEntries.push({
+                    label: slotName,
+                    props: resolveVisualProperties(classes, resolvedColors ?? {}),
+                });
+            }
+        }
+    }
+    // --- Variant Resolved Styles ---
+    const resolvedVariantEntries = [];
+    const variants = data.variants;
+    if (variants && typeof variants === "object") {
+        for (const [groupName, groupVariants] of Object.entries(variants)) {
+            if (!groupVariants || typeof groupVariants !== "object")
+                continue;
+            for (const [variantName, classes] of Object.entries(groupVariants)) {
+                if (typeof classes !== "string" || !classes.trim())
+                    continue;
+                resolvedVariantEntries.push({
+                    group: groupName,
+                    name: variantName,
+                    props: resolveVisualProperties(classes, resolvedColors ?? {}),
+                });
+            }
+        }
+    }
+    if (resolvedStyleEntries.length > 0 || resolvedVariantEntries.length > 0) {
+        lines.push("## Resolved Styles");
+        lines.push("");
+        lines.push("Visual properties resolved from Style Config classes and design tokens.");
+        lines.push("Use these values for accurate rendering in design tools (Figma, Framer, etc.).");
+        lines.push("");
+        for (const { label, props } of resolvedStyleEntries) {
+            const propLines = formatResolvedProps(props);
+            if (propLines.length > 0) {
+                lines.push(`**${label}**:`);
+                for (const line of propLines) {
+                    lines.push(`- ${line}`);
+                }
+                lines.push("");
+            }
+        }
+        if (resolvedVariantEntries.length > 0) {
+            lines.push("### Variants");
+            lines.push("");
+            let currentGroup = "";
+            for (const { group, name, props } of resolvedVariantEntries) {
+                const propLines = formatResolvedProps(props);
+                if (propLines.length === 0)
+                    continue;
+                if (group !== currentGroup) {
+                    lines.push(`**${group}**:`);
+                    currentGroup = group;
+                }
+                lines.push(`  *${name}*:`);
+                for (const line of propLines) {
+                    lines.push(`  - ${line}`);
+                }
+            }
+            lines.push("");
+        }
+    }
     return lines.join("\n");
 }
+function formatResolvedProps(props) {
+    const result = [];
+    if (props.display)
+        result.push(`display: ${props.display}`);
+    if (props.width)
+        result.push(`width: ${props.width}`);
+    if (props.height)
+        result.push(`height: ${props.height}`);
+    if (props.aspectRatio)
+        result.push(`aspect-ratio: ${props.aspectRatio}`);
+    if (props.overflow)
+        result.push(`overflow: ${props.overflow}`);
+    if (props.borderRadius)
+        result.push(`border-radius: ${props.borderRadius}`);
+    if (props.border) {
+        const style = props.borderStyle ?? (props.border.color ? "solid" : undefined);
+        const parts = [
+            props.border.width,
+            style,
+            props.border.color || undefined,
+        ].filter(Boolean);
+        result.push(`border: ${parts.join(" ")}`);
+    }
+    if (props.backgroundColor)
+        result.push(`background-color: ${props.backgroundColor}`);
+    if (props.color)
+        result.push(`color: ${props.color}`);
+    if (props.fontWeight)
+        result.push(`font-weight: ${props.fontWeight}`);
+    if (props.fontSize)
+        result.push(`font-size: ${props.fontSize}`);
+    if (props.objectFit)
+        result.push(`object-fit: ${props.objectFit}`);
+    if (props.alignItems)
+        result.push(`align-items: ${props.alignItems}`);
+    if (props.justifyContent)
+        result.push(`justify-content: ${props.justifyContent}`);
+    if (props.opacity)
+        result.push(`opacity: ${props.opacity}`);
+    if (props.boxShadow)
+        result.push(`box-shadow: ${props.boxShadow}`);
+    if (props.padding)
+        result.push(`padding: ${props.padding}`);
+    if (props.paddingX)
+        result.push(`padding-inline: ${props.paddingX}`);
+    if (props.paddingY)
+        result.push(`padding-block: ${props.paddingY}`);
+    if (props.paddingTop)
+        result.push(`padding-top: ${props.paddingTop}`);
+    if (props.paddingBottom)
+        result.push(`padding-bottom: ${props.paddingBottom}`);
+    if (props.paddingLeft)
+        result.push(`padding-left: ${props.paddingLeft}`);
+    if (props.paddingRight)
+        result.push(`padding-right: ${props.paddingRight}`);
+    if (props.gap)
+        result.push(`gap: ${props.gap}`);
+    if (props.letterSpacing)
+        result.push(`letter-spacing: ${props.letterSpacing}`);
+    if (props.flexShrink)
+        result.push(`flex-shrink: ${props.flexShrink}`);
+    if (props.borderStyle && !props.border)
+        result.push(`border-style: ${props.borderStyle}`);
+    if (props.fontFamily)
+        result.push(`font-family: ${props.fontFamily}`);
+    if (props.gradient) {
+        result.push(`background: ${props.gradient}`);
+    }
+    return result;
+}
 /** テスト用にキャッシュをクリアする */
 export function clearRegistryCache() {
     cache = new WeakMap();

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

@@ -0,0 +1,35 @@
+export interface ResolvedVisualProperties {
+    width?: string;
+    height?: string;
+    borderRadius?: string;
+    border?: {
+        width: string;
+        color: string;
+    };
+    backgroundColor?: string;
+    color?: string;
+    fontWeight?: string;
+    fontSize?: string;
+    overflow?: string;
+    objectFit?: string;
+    aspectRatio?: string;
+    display?: string;
+    alignItems?: string;
+    justifyContent?: string;
+    opacity?: string;
+    boxShadow?: string;
+    padding?: string;
+    paddingX?: string;
+    paddingY?: string;
+    paddingTop?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+    paddingRight?: string;
+    gap?: string;
+    letterSpacing?: string;
+    flexShrink?: string;
+    borderStyle?: string;
+    fontFamily?: string;
+    gradient?: string;
+}
+export declare function resolveVisualProperties(classes: string, resolvedColors: Record<string, unknown>): ResolvedVisualProperties;

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/package.json

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