@reftrixmcp/mcp-server 0.1.7 → 0.2.0

package/dist/services/layout/style-to-tailwind-mapper.js

@@ -1,1334 +0,0 @@
-"use strict";
-// SPDX-FileCopyrightText: 2026 TKMD and Reftrix Contributors
-// SPDX-License-Identifier: AGPL-3.0-only
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.mapStyleToTailwind = mapStyleToTailwind;
-// ==========================================================
-// マッピング定義
-// ==========================================================
-/**
- * displayプロパティのマッピング
- */
-const DISPLAY_MAP = {
-    flex: "flex",
-    grid: "grid",
-    block: "block",
-    inline: "inline",
-    "inline-block": "inline-block",
-    "inline-flex": "inline-flex",
-    "inline-grid": "inline-grid",
-    none: "hidden",
-    contents: "contents",
-};
-/**
- * flexDirectionプロパティのマッピング
- */
-const FLEX_DIRECTION_MAP = {
-    row: "flex-row",
-    "row-reverse": "flex-row-reverse",
-    column: "flex-col",
-    "column-reverse": "flex-col-reverse",
-};
-/**
- * justifyContentプロパティのマッピング
- */
-const JUSTIFY_CONTENT_MAP = {
-    "flex-start": "justify-start",
-    start: "justify-start",
-    center: "justify-center",
-    "flex-end": "justify-end",
-    end: "justify-end",
-    "space-between": "justify-between",
-    "space-around": "justify-around",
-    "space-evenly": "justify-evenly",
-    stretch: "justify-stretch",
-};
-/**
- * alignItemsプロパティのマッピング
- */
-const ALIGN_ITEMS_MAP = {
-    "flex-start": "items-start",
-    start: "items-start",
-    center: "items-center",
-    "flex-end": "items-end",
-    end: "items-end",
-    stretch: "items-stretch",
-    baseline: "items-baseline",
-};
-/**
- * flexWrapプロパティのマッピング
- */
-const FLEX_WRAP_MAP = {
-    wrap: "flex-wrap",
-    nowrap: "flex-nowrap",
-    "wrap-reverse": "flex-wrap-reverse",
-};
-/**
- * positionプロパティのマッピング
- */
-const POSITION_MAP = {
-    static: "static",
-    relative: "relative",
-    absolute: "absolute",
-    fixed: "fixed",
-    sticky: "sticky",
-};
-/**
- * overflowプロパティのマッピング
- */
-const OVERFLOW_MAP = {
-    auto: "overflow-auto",
-    hidden: "overflow-hidden",
-    visible: "overflow-visible",
-    scroll: "overflow-scroll",
-    clip: "overflow-clip",
-};
-/**
- * textAlignプロパティのマッピング
- */
-const TEXT_ALIGN_MAP = {
-    left: "text-left",
-    center: "text-center",
-    right: "text-right",
-    justify: "text-justify",
-    start: "text-start",
-    end: "text-end",
-};
-/**
- * fontWeightプロパティのマッピング
- */
-const FONT_WEIGHT_MAP = {
-    "100": "font-thin",
-    "200": "font-extralight",
-    "300": "font-light",
-    "400": "font-normal",
-    normal: "font-normal",
-    "500": "font-medium",
-    "600": "font-semibold",
-    "700": "font-bold",
-    bold: "font-bold",
-    "800": "font-extrabold",
-    "900": "font-black",
-};
-/**
- * cursorプロパティのマッピング
- */
-const CURSOR_MAP = {
-    auto: "cursor-auto",
-    default: "cursor-default",
-    pointer: "cursor-pointer",
-    wait: "cursor-wait",
-    text: "cursor-text",
-    move: "cursor-move",
-    help: "cursor-help",
-    "not-allowed": "cursor-not-allowed",
-    none: "cursor-none",
-    "context-menu": "cursor-context-menu",
-    progress: "cursor-progress",
-    cell: "cursor-cell",
-    crosshair: "cursor-crosshair",
-    "vertical-text": "cursor-vertical-text",
-    alias: "cursor-alias",
-    copy: "cursor-copy",
-    "no-drop": "cursor-no-drop",
-    grab: "cursor-grab",
-    grabbing: "cursor-grabbing",
-    "all-scroll": "cursor-all-scroll",
-    "col-resize": "cursor-col-resize",
-    "row-resize": "cursor-row-resize",
-    "n-resize": "cursor-n-resize",
-    "e-resize": "cursor-e-resize",
-    "s-resize": "cursor-s-resize",
-    "w-resize": "cursor-w-resize",
-    "ne-resize": "cursor-ne-resize",
-    "nw-resize": "cursor-nw-resize",
-    "se-resize": "cursor-se-resize",
-    "sw-resize": "cursor-sw-resize",
-    "ew-resize": "cursor-ew-resize",
-    "ns-resize": "cursor-ns-resize",
-    "nesw-resize": "cursor-nesw-resize",
-    "nwse-resize": "cursor-nwse-resize",
-    "zoom-in": "cursor-zoom-in",
-    "zoom-out": "cursor-zoom-out",
-};
-/**
- * pointerEventsプロパティのマッピング
- */
-const POINTER_EVENTS_MAP = {
-    none: "pointer-events-none",
-    auto: "pointer-events-auto",
-};
-/**
- * userSelectプロパティのマッピング
- */
-const USER_SELECT_MAP = {
-    none: "select-none",
-    text: "select-text",
-    all: "select-all",
-    auto: "select-auto",
-};
-/**
- * 色の基本マッピング
- */
-const COLOR_MAP = {
-    transparent: "transparent",
-    current: "current",
-    currentColor: "current",
-    black: "black",
-    white: "white",
-    inherit: "inherit",
-};
-/**
- * HEX色コード → 色名のマッピング
- * #fff, #ffffff → white
- * #000, #000000 → black
- */
-const HEX_COLOR_MAP = {
-    // 白色
-    "#fff": "white",
-    "#ffffff": "white",
-    "#FFF": "white",
-    "#FFFFFF": "white",
-    // 黒色
-    "#000": "black",
-    "#000000": "black",
-    // 透明
-    "#0000": "transparent",
-    "#00000000": "transparent",
-};
-/**
- * lineHeightマッピング
- */
-const LINE_HEIGHT_MAP = {
-    "1": "leading-none",
-    "1.25": "leading-tight",
-    "1.375": "leading-snug",
-    "1.5": "leading-normal",
-    "1.625": "leading-relaxed",
-    "2": "leading-loose",
-    // 数値単位なし（remへの変換は複雑なため、主要な値のみサポート）
-};
-/**
- * maxWidthブレークポイントマッピング（px → Tailwindクラス）
- */
-const MAX_WIDTH_BREAKPOINT_MAP = {
-    0: "max-w-0",
-    256: "max-w-xs", // 16rem
-    288: "max-w-sm", // 18rem
-    320: "max-w-md", // 20rem
-    384: "max-w-lg", // 24rem
-    448: "max-w-xl", // 28rem
-    512: "max-w-2xl", // 32rem
-    576: "max-w-3xl", // 36rem
-    672: "max-w-4xl", // 42rem
-    768: "max-w-5xl", // 48rem
-    896: "max-w-6xl", // 56rem
-    1024: "max-w-7xl", // 64rem - 実際のTailwindは1280pxだが近似値
-    1152: "max-w-7xl", // 72rem
-    1280: "max-w-7xl", // 80rem - Tailwindのmax-w-7xl (80rem = 1280px)
-};
-/**
- * Tailwind spacing scale（0-96）
- * キー: ピクセル値、値: Tailwindクラスの数値部分
- */
-const SPACING_SCALE = {
-    0: "0",
-    1: "px", // 1px
-    2: "0.5", // 2px = 0.125rem
-    4: "1", // 4px = 0.25rem
-    6: "1.5", // 6px = 0.375rem
-    8: "2", // 8px = 0.5rem
-    10: "2.5", // 10px = 0.625rem
-    12: "3", // 12px = 0.75rem
-    14: "3.5", // 14px = 0.875rem
-    16: "4", // 16px = 1rem
-    20: "5", // 20px = 1.25rem
-    24: "6", // 24px = 1.5rem
-    28: "7", // 28px = 1.75rem
-    32: "8", // 32px = 2rem
-    36: "9", // 36px = 2.25rem
-    40: "10", // 40px = 2.5rem
-    44: "11", // 44px = 2.75rem
-    48: "12", // 48px = 3rem
-    56: "14", // 56px = 3.5rem
-    64: "16", // 64px = 4rem
-    72: "18", // 72px = 4.5rem
-    80: "20", // 80px = 5rem
-    96: "24", // 96px = 6rem
-    112: "28", // 112px = 7rem
-    128: "32", // 128px = 8rem
-    144: "36", // 144px = 9rem
-    160: "40", // 160px = 10rem
-    176: "44", // 176px = 11rem
-    192: "48", // 192px = 12rem
-    208: "52", // 208px = 13rem
-    224: "56", // 224px = 14rem
-    240: "60", // 240px = 15rem
-    256: "64", // 256px = 16rem
-    288: "72", // 288px = 18rem
-    320: "80", // 320px = 20rem
-    384: "96", // 384px = 24rem
-};
-/**
- * fontSizeマッピング（px→Tailwindクラス）
- */
-const FONT_SIZE_MAP = {
-    12: "text-xs", // 0.75rem
-    14: "text-sm", // 0.875rem
-    16: "text-base", // 1rem
-    18: "text-lg", // 1.125rem
-    20: "text-xl", // 1.25rem
-    24: "text-2xl", // 1.5rem
-    30: "text-3xl", // 1.875rem
-    36: "text-4xl", // 2.25rem
-    48: "text-5xl", // 3rem
-    60: "text-6xl", // 3.75rem
-    72: "text-7xl", // 4.5rem
-    96: "text-8xl", // 6rem
-    128: "text-9xl", // 8rem
-};
-/**
- * fontSizeマッピング（rem→Tailwindクラス）
- */
-const FONT_SIZE_REM_MAP = {
-    "0.75": "text-xs",
-    "0.875": "text-sm",
-    "1": "text-base",
-    "1.125": "text-lg",
-    "1.25": "text-xl",
-    "1.5": "text-2xl",
-    "1.875": "text-3xl",
-    "2.25": "text-4xl",
-    "3": "text-5xl",
-    "3.75": "text-6xl",
-    "4.5": "text-7xl",
-    "6": "text-8xl",
-    "8": "text-9xl",
-};
-/**
- * borderRadiusマッピング（px→Tailwindクラス）
- */
-const BORDER_RADIUS_MAP = {
-    0: "rounded-none",
-    2: "rounded-sm", // 0.125rem
-    4: "rounded", // 0.25rem
-    6: "rounded-md", // 0.375rem
-    8: "rounded-lg", // 0.5rem
-    12: "rounded-xl", // 0.75rem
-    16: "rounded-2xl", // 1rem
-    24: "rounded-3xl", // 1.5rem
-    9999: "rounded-full",
-};
-/**
- * opacityマッピング
- */
-const OPACITY_MAP = {
-    "0": "opacity-0",
-    "0.05": "opacity-5",
-    "0.1": "opacity-10",
-    "0.15": "opacity-15",
-    "0.2": "opacity-20",
-    "0.25": "opacity-25",
-    "0.3": "opacity-30",
-    "0.35": "opacity-35",
-    "0.4": "opacity-40",
-    "0.45": "opacity-45",
-    "0.5": "opacity-50",
-    "0.55": "opacity-55",
-    "0.6": "opacity-60",
-    "0.65": "opacity-65",
-    "0.7": "opacity-70",
-    "0.75": "opacity-75",
-    "0.8": "opacity-80",
-    "0.85": "opacity-85",
-    "0.9": "opacity-90",
-    "0.95": "opacity-95",
-    "1": "opacity-100",
-};
-/**
- * z-indexマッピング
- */
-const Z_INDEX_MAP = {
-    "0": "z-0",
-    "10": "z-10",
-    "20": "z-20",
-    "30": "z-30",
-    "40": "z-40",
-    "50": "z-50",
-    auto: "z-auto",
-};
-/**
- * widthのパーセンテージマッピング
- */
-const WIDTH_PERCENTAGE_MAP = {
-    "100%": "w-full",
-    "50%": "w-1/2",
-    "33.333333%": "w-1/3",
-    "33.33%": "w-1/3",
-    "66.666667%": "w-2/3",
-    "66.67%": "w-2/3",
-    "25%": "w-1/4",
-    "75%": "w-3/4",
-    "20%": "w-1/5",
-    "40%": "w-2/5",
-    "60%": "w-3/5",
-    "80%": "w-4/5",
-    "16.666667%": "w-1/6",
-    "83.333333%": "w-5/6",
-};
-// ==========================================================
-// レスポンシブブレークポイント関連
-// TailwindCSS v4.1 ブレークポイント:
-// sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px
-// ==========================================================
-/**
- * 大きな固定幅をmax-w + w-fullに変換するマッピング
- * ピクセル値 → max-wクラス
- */
-const LARGE_WIDTH_TO_MAX_W_MAP = {
-    640: "max-w-2xl", // sm相当
-    768: "max-w-3xl", // md相当
-    896: "max-w-4xl",
-    1024: "max-w-5xl", // lg相当
-    1152: "max-w-6xl",
-    1200: "max-w-7xl",
-    1280: "max-w-7xl", // xl相当
-    1536: "max-w-screen-2xl", // 2xl相当
-};
-/**
- * 大きなfontSizeのレスポンシブマッピング
- * 元のpx値 → [mobile, md, lg]のクラス配列
- */
-const LARGE_FONT_SIZE_RESPONSIVE_MAP = {
-    // 36px → text-2xl / text-3xl / text-4xl
-    36: { mobile: "text-2xl", md: "text-3xl", lg: "text-4xl" },
-    // 48px → text-3xl / text-4xl / text-5xl
-    48: { mobile: "text-3xl", md: "text-4xl", lg: "text-5xl" },
-    // 60px → text-4xl / text-5xl / text-6xl
-    60: { mobile: "text-4xl", md: "text-5xl", lg: "text-6xl" },
-    // 72px → text-5xl / text-6xl / text-7xl
-    72: { mobile: "text-5xl", md: "text-6xl", lg: "text-7xl" },
-    // 96px → text-6xl / text-7xl / text-8xl
-    96: { mobile: "text-6xl", md: "text-7xl", lg: "text-8xl" },
-    // 128px → text-7xl / text-8xl / text-9xl
-    128: { mobile: "text-7xl", md: "text-8xl", lg: "text-9xl" },
-};
-/**
- * 大きなpaddingのレスポンシブマッピング
- * 元のpx値 → [mobile, md, lg]のクラス配列
- */
-const LARGE_PADDING_RESPONSIVE_MAP = {
-    // 32px → p-4 / p-6 / p-8
-    32: { mobile: "p-4", md: "p-6", lg: "p-8" },
-    // 40px → p-4 / p-8 / p-10
-    40: { mobile: "p-4", md: "p-8", lg: "p-10" },
-    // 48px → p-4 / p-8 / p-12
-    48: { mobile: "p-4", md: "p-8", lg: "p-12" },
-    // 56px → p-5 / p-10 / p-14
-    56: { mobile: "p-5", md: "p-10", lg: "p-14" },
-    // 64px → p-6 / p-12 / p-16
-    64: { mobile: "p-6", md: "p-12", lg: "p-16" },
-    // 80px → p-6 / p-14 / p-20
-    80: { mobile: "p-6", md: "p-14", lg: "p-20" },
-    // 96px → p-8 / p-16 / p-24
-    96: { mobile: "p-8", md: "p-16", lg: "p-24" },
-};
-/**
- * レスポンシブ変換のしきい値（これ以上の値でレスポンシブ変換を適用）
- */
-const RESPONSIVE_THRESHOLDS = {
-    /** paddingのしきい値（px） - これ以上でレスポンシブ変換 */
-    padding: 32,
-    /** fontSizeのしきい値（px） - これ以上でレスポンシブ変換 */
-    fontSize: 36,
-    /** widthのしきい値（px） - これ以上でmax-w + w-fullに変換 */
-    width: 640,
-};
-/**
- * heightのパーセンテージマッピング
- */
-const HEIGHT_PERCENTAGE_MAP = {
-    "100%": "h-full",
-    "50%": "h-1/2",
-    "33.333333%": "h-1/3",
-    "66.666667%": "h-2/3",
-    "25%": "h-1/4",
-    "75%": "h-3/4",
-    "20%": "h-1/5",
-    "40%": "h-2/5",
-    "60%": "h-3/5",
-    "80%": "h-4/5",
-    "16.666667%": "h-1/6",
-    "83.333333%": "h-5/6",
-};
-// ==========================================================
-// ヘルパー関数
-// ==========================================================
-/**
- * CSS変数またはcalc()を含むかチェック
- */
-function containsCssFunction(value) {
-    return value.includes("var(") || value.includes("calc(") || value.includes("clamp(");
-}
-/**
- * ピクセル値を数値に変換
- */
-function parsePixelValue(value) {
-    // "0"の場合
-    if (value === "0") {
-        return 0;
-    }
-    // "16px"形式
-    const pxMatch = value.match(/^(-?\d+(?:\.\d+)?)px$/);
-    if (pxMatch && pxMatch[1] !== undefined) {
-        return parseFloat(pxMatch[1]);
-    }
-    // "1rem"形式（1rem = 16px）
-    const remMatch = value.match(/^(-?\d+(?:\.\d+)?)rem$/);
-    if (remMatch && remMatch[1] !== undefined) {
-        return parseFloat(remMatch[1]) * 16;
-    }
-    return null;
-}
-/**
- * rem値を文字列として取得（小数点対応）
- */
-function parseRemValue(value) {
-    const remMatch = value.match(/^(-?\d+(?:\.\d+)?)rem$/);
-    if (remMatch && remMatch[1] !== undefined) {
-        return remMatch[1];
-    }
-    return null;
-}
-/**
- * スペーシング値をTailwindクラスの数値部分に変換
- */
-function convertSpacingValue(value) {
-    // CSS変数やcalc()を含む場合は変換不可
-    if (containsCssFunction(value)) {
-        return null;
-    }
-    // autoの場合
-    if (value === "auto") {
-        return "auto";
-    }
-    // "0"の場合
-    if (value === "0") {
-        return "0";
-    }
-    const pixels = parsePixelValue(value);
-    if (pixels === null) {
-        return null;
-    }
-    const tailwindValue = SPACING_SCALE[pixels];
-    if (tailwindValue !== undefined) {
-        return tailwindValue;
-    }
-    return null;
-}
-/**
- * displayプロパティを変換
- */
-function convertDisplay(value) {
-    return DISPLAY_MAP[value] || null;
-}
-/**
- * flexDirectionプロパティを変換
- */
-function convertFlexDirection(value) {
-    return FLEX_DIRECTION_MAP[value] || null;
-}
-/**
- * justifyContentプロパティを変換
- */
-function convertJustifyContent(value) {
-    return JUSTIFY_CONTENT_MAP[value] || null;
-}
-/**
- * alignItemsプロパティを変換
- */
-function convertAlignItems(value) {
-    return ALIGN_ITEMS_MAP[value] || null;
-}
-/**
- * flexWrapプロパティを変換
- */
-function convertFlexWrap(value) {
-    return FLEX_WRAP_MAP[value] || null;
-}
-/**
- * gapプロパティを変換
- */
-function convertGap(value, prefix = "gap") {
-    const spacingValue = convertSpacingValue(value);
-    if (spacingValue !== null) {
-        return `${prefix}-${spacingValue}`;
-    }
-    return null;
-}
-/**
- * grid-template-columnsプロパティを変換
- *
- * サポートするパターン:
- * - repeat(N, 1fr) → grid-cols-N (N = 1-12)
- * - repeat(N, minmax(0, 1fr)) → grid-cols-N (N = 1-12)
- * - none → grid-cols-none
- * - subgrid → grid-cols-subgrid
- *
- * @param value - grid-template-columnsの値
- * @returns Tailwindクラスまたはnull
- */
-function convertGridTemplateColumns(value) {
-    const normalizedValue = value.trim().toLowerCase();
-    // noneの場合
-    if (normalizedValue === "none") {
-        return "grid-cols-none";
-    }
-    // subgridの場合
-    if (normalizedValue === "subgrid") {
-        return "grid-cols-subgrid";
-    }
-    // repeat(N, 1fr) パターン
-    const repeatMatch = normalizedValue.match(/^repeat\s*\(\s*(\d+)\s*,\s*(1fr|minmax\s*\(\s*0\s*,\s*1fr\s*\))\s*\)$/);
-    if (repeatMatch && repeatMatch[1]) {
-        const count = parseInt(repeatMatch[1], 10);
-        // Tailwindは1-12列をサポート
-        if (count >= 1 && count <= 12) {
-            return `grid-cols-${count}`;
-        }
-    }
-    // 1fr 1fr 1fr... パターン（スペース区切りの1fr）
-    const frParts = normalizedValue.split(/\s+/).filter(Boolean);
-    if (frParts.every((part) => part === "1fr")) {
-        const count = frParts.length;
-        if (count >= 1 && count <= 12) {
-            return `grid-cols-${count}`;
-        }
-    }
-    return null;
-}
-/**
- * grid-template-rowsプロパティを変換
- *
- * サポートするパターン:
- * - repeat(N, 1fr) → grid-rows-N (N = 1-12)
- * - repeat(N, minmax(0, 1fr)) → grid-rows-N (N = 1-12)
- * - none → grid-rows-none
- * - subgrid → grid-rows-subgrid
- *
- * @param value - grid-template-rowsの値
- * @returns Tailwindクラスまたはnull
- */
-function convertGridTemplateRows(value) {
-    const normalizedValue = value.trim().toLowerCase();
-    // noneの場合
-    if (normalizedValue === "none") {
-        return "grid-rows-none";
-    }
-    // subgridの場合
-    if (normalizedValue === "subgrid") {
-        return "grid-rows-subgrid";
-    }
-    // repeat(N, 1fr) パターン
-    const repeatMatch = normalizedValue.match(/^repeat\s*\(\s*(\d+)\s*,\s*(1fr|minmax\s*\(\s*0\s*,\s*1fr\s*\))\s*\)$/);
-    if (repeatMatch && repeatMatch[1]) {
-        const count = parseInt(repeatMatch[1], 10);
-        // Tailwindは1-12行をサポート
-        if (count >= 1 && count <= 12) {
-            return `grid-rows-${count}`;
-        }
-    }
-    // 1fr 1fr 1fr... パターン（スペース区切りの1fr）
-    const frParts = normalizedValue.split(/\s+/).filter(Boolean);
-    if (frParts.every((part) => part === "1fr")) {
-        const count = frParts.length;
-        if (count >= 1 && count <= 12) {
-            return `grid-rows-${count}`;
-        }
-    }
-    return null;
-}
-/**
- * padding/marginプロパティを変換
- */
-function convertSpacing(value, prefix) {
-    const spacingValue = convertSpacingValue(value);
-    if (spacingValue !== null) {
-        return `${prefix}-${spacingValue}`;
-    }
-    return null;
-}
-/**
- * widthプロパティを変換
- */
-function convertWidth(value, prefix = "w") {
-    // CSS変数やcalc()を含む場合は変換不可
-    if (containsCssFunction(value)) {
-        return null;
-    }
-    // 特殊な値
-    if (value === "0")
-        return `${prefix}-0`;
-    if (value === "auto")
-        return `${prefix}-auto`;
-    if (value === "fit-content")
-        return `${prefix}-fit`;
-    if (value === "max-content")
-        return `${prefix}-max`;
-    if (value === "min-content")
-        return `${prefix}-min`;
-    if (value === "100vw")
-        return `${prefix}-screen`;
-    if (value === "100dvw")
-        return `${prefix}-dvw`;
-    if (value === "100svw")
-        return `${prefix}-svw`;
-    if (value === "100lvw")
-        return `${prefix}-lvw`;
-    // パーセンテージ
-    const percentageMap = prefix === "w" ? WIDTH_PERCENTAGE_MAP : HEIGHT_PERCENTAGE_MAP;
-    if (percentageMap[value]) {
-        return percentageMap[value];
-    }
-    // ピクセル値
-    const pixels = parsePixelValue(value);
-    if (pixels !== null && SPACING_SCALE[pixels] !== undefined) {
-        return `${prefix}-${SPACING_SCALE[pixels]}`;
-    }
-    return null;
-}
-/**
- * heightプロパティを変換
- */
-function convertHeight(value, prefix = "h") {
-    // CSS変数やcalc()を含む場合は変換不可
-    if (containsCssFunction(value)) {
-        return null;
-    }
-    // 特殊な値
-    if (value === "0")
-        return `${prefix}-0`;
-    if (value === "auto")
-        return `${prefix}-auto`;
-    if (value === "fit-content")
-        return `${prefix}-fit`;
-    if (value === "max-content")
-        return `${prefix}-max`;
-    if (value === "min-content")
-        return `${prefix}-min`;
-    if (value === "100vh")
-        return `${prefix}-screen`;
-    if (value === "100dvh")
-        return `${prefix}-dvh`;
-    if (value === "100svh")
-        return `${prefix}-svh`;
-    if (value === "100lvh")
-        return `${prefix}-lvh`;
-    // パーセンテージ
-    const percentageMap = HEIGHT_PERCENTAGE_MAP;
-    const percentValue = percentageMap[value];
-    if (percentValue) {
-        return percentValue.replace("h-", `${prefix}-`);
-    }
-    // ピクセル値
-    const pixels = parsePixelValue(value);
-    if (pixels !== null && SPACING_SCALE[pixels] !== undefined) {
-        return `${prefix}-${SPACING_SCALE[pixels]}`;
-    }
-    return null;
-}
-/**
- * min/max width/heightプロパティを変換
- */
-function convertMinMaxSize(value, prefix) {
-    // CSS変数やcalc()を含む場合は変換不可
-    if (containsCssFunction(value)) {
-        return null;
-    }
-    // 特殊な値
-    if (value === "0")
-        return `${prefix}-0`;
-    if (value === "100%")
-        return `${prefix}-full`;
-    if (value === "100vh")
-        return `${prefix}-screen`;
-    if (value === "100dvh")
-        return `${prefix}-dvh`;
-    if (value === "none")
-        return `${prefix}-none`;
-    if (value === "fit-content")
-        return `${prefix}-fit`;
-    if (value === "max-content")
-        return `${prefix}-max`;
-    if (value === "min-content")
-        return `${prefix}-min`;
-    // ピクセル値
-    const pixels = parsePixelValue(value);
-    if (pixels !== null) {
-        // max-widthの場合、ブレークポイントマッピングを優先
-        if (prefix === "max-w" && MAX_WIDTH_BREAKPOINT_MAP[pixels] !== undefined) {
-            return MAX_WIDTH_BREAKPOINT_MAP[pixels];
-        }
-        // 標準スペーシングスケール
-        if (SPACING_SCALE[pixels] !== undefined) {
-            return `${prefix}-${SPACING_SCALE[pixels]}`;
-        }
-    }
-    return null;
-}
-/**
- * HEX色コードを正規化して色名に変換
- */
-function normalizeHexColor(value) {
-    // 小文字に正規化
-    const normalized = value.toLowerCase();
-    // HEXマッピングを確認
-    if (HEX_COLOR_MAP[normalized]) {
-        return HEX_COLOR_MAP[normalized];
-    }
-    // 大文字版も確認
-    if (HEX_COLOR_MAP[value]) {
-        return HEX_COLOR_MAP[value];
-    }
-    return null;
-}
-/**
- * backgroundColorプロパティを変換
- */
-function convertBackgroundColor(value) {
-    // CSS変数を含む場合は変換不可
-    if (containsCssFunction(value)) {
-        return null;
-    }
-    // まずCOLOR_MAPを確認
-    const colorName = COLOR_MAP[value];
-    if (colorName) {
-        return `bg-${colorName}`;
-    }
-    // HEX色コードを確認
-    if (value.startsWith("#")) {
-        const hexColorName = normalizeHexColor(value);
-        if (hexColorName) {
-            return `bg-${hexColorName}`;
-        }
-        // 不明なHEX色は変換不可
-        return null;
-    }
-    // rgb, hsl等は変換不可
-    if (value.startsWith("rgb") || value.startsWith("hsl") || value.startsWith("oklch")) {
-        return null;
-    }
-    return null;
-}
-/**
- * colorプロパティを変換
- */
-function convertTextColor(value) {
-    // CSS変数を含む場合は変換不可
-    if (containsCssFunction(value)) {
-        return null;
-    }
-    // まずCOLOR_MAPを確認
-    const colorName = COLOR_MAP[value];
-    if (colorName) {
-        return `text-${colorName}`;
-    }
-    // HEX色コードを確認
-    if (value.startsWith("#")) {
-        const hexColorName = normalizeHexColor(value);
-        if (hexColorName) {
-            return `text-${hexColorName}`;
-        }
-        // 不明なHEX色は変換不可
-        return null;
-    }
-    // rgb, hsl等は変換不可
-    if (value.startsWith("rgb") || value.startsWith("hsl") || value.startsWith("oklch")) {
-        return null;
-    }
-    return null;
-}
-/**
- * lineHeightプロパティを変換
- */
-function convertLineHeight(value) {
-    // CSS変数を含む場合は変換不可
-    if (containsCssFunction(value)) {
-        return null;
-    }
-    // 数値（単位なし）の場合
-    if (LINE_HEIGHT_MAP[value]) {
-        return LINE_HEIGHT_MAP[value];
-    }
-    return null;
-}
-/**
- * fontSizeプロパティを変換
- */
-function convertFontSize(value) {
-    // CSS変数やcalc()を含む場合は変換不可
-    if (containsCssFunction(value)) {
-        return null;
-    }
-    // ピクセル値
-    const pixels = parsePixelValue(value);
-    if (pixels !== null && FONT_SIZE_MAP[pixels]) {
-        return FONT_SIZE_MAP[pixels];
-    }
-    // rem値
-    const remValue = parseRemValue(value);
-    if (remValue !== null && FONT_SIZE_REM_MAP[remValue]) {
-        return FONT_SIZE_REM_MAP[remValue];
-    }
-    return null;
-}
-/**
- * fontWeightプロパティを変換
- */
-function convertFontWeight(value) {
-    return FONT_WEIGHT_MAP[value] || null;
-}
-/**
- * textAlignプロパティを変換
- */
-function convertTextAlign(value) {
-    return TEXT_ALIGN_MAP[value] || null;
-}
-/**
- * borderRadiusプロパティを変換
- */
-function convertBorderRadius(value) {
-    // CSS変数やcalc()を含む場合は変換不可
-    if (containsCssFunction(value)) {
-        return null;
-    }
-    // 50%（円形）
-    if (value === "50%") {
-        return "rounded-full";
-    }
-    // "0"の場合
-    if (value === "0") {
-        return "rounded-none";
-    }
-    // ピクセル値
-    const pixels = parsePixelValue(value);
-    if (pixels !== null && BORDER_RADIUS_MAP[pixels]) {
-        return BORDER_RADIUS_MAP[pixels];
-    }
-    return null;
-}
-/**
- * positionプロパティを変換
- */
-function convertPosition(value) {
-    return POSITION_MAP[value] || null;
-}
-/**
- * opacityプロパティを変換
- */
-function convertOpacity(value) {
-    return OPACITY_MAP[value] || null;
-}
-/**
- * overflowプロパティを変換
- */
-function convertOverflow(value, axis = "") {
-    const baseClass = OVERFLOW_MAP[value];
-    if (baseClass) {
-        // overflow-hidden → overflow-y-hidden
-        return baseClass.replace("overflow", `overflow${axis}`);
-    }
-    return null;
-}
-/**
- * zIndexプロパティを変換
- */
-function convertZIndex(value) {
-    return Z_INDEX_MAP[value] || null;
-}
-/**
- * cursorプロパティを変換
- */
-function convertCursor(value) {
-    return CURSOR_MAP[value] || null;
-}
-/**
- * pointerEventsプロパティを変換
- */
-function convertPointerEvents(value) {
-    return POINTER_EVENTS_MAP[value] || null;
-}
-/**
- * userSelectプロパティを変換
- */
-function convertUserSelect(value) {
-    return USER_SELECT_MAP[value] || null;
-}
-// ==========================================================
-// レスポンシブ変換ヘルパー関数
-// ==========================================================
-/**
- * 大きな固定幅をmax-w + w-fullに変換（レスポンシブ対応）
- * @param pixels - ピクセル値
- * @returns 変換されたクラス配列、または null
- */
-function convertLargeWidthResponsive(pixels) {
-    if (pixels < RESPONSIVE_THRESHOLDS.width) {
-        return null;
-    }
-    // 最も近いmax-wクラスを見つける
-    const breakpoints = Object.keys(LARGE_WIDTH_TO_MAX_W_MAP)
-        .map(Number)
-        .sort((a, b) => a - b);
-    let maxWClass = "max-w-7xl"; // デフォルト
-    for (const bp of breakpoints) {
-        if (pixels <= bp) {
-            maxWClass = LARGE_WIDTH_TO_MAX_W_MAP[bp] ?? "max-w-7xl";
-            break;
-        }
-    }
-    // 最大値を超えている場合は最大のクラスを使用
-    if (pixels > breakpoints[breakpoints.length - 1]) {
-        maxWClass = LARGE_WIDTH_TO_MAX_W_MAP[breakpoints[breakpoints.length - 1]] ?? "max-w-7xl";
-    }
-    return [maxWClass, "w-full"];
-}
-/**
- * 大きなfontSizeをレスポンシブクラスに変換
- * @param pixels - ピクセル値
- * @returns 変換されたクラス配列、または null
- */
-function convertLargeFontSizeResponsive(pixels) {
-    if (pixels < RESPONSIVE_THRESHOLDS.fontSize) {
-        return null;
-    }
-    // 最も近いマッピングを見つける
-    const sizes = Object.keys(LARGE_FONT_SIZE_RESPONSIVE_MAP)
-        .map(Number)
-        .sort((a, b) => a - b);
-    let mapping = LARGE_FONT_SIZE_RESPONSIVE_MAP[sizes[0]];
-    for (const size of sizes) {
-        if (pixels <= size) {
-            mapping = LARGE_FONT_SIZE_RESPONSIVE_MAP[size];
-            break;
-        }
-    }
-    // 最大値を超えている場合は最大のマッピングを使用
-    if (pixels > sizes[sizes.length - 1]) {
-        mapping = LARGE_FONT_SIZE_RESPONSIVE_MAP[sizes[sizes.length - 1]];
-    }
-    if (!mapping) {
-        return null;
-    }
-    return [mapping.mobile, `md:${mapping.md}`, `lg:${mapping.lg}`];
-}
-/**
- * 大きなpaddingをレスポンシブクラスに変換
- * @param pixels - ピクセル値
- * @param prefix - プレフィックス（p, pt, pb, pl, pr, px, py）
- * @returns 変換されたクラス配列、または null
- */
-function convertLargePaddingResponsive(pixels, prefix = "p") {
-    if (pixels < RESPONSIVE_THRESHOLDS.padding) {
-        return null;
-    }
-    // 最も近いマッピングを見つける
-    const sizes = Object.keys(LARGE_PADDING_RESPONSIVE_MAP)
-        .map(Number)
-        .sort((a, b) => a - b);
-    let mapping = LARGE_PADDING_RESPONSIVE_MAP[sizes[0]];
-    for (const size of sizes) {
-        if (pixels <= size) {
-            mapping = LARGE_PADDING_RESPONSIVE_MAP[size];
-            break;
-        }
-    }
-    // 最大値を超えている場合は最大のマッピングを使用
-    if (pixels > sizes[sizes.length - 1]) {
-        mapping = LARGE_PADDING_RESPONSIVE_MAP[sizes[sizes.length - 1]];
-    }
-    if (!mapping) {
-        return null;
-    }
-    // プレフィックスを適用（p → pt, pb, px, py等）
-    const mobileClass = mapping.mobile.replace(/^p-/, `${prefix}-`);
-    const mdClass = mapping.md.replace(/^p-/, `${prefix}-`);
-    const lgClass = mapping.lg.replace(/^p-/, `${prefix}-`);
-    return [mobileClass, `md:${mdClass}`, `lg:${lgClass}`];
-}
-/**
- * flexDirection: rowをモバイルファーストに変換
- * @returns 変換されたクラス配列
- */
-function convertFlexDirectionResponsive() {
-    return ["flex-col", "md:flex-row"];
-}
-// ==========================================================
-// メイン関数
-// ==========================================================
-/**
- * スタイルオブジェクトをTailwindCSSクラスに変換する
- *
- * @param styles - 変換するスタイルオブジェクト（キャメルケースのCSSプロパティ）
- * @param options - 変換オプション（レスポンシブ等）
- * @returns 変換されたTailwindクラスと残りのスタイル
- *
- * @example
- * ```typescript
- * const result = mapStyleToTailwind({
- *   display: 'flex',
- *   flexDirection: 'column',
- *   justifyContent: 'center',
- *   padding: '16px',
- * });
- * // result.tailwindClasses = ['flex', 'flex-col', 'justify-center', 'p-4']
- * // result.remainingStyles = {}
- *
- * // レスポンシブ変換（デフォルト有効）
- * const result2 = mapStyleToTailwind({
- *   width: '1200px',
- *   padding: '40px',
- *   fontSize: '48px',
- *   flexDirection: 'row',
- * }, { responsive: true });
- * // result2.tailwindClasses = [
- * //   'max-w-7xl', 'w-full',
- * //   'p-4', 'md:p-8', 'lg:p-10',
- * //   'text-3xl', 'md:text-4xl', 'lg:text-5xl',
- * //   'flex-col', 'md:flex-row'
- * // ]
- * ```
- */
-function mapStyleToTailwind(styles, options = {}) {
-    // デフォルトはfalse（後方互換性）、layout.generate_codeツールからはtrue指定される
-    const { responsive = false } = options;
-    const tailwindClasses = [];
-    const remainingStyles = {};
-    for (const [property, value] of Object.entries(styles)) {
-        let converted = null;
-        let responsiveClasses = null;
-        switch (property) {
-            // display系
-            case "display":
-                converted = convertDisplay(value);
-                break;
-            // flexbox系
-            case "flexDirection":
-                // レスポンシブ対応: row → flex-col md:flex-row
-                if (responsive && value === "row") {
-                    responsiveClasses = convertFlexDirectionResponsive();
-                }
-                else {
-                    converted = convertFlexDirection(value);
-                }
-                break;
-            case "justifyContent":
-                converted = convertJustifyContent(value);
-                break;
-            case "alignItems":
-                converted = convertAlignItems(value);
-                break;
-            case "flexWrap":
-                converted = convertFlexWrap(value);
-                break;
-            case "gap":
-                converted = convertGap(value);
-                break;
-            case "rowGap":
-                converted = convertGap(value, "gap-y");
-                break;
-            case "columnGap":
-                converted = convertGap(value, "gap-x");
-                break;
-            // grid系
-            case "gridTemplateColumns":
-                converted = convertGridTemplateColumns(value);
-                break;
-            case "gridTemplateRows":
-                converted = convertGridTemplateRows(value);
-                break;
-            // spacing系 - padding
-            case "padding": {
-                // レスポンシブ対応: 大きなpaddingはレスポンシブクラスに変換
-                if (responsive) {
-                    const pixels = parsePixelValue(value);
-                    if (pixels !== null && pixels >= RESPONSIVE_THRESHOLDS.padding) {
-                        responsiveClasses = convertLargePaddingResponsive(pixels, "p");
-                    }
-                }
-                if (!responsiveClasses) {
-                    converted = convertSpacing(value, "p");
-                }
-                break;
-            }
-            case "paddingTop":
-                converted = convertSpacing(value, "pt");
-                break;
-            case "paddingBottom":
-                converted = convertSpacing(value, "pb");
-                break;
-            case "paddingLeft":
-                converted = convertSpacing(value, "pl");
-                break;
-            case "paddingRight":
-                converted = convertSpacing(value, "pr");
-                break;
-            case "paddingInline":
-                converted = convertSpacing(value, "px");
-                break;
-            case "paddingBlock":
-                converted = convertSpacing(value, "py");
-                break;
-            // spacing系 - margin
-            case "margin":
-                converted = convertSpacing(value, "m");
-                break;
-            case "marginTop":
-                converted = convertSpacing(value, "mt");
-                break;
-            case "marginBottom":
-                converted = convertSpacing(value, "mb");
-                break;
-            case "marginLeft":
-                converted = convertSpacing(value, "ml");
-                break;
-            case "marginRight":
-                converted = convertSpacing(value, "mr");
-                break;
-            case "marginInline":
-                converted = convertSpacing(value, "mx");
-                break;
-            case "marginBlock":
-                converted = convertSpacing(value, "my");
-                break;
-            // sizing系 - width
-            case "width": {
-                // レスポンシブ対応: 大きな固定幅はmax-w + w-fullに変換
-                if (responsive) {
-                    const pixels = parsePixelValue(value);
-                    if (pixels !== null && pixels >= RESPONSIVE_THRESHOLDS.width) {
-                        responsiveClasses = convertLargeWidthResponsive(pixels);
-                    }
-                }
-                if (!responsiveClasses) {
-                    converted = convertWidth(value, "w");
-                }
-                break;
-            }
-            case "minWidth":
-                converted = convertMinMaxSize(value, "min-w");
-                break;
-            case "maxWidth":
-                converted = convertMinMaxSize(value, "max-w");
-                break;
-            // sizing系 - height
-            case "height":
-                converted = convertHeight(value, "h");
-                break;
-            case "minHeight":
-                converted = convertMinMaxSize(value, "min-h");
-                break;
-            case "maxHeight":
-                converted = convertMinMaxSize(value, "max-h");
-                break;
-            // color系
-            case "backgroundColor":
-                converted = convertBackgroundColor(value);
-                break;
-            case "color":
-                converted = convertTextColor(value);
-                break;
-            // typography系
-            case "fontSize": {
-                // レスポンシブ対応: 大きなfontSizeはレスポンシブクラスに変換
-                if (responsive) {
-                    const pixels = parsePixelValue(value);
-                    if (pixels !== null && pixels >= RESPONSIVE_THRESHOLDS.fontSize) {
-                        responsiveClasses = convertLargeFontSizeResponsive(pixels);
-                    }
-                }
-                if (!responsiveClasses) {
-                    converted = convertFontSize(value);
-                }
-                break;
-            }
-            case "fontWeight":
-                converted = convertFontWeight(value);
-                break;
-            case "textAlign":
-                converted = convertTextAlign(value);
-                break;
-            case "lineHeight":
-                converted = convertLineHeight(value);
-                break;
-            // border系
-            case "borderRadius":
-                converted = convertBorderRadius(value);
-                break;
-            // position系
-            case "position":
-                converted = convertPosition(value);
-                break;
-            // opacity系
-            case "opacity":
-                converted = convertOpacity(value);
-                break;
-            // overflow系
-            case "overflow":
-                converted = convertOverflow(value);
-                break;
-            case "overflowX":
-                converted = convertOverflow(value, "-x");
-                break;
-            case "overflowY":
-                converted = convertOverflow(value, "-y");
-                break;
-            // z-index系
-            case "zIndex":
-                converted = convertZIndex(value);
-                break;
-            // cursor系
-            case "cursor":
-                converted = convertCursor(value);
-                break;
-            // pointer-events系
-            case "pointerEvents":
-                converted = convertPointerEvents(value);
-                break;
-            // user-select系
-            case "userSelect":
-                converted = convertUserSelect(value);
-                break;
-            default:
-                // 未対応のプロパティ
-                break;
-        }
-        // レスポンシブクラス配列があればすべて追加
-        if (responsiveClasses !== null && responsiveClasses.length > 0) {
-            tailwindClasses.push(...responsiveClasses);
-        }
-        else if (converted !== null) {
-            tailwindClasses.push(converted);
-        }
-        else {
-            remainingStyles[property] = value;
-        }
-    }
-    // 後処理: ml-auto + mr-auto → mx-auto の最適化
-    const hasMarginLeftAuto = tailwindClasses.includes("ml-auto");
-    const hasMarginRightAuto = tailwindClasses.includes("mr-auto");
-    if (hasMarginLeftAuto && hasMarginRightAuto) {
-        // ml-autoとmr-autoの両方を削除し、mx-autoに置き換え
-        const optimizedClasses = tailwindClasses.filter((cls) => cls !== "ml-auto" && cls !== "mr-auto");
-        optimizedClasses.push("mx-auto");
-        return {
-            tailwindClasses: optimizedClasses,
-            remainingStyles,
-        };
-    }
-    return {
-        tailwindClasses,
-        remainingStyles,
-    };
-}
-//# sourceMappingURL=style-to-tailwind-mapper.js.map