@lism-css/mcp 0.1.0 → 0.2.1

package/dist/data/tokens.json

@@ -3,119 +3,120 @@
 		"category": "color",
 		"description": "セマンティックカラートークン。サイト全体のカラー設計に使用。",
 		"tokens": [
-			{ "name": "--base", "value": "サイトの基本背景色", "description": "ベース背景色" },
-			{ "name": "--base-2", "value": "サイトの第2背景色", "description": "代替背景色" },
-			{ "name": "--text", "value": "メインのテキストカラー", "description": "基本テキスト色" },
-			{ "name": "--text-2", "value": "サブテキストカラー", "description": "補助テキスト色" },
-			{ "name": "--divider", "value": "ボーダー・区切り線の色", "description": "区切り線色" },
-			{ "name": "--link", "value": "リンクテキスト色", "description": "リンク色" },
-			{ "name": "--brand", "value": "ブランドカラー", "description": "ブランド色" },
-			{ "name": "--accent", "value": "アクセントカラー", "description": "アクセント色" }
+			{ "name": "--base", "value": "hsl(224 4% 99%)", "description": "ベース背景色" },
+			{ "name": "--base-2", "value": "hsl(224 8% 95%)", "description": "代替背景色" },
+			{ "name": "--text", "value": "hsl(224 4% 8%)", "description": "基本テキスト色" },
+			{ "name": "--text-2", "value": "hsl(224 6% 32%)", "description": "補助テキスト色" },
+			{ "name": "--divider", "value": "hsl(224 8% 88%)", "description": "区切り線色" },
+			{ "name": "--link", "value": "oklch(50% 0.3 240)", "description": "リンク色" },
+			{ "name": "--brand", "value": "#1e5f8c", "description": "ブランド色" },
+			{ "name": "--accent", "value": "#d94a6a", "description": "アクセント色" }
 		]
 	},
 	{
 		"category": "color",
-		"description": "パレットカラートークン。装飾やバリエーションに使用。",
+		"description": "パレットカラートークン。OKLCHで定義。--L（明度）と--C（彩度）の基準値を調整するとパレット全体の色味を変更可能。",
 		"tokens": [
-			{ "name": "--red", "value": "赤系カラー" },
-			{ "name": "--blue", "value": "青系カラー" },
-			{ "name": "--green", "value": "緑系カラー" },
-			{ "name": "--yellow", "value": "黄系カラー" },
-			{ "name": "--purple", "value": "紫系カラー" },
-			{ "name": "--orange", "value": "オレンジ系カラー" },
-			{ "name": "--pink", "value": "ピンク系カラー" },
-			{ "name": "--gray", "value": "グレー系カラー" },
-			{ "name": "--white", "value": "白" },
-			{ "name": "--black", "value": "黒" },
+			{ "name": "--red", "value": "oklch(var(--L) var(--C) 20)" },
+			{ "name": "--orange", "value": "oklch(calc(var(--L) + 4%) calc(var(--C) - 0.01) 52)" },
+			{ "name": "--yellow", "value": "oklch(calc(var(--L) + 12%) calc(var(--C) - 0.025) 84)" },
+			{ "name": "--green", "value": "oklch(calc(var(--L) + 4%) calc(var(--C) - 0.02) 152)" },
+			{ "name": "--blue", "value": "oklch(calc(var(--L) - 2%) calc(var(--C) + 0.01) 260)" },
+			{ "name": "--purple", "value": "oklch(calc(var(--L) - 4%) calc(var(--C) + 0.02) 292)" },
+			{ "name": "--pink", "value": "oklch(calc(var(--L) + 2%) calc(var(--C) + 0.02) 348)" },
+			{ "name": "--gray", "value": "oklch(calc(var(--L) - 4%) 0.04 256)" },
+			{ "name": "--black", "value": "#000" },
+			{ "name": "--white", "value": "#fff" },
 			{ "name": "--keycolor", "value": "コンポーネントごとのキーカラー" }
 		]
 	},
 	{
 		"category": "spacing",
-		"description": "スペーシングトークン。padding, margin, gap 等で使用。CSS変数名は --s{値}。",
+		"description": "スペーシングトークン。padding, margin, gap 等で使用。CSS変数名は --s{値}。フィボナッチ数列ベースのスケーリング。--s-unit（≒8px）を基準とする。",
 		"tokens": [
-			{ "name": "--s5", "value": "最小の余白 (step 5)" },
-			{ "name": "--s10", "value": "余白 step 10" },
-			{ "name": "--s15", "value": "余白 step 15" },
-			{ "name": "--s20", "value": "余白 step 20" },
-			{ "name": "--s30", "value": "余白 step 30" },
-			{ "name": "--s40", "value": "余白 step 40" },
-			{ "name": "--s50", "value": "余白 step 50" },
-			{ "name": "--s60", "value": "余白 step 60" },
-			{ "name": "--s70", "value": "余白 step 70" },
-			{ "name": "--s80", "value": "最大の余白 (step 80)" }
+			{ "name": "--s5", "value": "calc(0.5 * var(--s-unit))", "description": "≒ 4px" },
+			{ "name": "--s10", "value": "var(--s-unit)", "description": "≒ 8px" },
+			{ "name": "--s15", "value": "calc(1.5 * var(--s-unit))", "description": "≒ 12px" },
+			{ "name": "--s20", "value": "calc(2 * var(--s-unit))", "description": "≒ 16px" },
+			{ "name": "--s30", "value": "calc(3 * var(--s-unit))", "description": "≒ 24px" },
+			{ "name": "--s40", "value": "calc(5 * var(--s-unit))", "description": "≒ 40px" },
+			{ "name": "--s50", "value": "calc(8 * var(--s-unit))", "description": "≒ 64px" },
+			{ "name": "--s60", "value": "calc(13 * var(--s-unit))", "description": "≒ 104px" },
+			{ "name": "--s70", "value": "calc(21 * var(--s-unit))", "description": "≒ 168px" },
+			{ "name": "--s80", "value": "calc(34 * var(--s-unit))", "description": "≒ 272px" }
 		]
 	},
 	{
 		"category": "fontSize",
-		"description": "フォントサイズトークン。CSS変数名は --fz--{値}。",
+		"description": "フォントサイズトークン。CSS変数名は --fz--{値}。分子8の調和数列（倍音列）ベースのスケーリング。",
 		"tokens": [
-			{ "name": "--fz--root", "value": "ルートのフォントサイズ" },
-			{ "name": "--fz--base", "value": "本文の基本フォントサイズ" },
-			{ "name": "--fz--5xl", "value": "最大サイズ" },
-			{ "name": "--fz--4xl", "value": "特大サイズ" },
-			{ "name": "--fz--3xl", "value": "3XLサイズ" },
-			{ "name": "--fz--2xl", "value": "2XLサイズ" },
-			{ "name": "--fz--xl", "value": "XLサイズ" },
-			{ "name": "--fz--l", "value": "Lサイズ" },
-			{ "name": "--fz--m", "value": "Mサイズ" },
-			{ "name": "--fz--s", "value": "Sサイズ" },
-			{ "name": "--fz--xs", "value": "XSサイズ" },
-			{ "name": "--fz--2xs", "value": "最小サイズ" }
+			{ "name": "--fz--base", "value": "var(--REM)", "description": "本文の基本フォントサイズ（≒ 1rem）" },
+			{ "name": "--fz--5xl", "value": "4em", "description": "最大サイズ（8/2）" },
+			{ "name": "--fz--4xl", "value": "2.667em", "description": "特大サイズ（8/3）" },
+			{ "name": "--fz--3xl", "value": "2em", "description": "3XLサイズ（8/4）" },
+			{ "name": "--fz--2xl", "value": "1.6em", "description": "2XLサイズ（8/5）" },
+			{ "name": "--fz--xl", "value": "1.333em", "description": "XLサイズ（8/6）" },
+			{ "name": "--fz--l", "value": "1.143em", "description": "Lサイズ（8/7）" },
+			{ "name": "--fz--m", "value": "1em", "description": "Mサイズ（基準）" },
+			{ "name": "--fz--s", "value": "0.889em", "description": "Sサイズ（8/9）" },
+			{ "name": "--fz--xs", "value": "0.8em", "description": "XSサイズ（8/10）" },
+			{ "name": "--fz--2xs", "value": "0.727em", "description": "最小サイズ（8/11）" }
 		]
 	},
 	{
 		"category": "lineHeight",
-		"description": "行間 (heading line-height) トークン。CSS変数名は --hl--{値}。",
+		"description": "行間（ハーフレディング）トークン。CSS変数名は --hl--{値}。line-heightは calc(1em + var(--hl) * 2) で算出される。--hl-unit（≒2px）を基準とする。",
 		"tokens": [
-			{ "name": "--hl--base", "value": "基本の行間" },
-			{ "name": "--hl--xs", "value": "極小の行間" },
-			{ "name": "--hl--s", "value": "小さめの行間" },
-			{ "name": "--hl--l", "value": "大きめの行間" }
+			{ "name": "--hl--xs", "value": "var(--hl-unit)", "description": "極小の行間（≒ 2px）" },
+			{ "name": "--hl--s", "value": "calc(var(--hl-unit) * 2)", "description": "小さめの行間（≒ 4px）" },
+			{ "name": "--hl--base", "value": "calc(var(--hl-unit) * 3)", "description": "基本の行間（≒ 6px）" },
+			{ "name": "--hl--l", "value": "calc(var(--hl-unit) * 4)", "description": "大きめの行間（≒ 8px）" }
 		]
 	},
 	{
 		"category": "letterSpacing",
 		"description": "文字間隔トークン。CSS変数名は --lts--{値}。",
 		"tokens": [
-			{ "name": "--lts--base", "value": "基本の文字間隔" },
-			{ "name": "--lts--s", "value": "狭めの文字間隔" },
-			{ "name": "--lts--l", "value": "広めの文字間隔" }
+			{ "name": "--lts--base", "value": "normal", "description": "基本の文字間隔" },
+			{ "name": "--lts--s", "value": "-0.05em", "description": "狭めの文字間隔" },
+			{ "name": "--lts--l", "value": "0.05em", "description": "広めの文字間隔" }
 		]
 	},
 	{
 		"category": "fontFamily",
 		"description": "フォントファミリートークン。CSS変数名は --ff--{値}。",
 		"tokens": [
-			{ "name": "--ff--base", "value": "基本フォント" },
-			{ "name": "--ff--accent", "value": "アクセントフォント" },
-			{ "name": "--ff--mono", "value": "モノスペースフォント" }
+			{
+				"name": "--ff--base",
+				"value": "-apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif, 'Segoe UI Emoji'",
+				"description": "基本フォント"
+			},
+			{ "name": "--ff--accent", "value": "'Garamond', 'Baskerville', 'Times New Roman', serif", "description": "アクセントフォント" },
+			{ "name": "--ff--mono", "value": "ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace", "description": "モノスペースフォント" }
 		]
 	},
 	{
 		"category": "radius",
 		"description": "角丸トークン。CSS変数名は --bdrs--{値}。段階的に値が大きくなる。",
 		"tokens": [
-			{ "name": "--bdrs--5", "value": "角丸 step 5" },
-			{ "name": "--bdrs--10", "value": "角丸 step 10" },
-			{ "name": "--bdrs--20", "value": "角丸 step 20" },
-			{ "name": "--bdrs--30", "value": "角丸 step 30" },
-			{ "name": "--bdrs--40", "value": "角丸 step 40" },
-			{ "name": "--bdrs--50", "value": "角丸 step 50" },
-			{ "name": "--bdrs--99", "value": "完全な丸 (pill)" },
-			{ "name": "--bdrs--inner", "value": "内側の角丸 (親要素に合わせる)" }
+			{ "name": "--bdrs--5", "value": "2px", "description": "角丸 step 5" },
+			{ "name": "--bdrs--10", "value": "0.25rem", "description": "角丸 step 10（≒ 4px）" },
+			{ "name": "--bdrs--20", "value": "0.5rem", "description": "角丸 step 20（≒ 8px）" },
+			{ "name": "--bdrs--30", "value": "1rem", "description": "角丸 step 30（≒ 16px）" },
+			{ "name": "--bdrs--40", "value": "1.5rem", "description": "角丸 step 40（≒ 24px）" },
+			{ "name": "--bdrs--50", "value": "2rem", "description": "角丸 step 50（≒ 32px）" },
+			{ "name": "--bdrs--99", "value": "99rem", "description": "完全な丸 (pill)" }
 		]
 	},
 	{
 		"category": "shadow",
-		"description": "ボックスシャドウトークン。CSS変数名は --bxsh--{値}。段階的に影が強くなる。",
+		"description": "ボックスシャドウトークン。CSS変数名は --bxsh--{値}。2段階の複合シャドウで構成される。--shc（シャドウカラー: hsl(220 4% 8% / 5%)）を使用。",
 		"tokens": [
-			{ "name": "--bxsh--5", "value": "シャドウ step 5 (最も薄い)" },
-			{ "name": "--bxsh--10", "value": "シャドウ step 10" },
-			{ "name": "--bxsh--20", "value": "シャドウ step 20" },
-			{ "name": "--bxsh--30", "value": "シャドウ step 30" },
-			{ "name": "--bxsh--40", "value": "シャドウ step 40" },
-			{ "name": "--bxsh--50", "value": "シャドウ step 50 (最も濃い)" }
+			{ "name": "--bxsh--10", "value": "var(--sh--5), var(--sh--10)", "description": "シャドウ step 10（最も薄い）" },
+			{ "name": "--bxsh--20", "value": "var(--sh--10), var(--sh--20)", "description": "シャドウ step 20" },
+			{ "name": "--bxsh--30", "value": "var(--sh--20), var(--sh--30)", "description": "シャドウ step 30" },
+			{ "name": "--bxsh--40", "value": "var(--sh--30), var(--sh--40)", "description": "シャドウ step 40" },
+			{ "name": "--bxsh--50", "value": "var(--sh--40), var(--sh--50)", "description": "シャドウ step 50（最も濃い）" }
 		]
 	},
 	{

package/dist/index.js

@@ -6,6 +6,7 @@ import { registerGetTokens } from './tools/get-tokens.js';
 import { registerGetPropsSystem } from './tools/get-props-system.js';
 import { registerGetComponent } from './tools/get-component.js';
 import { registerSearchDocs } from './tools/search-docs.js';
+import { registerConvertCss } from './tools/convert-css.js';
 async function main() {
     preloadAll();
     const server = new McpServer({
@@ -17,6 +18,7 @@ async function main() {
     registerGetPropsSystem(server);
     registerGetComponent(server);
     registerSearchDocs(server);
+    registerConvertCss(server);
     const transport = new StdioServerTransport();
     await server.connect(transport);
 }

package/dist/lib/schemas.d.ts

@@ -29,6 +29,7 @@ export declare const ComponentInfoSchema: z.ZodObject<{
     package: z.ZodEnum<["lism-css", "@lism-css/ui"]>;
     category: z.ZodString;
     description: z.ZodString;
+    aliases: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
     props: z.ZodArray<z.ZodObject<{
         name: z.ZodString;
         type: z.ZodString;
@@ -58,6 +59,7 @@ export declare const ComponentInfoSchema: z.ZodObject<{
         default?: string | undefined;
     }[];
     usage: string;
+    aliases?: string[] | undefined;
 }, {
     description: string;
     category: string;
@@ -70,6 +72,7 @@ export declare const ComponentInfoSchema: z.ZodObject<{
         default?: string | undefined;
     }[];
     usage: string;
+    aliases?: string[] | undefined;
 }>;
 export declare const TokenCategorySchema: z.ZodObject<{
     category: z.ZodString;

package/dist/lib/schemas.js

@@ -19,6 +19,7 @@ export const ComponentInfoSchema = z.object({
     package: z.enum(['lism-css', '@lism-css/ui']),
     category: z.string(),
     description: z.string(),
+    aliases: z.array(z.string()).optional(),
     props: z.array(ComponentPropSchema),
     usage: z.string(),
 });

package/dist/lib/search.d.ts

@@ -1,2 +1,21 @@
-import type { DocsEntry, SearchResult } from './types.js';
-export declare function searchDocs(entries: DocsEntry[], query: string, category?: string, limit?: number): SearchResult[];
+import type { DocsEntry, PropCategory, SearchResult } from './types.js';
+/**
+ * コンポーネント名 → aliases (lowercase) のマップを構築。
+ * ComponentInfo に限らず { name, aliases? } を持つ任意の配列から生成できる。
+ */
+export declare function buildAliasMap(items: Array<{
+    name: string;
+    aliases?: string[];
+}>): Map<string, string[]>;
+/**
+ * CSSプロパティ名 → Lism prop名のマップを構築。
+ * 検索クエリにCSSプロパティ名が含まれていた場合に、対応するLism prop名で展開するために使用。
+ */
+export declare function buildCssPropertyMap(categories: PropCategory[]): Map<string, string[]>;
+export interface SearchDocsOptions {
+    category?: string;
+    limit?: number;
+    aliasMap?: Map<string, string[]>;
+    cssPropertyMap?: Map<string, string[]>;
+}
+export declare function searchDocs(entries: DocsEntry[], query: string, options?: SearchDocsOptions): SearchResult[];

package/dist/lib/search.js

@@ -4,7 +4,68 @@ function tokenize(text) {
         .split(/[\s\-_./]+/)
         .filter((t) => t.length > 0);
 }
-function scoreEntry(entry, queryTokens) {
+/**
+ * コンポーネント名 → aliases (lowercase) のマップを構築。
+ * ComponentInfo に限らず { name, aliases? } を持つ任意の配列から生成できる。
+ */
+export function buildAliasMap(items) {
+    const map = new Map();
+    for (const item of items) {
+        if (item.aliases && item.aliases.length > 0) {
+            map.set(item.name.toLowerCase(), item.aliases.map((a) => a.toLowerCase()));
+        }
+    }
+    return map;
+}
+/**
+ * CSSプロパティ名 → Lism prop名のマップを構築。
+ * 検索クエリにCSSプロパティ名が含まれていた場合に、対応するLism prop名で展開するために使用。
+ */
+export function buildCssPropertyMap(categories) {
+    const map = new Map();
+    for (const cat of categories) {
+        for (const p of cat.props) {
+            // "(class: ...)" はスキップ
+            if (p.cssProperty.startsWith('(class:'))
+                continue;
+            // "--hl (CSS変数)" → "--hl"
+            const normalized = p.cssProperty.replace(/\s*\(.*\)$/, '').trim().toLowerCase();
+            if (!normalized)
+                continue;
+            const existing = map.get(normalized) ?? [];
+            existing.push(p.prop.toLowerCase());
+            map.set(normalized, existing);
+        }
+    }
+    return map;
+}
+/**
+ * 検索クエリをCSSプロパティ名で展開する。
+ * 例: "font-size" → "font-size fz", "padding" → "padding p"
+ */
+function expandQueryWithCssProps(query, cssPropertyMap) {
+    if (!cssPropertyMap)
+        return query;
+    const queryLower = query.toLowerCase();
+    const additions = [];
+    for (const [cssProp, lismProps] of cssPropertyMap) {
+        if (queryLower.includes(cssProp)) {
+            additions.push(...lismProps);
+        }
+    }
+    return additions.length > 0 ? `${query} ${additions.join(' ')}` : query;
+}
+// docs entry のタイトルに含まれるコンポーネント名から aliases を取得
+function getEntryAliases(entry, aliasMap) {
+    const titleLower = entry.title.toLowerCase();
+    for (const [name, aliases] of aliasMap) {
+        if (titleLower.includes(name)) {
+            return aliases;
+        }
+    }
+    return [];
+}
+function scoreEntry(entry, queryTokens, aliasMap) {
     let score = 0;
     const titleLower = entry.title.toLowerCase();
     const descLower = entry.description.toLowerCase();
@@ -28,10 +89,24 @@ function scoreEntry(entry, queryTokens) {
         if (snippetLower.includes(token))
             score += 1;
     }
+    // コンポーネントの aliases によるブースト
+    if (aliasMap) {
+        const aliases = getEntryAliases(entry, aliasMap);
+        if (aliases.length > 0) {
+            const aliasesStr = aliases.join(' ');
+            for (const token of queryTokens) {
+                if (aliasesStr.includes(token))
+                    score += 5;
+            }
+        }
+    }
     return score;
 }
-export function searchDocs(entries, query, category, limit = 10) {
-    const queryTokens = tokenize(query);
+export function searchDocs(entries, query, options) {
+    const { category, limit = 10, aliasMap, cssPropertyMap } = options ?? {};
+    // CSSプロパティ名をLism prop名に展開してからトークナイズ
+    const expandedQuery = expandQueryWithCssProps(query, cssPropertyMap);
+    const queryTokens = tokenize(expandedQuery);
     if (queryTokens.length === 0)
         return [];
     let filtered = entries;
@@ -40,7 +115,7 @@ export function searchDocs(entries, query, category, limit = 10) {
     }
     const scored = filtered
         .map((entry) => {
-        const score = scoreEntry(entry, queryTokens);
+        const score = scoreEntry(entry, queryTokens, aliasMap);
         return { entry, score };
     })
         .filter(({ score }) => score > 0)

package/dist/lib/types.d.ts

@@ -24,6 +24,7 @@ export interface ComponentInfo {
     package: 'lism-css' | '@lism-css/ui';
     category: string;
     description: string;
+    aliases?: string[];
     props: ComponentProp[];
     usage: string;
 }

package/dist/tools/convert-css.d.ts

@@ -0,0 +1,2 @@
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+export declare function registerConvertCss(server: McpServer): void;

package/dist/tools/convert-css.js

@@ -0,0 +1,223 @@
+import { z } from 'zod';
+import { loadJSON } from '../lib/load-data.js';
+import { PropsSystemDataSchema } from '../lib/schemas.js';
+import { success, error, READ_ONLY_ANNOTATIONS } from '../lib/response.js';
+// ----------------------------------------------------------------
+// CSS パース
+// ----------------------------------------------------------------
+function parseCssDeclarations(cssText) {
+    // コメント除去
+    let cleaned = cssText.replace(/\/\*[\s\S]*?\*\//g, '');
+    // セレクタ + ブレースを除去（裸の宣言リストも受け付ける）
+    cleaned = cleaned.replace(/[^{}]*\{/g, '').replace(/\}/g, '');
+    const declarations = [];
+    for (const line of cleaned.split(';')) {
+        const trimmed = line.trim();
+        if (!trimmed)
+            continue;
+        const colonIdx = trimmed.indexOf(':');
+        if (colonIdx === -1)
+            continue;
+        const property = trimmed.substring(0, colonIdx).trim().toLowerCase();
+        const value = trimmed.substring(colonIdx + 1).trim();
+        if (property && value) {
+            declarations.push({ property, value });
+        }
+    }
+    return declarations;
+}
+// ----------------------------------------------------------------
+// CSSプロパティ → PropEntry マップ
+// ----------------------------------------------------------------
+function buildCssPropertyMap(categories) {
+    const map = new Map();
+    for (const cat of categories) {
+        for (const prop of cat.props) {
+            const normalized = normalizeCssPropertyName(prop.cssProperty);
+            if (normalized)
+                map.set(normalized, prop);
+        }
+    }
+    return map;
+}
+/** cssProperty フィールドの正規化 */
+function normalizeCssPropertyName(raw) {
+    // "(class: is--container)" → スキップ（CSS プロパティではない）
+    if (raw.startsWith('(class:'))
+        return null;
+    // "--hl (CSS変数)" → "--hl"
+    return raw.replace(/\s*\(.*\)$/, '').trim().toLowerCase();
+}
+// ----------------------------------------------------------------
+// 値のマッピング
+// ----------------------------------------------------------------
+/** よくある CSS 値 → Lism トークン値の変換テーブル */
+const VALUE_ALIASES = {
+    column: 'col',
+    'column-reverse': 'col-r',
+    'row-reverse': 'row-r',
+    'space-between': 'between',
+    'flex-start': 'flex-s',
+    'flex-end': 'flex-e',
+    currentcolor: 'cc',
+    uppercase: 'upper',
+    lowercase: 'lower',
+};
+function suggestValue(propEntry, cssValue) {
+    const tokens = propEntry.values;
+    if (!tokens || tokens.length === 0)
+        return null;
+    // 直接一致
+    if (tokens.includes(cssValue))
+        return cssValue;
+    // エイリアス変換後に一致
+    const aliased = VALUE_ALIASES[cssValue.toLowerCase()];
+    if (aliased && tokens.includes(aliased))
+        return aliased;
+    return null;
+}
+// ----------------------------------------------------------------
+// コンポーネント検出
+// ----------------------------------------------------------------
+function detectComponent(declarations) {
+    const propMap = new Map(declarations.map((d) => [d.property, d.value.toLowerCase()]));
+    const display = propMap.get('display');
+    const flexDirection = propMap.get('flex-direction');
+    const placeItems = propMap.get('place-items');
+    // Stack: flex + column
+    if (display === 'flex' && (flexDirection === 'column' || flexDirection === 'column-reverse')) {
+        return {
+            name: 'Stack',
+            reason: 'display: flex + flex-direction: column → Stack（縦積み Flex）',
+            implicitCss: ['display: flex', 'flex-direction: column'],
+        };
+    }
+    // Center: grid + place-items: center
+    if (display === 'grid' && placeItems === 'center') {
+        return {
+            name: 'Center',
+            reason: 'display: grid + place-items: center → Center（中央配置 Grid）',
+            implicitCss: ['display: grid', 'place-items: center'],
+        };
+    }
+    // Flex
+    if (display === 'flex') {
+        return {
+            name: 'Flex',
+            reason: 'display: flex → Flex コンポーネント',
+            implicitCss: ['display: flex'],
+        };
+    }
+    // Grid
+    if (display === 'grid') {
+        return {
+            name: 'Grid',
+            reason: 'display: grid → Grid コンポーネント',
+            implicitCss: ['display: grid'],
+        };
+    }
+    return null;
+}
+// ----------------------------------------------------------------
+// 変換メイン
+// ----------------------------------------------------------------
+function findCategory(categories, propName) {
+    for (const cat of categories) {
+        if (cat.props.some((p) => p.prop === propName))
+            return cat.category;
+    }
+    return 'unknown';
+}
+function buildExample(conversions, component) {
+    const tagName = component?.name ?? 'Lism';
+    const implicitCssSet = new Set(component?.implicitCss.map((c) => c.split(':')[0].trim()) ?? []);
+    const props = [];
+    const styles = [];
+    for (const conv of conversions) {
+        const cssProp = conv.css.split(':')[0].trim();
+        if (!conv.lismProp) {
+            styles.push(conv.css);
+            continue;
+        }
+        // コンポーネントが暗黙的に付与する CSS はスキップ
+        if (implicitCssSet.has(cssProp))
+            continue;
+        if (conv.suggestedValue != null) {
+            props.push(`${conv.lismProp}='${conv.suggestedValue}'`);
+        }
+        else {
+            const cssValue = conv.css.split(':').slice(1).join(':').trim();
+            props.push(`${conv.lismProp}='${cssValue}'`);
+        }
+    }
+    let result = `<${tagName}`;
+    if (props.length > 0)
+        result += ` ${props.join(' ')}`;
+    if (styles.length > 0) {
+        result += ` style="${styles.map((s) => s.replace(/"/g, "'")).join('; ')}"`;
+    }
+    result += `>...</${tagName}>`;
+    return result;
+}
+// ----------------------------------------------------------------
+// ツール登録
+// ----------------------------------------------------------------
+export function registerConvertCss(server) {
+    server.registerTool('convert_css', {
+        description: 'Convert CSS code to lism-css props, utility classes, and component suggestions. Accepts CSS declarations (with or without selectors) and returns the equivalent lism-css representation. Use this to migrate existing CSS to lism-css, or to understand how CSS properties map to lism-css.',
+        inputSchema: {
+            css: z
+                .string()
+                .describe('CSS code to convert. Accepts a full rule block with selector (e.g. ".foo { padding: 1rem; }") or bare declarations (e.g. "padding: 1rem; font-size: 16px;").'),
+        },
+        annotations: READ_ONLY_ANNOTATIONS,
+    }, ({ css }) => {
+        try {
+            const propsData = loadJSON('props-system.json', PropsSystemDataSchema);
+            const cssPropertyMap = buildCssPropertyMap(propsData.categories);
+            const declarations = parseCssDeclarations(css);
+            if (declarations.length === 0) {
+                return error('CSS 宣言が見つかりません。"property: value;" 形式の CSS を入力してください。');
+            }
+            // 各宣言を変換
+            const conversions = declarations.map((decl) => {
+                const propEntry = cssPropertyMap.get(decl.property);
+                if (!propEntry) {
+                    return {
+                        css: `${decl.property}: ${decl.value}`,
+                        lismProp: null,
+                        suggestedValue: null,
+                        availableTokens: null,
+                        note: 'Lism Props に該当なし。style で直接指定してください。',
+                    };
+                }
+                const suggested = suggestValue(propEntry, decl.value);
+                const category = findCategory(propsData.categories, propEntry.prop);
+                return {
+                    css: `${decl.property}: ${decl.value}`,
+                    lismProp: propEntry.prop,
+                    suggestedValue: suggested,
+                    availableTokens: propEntry.values ?? null,
+                    note: suggested
+                        ? `トークン値 '${suggested}' を使用（カテゴリ: ${category}）`
+                        : propEntry.values && propEntry.values.length > 0
+                            ? `カスタム値。利用可能なトークン: ${propEntry.values.join(', ')}（カテゴリ: ${category}）`
+                            : `カスタム値として指定（カテゴリ: ${category}）`,
+                };
+            });
+            // コンポーネント検出
+            const suggestedComponent = detectComponent(declarations);
+            // 使用例
+            const example = buildExample(conversions, suggestedComponent);
+            return success({
+                conversions,
+                suggestedComponent,
+                example,
+                tip: 'トークン値にマッチしない値は style 属性で CSS 変数として指定できます（例: style="--p: 1rem"）。get_props_system で各 prop の詳細を確認できます。',
+            });
+        }
+        catch (e) {
+            return error(`CSS 変換に失敗しました: ${e instanceof Error ? e.message : String(e)}`);
+        }
+    });
+}