@lism-css/mcp 0.12.0 → 0.13.0

package/dist/data/guides/utility-class.md

@@ -7,6 +7,8 @@
 > Property Class（`-{prop}:{value}`）は個別の CSS プロパティを 1 対 1 で制御するクラスです。  
 > ユーティリティクラス（`u--{name}`）は複数のプロパティや子要素への効果をまとめて提供するもので、まったく別の仕組みです。
 
+Lism コンポーネントでの `util` prop による指定方法は [components-core.md](./components-core.md#共通-props) を参照してください。
+
 ## TOC
 
 - [コアに含まれるユーティリティ一覧](#コアに含まれるユーティリティ一覧)
@@ -24,14 +26,13 @@
 
 | クラス | 用途 | ソースファイル |
 |--------|------|---------------|
-| `u--trim` | ハーフレディングのネガティブマージンでテキスト上下の余白を詰める | [`_trimHL.scss`](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/src/scss/utility/_trimHL.scss) |
-| `u--trimChildren` | 子要素すべてにハーフレディングトリムを適用（`img`, `figure`, `button` は除外） | [`_trimHL.scss`](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/src/scss/utility/_trimHL.scss) |
-| `u--cbox` | `--keycolor` を使い `color-mix()` で `--c` / `--bgc` / `--bdc` を自動生成する色付きボックス | [`_cbox.scss`](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/src/scss/utility/_cbox.scss) |
-| `u--collapseGrid` | Grid / Flex の子要素間に `box-shadow` で境界線を表現する | [`_itemDivider.scss`](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/src/scss/utility/_itemDivider.scss) |
-| `u--expandedLink` | `::before` 疑似要素で親コンテナ全体をクリック可能にするリンク。`is--linkBox` と併用 | [`_linkExpand.scss`](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/src/scss/utility/_linkExpand.scss) |
-| `u--srOnly` | スクリーンリーダー専用（視覚的に非表示）。`clip-path: inset(50%)` で実装 | [`_hidden.scss`](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/src/scss/utility/_hidden.scss) |
-| `u--snap` | スクロールスナップコンテナ。`--snapType`, `--snapAlign`, `--snapStop` で制御 | [`_snap.scss`](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/src/scss/utility/_snap.scss) |
-| `u--clipText` | テキストで背景をクリッピング（`background-clip: text`） | [`_clipText.scss`](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/src/scss/utility/_clipText.scss) |
+| `u--trim` | ハーフレディングのネガティブマージンでテキスト上下の余白を詰める | [`_trimHL.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_trimHL.scss) |
+| `u--trimChildren` | 子要素すべてにハーフレディングトリムを適用（`img`, `figure`, `button` は除外） | [`_trimHL.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_trimHL.scss) |
+| `u--cbox` | `--keycolor` を使い `color-mix()` で `--c` / `--bgc` / `--bdc` を自動生成する色付きボックス | [`_cbox.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_cbox.scss) |
+| `u--collapseGrid` | Grid / Flex の子要素間に `box-shadow` で境界線を表現する | [`_itemDivider.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_itemDivider.scss) |
+| `u--srOnly` | スクリーンリーダー専用（視覚的に非表示）。`clip-path: inset(50%)` で実装 | [`_hidden.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_hidden.scss) |
+| `u--snap` | スクロールスナップコンテナ。`--snapType`, `--snapAlign`, `--snapStop` で制御 | [`_snap.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_snap.scss) |
+| `u--clipText` | テキストで背景をクリッピング（`background-clip: text`） | [`_clipText.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_clipText.scss) |
 
 
 ## 使用例

package/dist/data/meta.js

@@ -1,5 +1,5 @@
 export const meta = {
-    generatedAt: '2026-04-05',
-    sourceCommit: 'edb98742',
+    generatedAt: '2026-04-14',
+    sourceCommit: '9a7c9ffa',
     docsVersion: '0.1.0',
 };

package/dist/lib/load-markdown.d.ts

@@ -1,6 +1,7 @@
-/** guides/ ディレクトリから Markdown ファイルを読み込む（キャッシュ付き） */
+/** guides/ ディレクトリから Markdown ファイルを読み込む（キャッシュ付き）。
+ *  filename にはサブディレクトリを含む posix 区切りの相対パス（例: `primitives/l--flex.md`）を渡せる。 */
 export declare function loadMarkdown(filename: string): string;
-/** 利用可能なガイドファイル名の一覧を返す */
+/** 利用可能なガイドファイル名の一覧（サブディレクトリ配下も含む）を返す */
 export declare function getGuideFilenames(): string[];
 /** 起動時に全ガイドを一括読み込みしてキャッシュに載せる */
 export declare function preloadGuides(): void;

package/dist/lib/load-markdown.js

@@ -1,5 +1,5 @@
-import { existsSync, readFileSync, readdirSync } from 'node:fs';
-import { dirname, resolve } from 'node:path';
+import { existsSync, readFileSync, readdirSync, statSync } from 'node:fs';
+import { dirname, relative, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 // スキル Markdown の正本を直接参照（開発・テスト時）
@@ -8,7 +8,8 @@ const skillsDir = resolve(__dirname, '..', '..', '..', '..', '.claude', 'skills'
 const distDir = resolve(__dirname, '..', 'data', 'guides');
 const guidesDir = existsSync(skillsDir) ? skillsDir : distDir;
 const cache = new Map();
-/** guides/ ディレクトリから Markdown ファイルを読み込む（キャッシュ付き） */
+/** guides/ ディレクトリから Markdown ファイルを読み込む（キャッシュ付き）。
+ *  filename にはサブディレクトリを含む posix 区切りの相対パス（例: `primitives/l--flex.md`）を渡せる。 */
 export function loadMarkdown(filename) {
     if (cache.has(filename))
         return cache.get(filename);
@@ -17,9 +18,26 @@ export function loadMarkdown(filename) {
     cache.set(filename, content);
     return content;
 }
-/** 利用可能なガイドファイル名の一覧を返す */
+/** guidesDir 配下を再帰的に走査し、`.md` ファイルの相対パス（posix 区切り）を返す */
+function walkMarkdownFiles(dir, baseDir = dir) {
+    const results = [];
+    for (const entry of readdirSync(dir)) {
+        if (entry.startsWith('.'))
+            continue;
+        const full = resolve(dir, entry);
+        const stat = statSync(full);
+        if (stat.isDirectory()) {
+            results.push(...walkMarkdownFiles(full, baseDir));
+        }
+        else if (stat.isFile() && entry.endsWith('.md')) {
+            results.push(relative(baseDir, full).split('\\').join('/'));
+        }
+    }
+    return results;
+}
+/** 利用可能なガイドファイル名の一覧（サブディレクトリ配下も含む）を返す */
 export function getGuideFilenames() {
-    return readdirSync(guidesDir).filter((f) => f.endsWith('.md'));
+    return walkMarkdownFiles(guidesDir);
 }
 /** 起動時に全ガイドを一括読み込みしてキャッシュに載せる */
 export function preloadGuides() {

package/dist/lib/search.js

@@ -88,9 +88,28 @@ export function searchDocs(entries, query, options) {
     const DOCS_BASE_URL = 'https://lism-css.com/docs';
     return scored.map(({ entry, score }) => ({
         sourcePath: entry.sourcePath,
-        url: `${DOCS_BASE_URL}/${entry.sourcePath.replace(/\.mdx$/, '')}/`,
+        url: `${DOCS_BASE_URL}/${sourcePathToUrlSlug(entry.sourcePath)}/`,
         heading: entry.title,
         snippet: entry.snippet,
         score,
     }));
 }
+/**
+ * `sourcePath`（実 MDX ファイルの相対パス）を公開 URL のスラッグに変換する。
+ *
+ * - `primitives/` 配下のみファイル名の casing を保持（CSS クラス名と URL を一致させるための例外）
+ * - それ以外は全て小文字化（Astro content collections の `generateId` と揃える）
+ *
+ * IMPORTANT: `apps/docs/src/lib/contentSlug.ts` の `toContentSlug` と必ず同じロジックに保つこと。
+ * 別ワークスペース（apps/docs）なので直接 import できず、ローカル実装で複製している。
+ * apps/docs 側を変更した場合は必ずここも合わせて更新する。
+ *
+ * 例:
+ *   `primitives/l--tileGrid.mdx`   → `primitives/l--tileGrid`
+ *   `core-components/Group.mdx`    → `core-components/group`
+ *   `ui/DummyImage.mdx`            → `ui/dummyimage`
+ */
+function sourcePathToUrlSlug(sourcePath) {
+    const withoutExt = sourcePath.replace(/\.mdx$/, '');
+    return withoutExt.startsWith('primitives/') ? withoutExt : withoutExt.toLowerCase();
+}

package/dist/tools/get-component.js

@@ -1,16 +1,70 @@
 import { z } from 'zod';
-import { loadMarkdown } from '../lib/load-markdown.js';
+import { getGuideFilenames, loadMarkdown } from '../lib/load-markdown.js';
 import { findComponentByHeading, findComponentInTables } from '../lib/markdown-utils.js';
 import { markdownResponse, error, notFound, READ_ONLY_ANNOTATIONS } from '../lib/response.js';
+/** 入力を正規化してエイリアス検索のキーに変換する。
+ *  `<Flex>` / `Flex` / `l--flex` / `flex` をすべて `flex` に揃える。 */
+function normalizeComponentKey(input) {
+    return input
+        .trim()
+        .toLowerCase()
+        .replace(/^<|>$/g, '')
+        .replace(/^(l--|is--|a--|c--)/, '');
+}
+/** 入力が `<ComponentName>` 形式（React コンポーネントとしての問い合わせ）か判定する */
+function isAngleBracketNotation(input) {
+    return /^<[^<>]+>$/.test(input.trim());
+}
+/** primitives/*.md の先頭行 `# l--flex / \`<Flex>\`` からクラス名とコンポーネント名を抽出する */
+function parsePrimitiveHeading(md) {
+    const firstLine = md.split('\n', 1)[0] ?? '';
+    const match = firstLine.match(/^#\s+((?:l|is|a|c)--[A-Za-z0-9]+)(?:\s*\/\s*`<([A-Za-z0-9]+)>`)?/);
+    if (!match)
+        return null;
+    return { className: match[1], componentName: match[2] };
+}
+let classAliasMap = null;
+let componentAliasMap = null;
+/** primitives/*.md を走査して、クラス名由来 / React コンポーネント名由来の alias map を構築する（遅延初期化・キャッシュ）。
+ *  angle-bracket 形式の問い合わせ（`<Vertical>` など）には componentAliasMap のみを照合し、
+ *  クラス専用プリミティブ（例: is--vertical）を誤ってヒットさせないために分離している。 */
+function buildAliasMaps() {
+    if (classAliasMap && componentAliasMap)
+        return;
+    const classMap = new Map();
+    const componentMap = new Map();
+    for (const filename of getGuideFilenames()) {
+        if (!filename.startsWith('primitives/'))
+            continue;
+        const parsed = parsePrimitiveHeading(loadMarkdown(filename));
+        if (!parsed)
+            continue;
+        classMap.set(normalizeComponentKey(parsed.className), filename);
+        if (parsed.componentName) {
+            componentMap.set(normalizeComponentKey(parsed.componentName), filename);
+        }
+    }
+    classAliasMap = classMap;
+    componentAliasMap = componentMap;
+}
+function getClassAliasMap() {
+    buildAliasMaps();
+    return classAliasMap;
+}
+function getComponentAliasMap() {
+    buildAliasMaps();
+    return componentAliasMap;
+}
 export function registerGetComponent(server) {
     server.registerTool('get_component', {
         description: 'Get detailed information about a specific lism-css component: purpose, props, and usage examples.\n' +
             'Use this when you need documentation for a known component by name (e.g. "Box", "Flex", "Accordion", "Lism", "HTML").\n' +
+            'Accepts multiple notations: "Flex", "<Flex>", "l--flex", "flex" all resolve to the same entry.\n' +
             'Do NOT use this for broad topic guides (use get_guide with "components-core" or "components-ui") or keyword search across all docs (use search_docs).\n' +
             'If the component is not found, suggestions will be provided — follow up with search_docs for a broader query.\n' +
             'The response is pre-formatted Markdown. Output it verbatim. Do NOT summarize or omit code examples.',
         inputSchema: {
-            name: z.string().describe('Component name to look up (e.g. "Box", "Flex", "Accordion").'),
+            name: z.string().describe('Component name to look up (e.g. "Box", "Flex", "Accordion", "l--flex", "<Flex>").'),
             package: z
                 .enum(['lism-css', '@lism-css/ui'])
                 .optional()
@@ -19,30 +73,30 @@ export function registerGetComponent(server) {
         annotations: READ_ONLY_ANNOTATIONS,
     }, ({ name, package: pkg }) => {
         try {
-            const nameLower = name.toLowerCase();
-            // --- @lism-css/ui コンポーネントを検索 ---
-            if (!pkg || pkg === '@lism-css/ui') {
-                const uiMd = loadMarkdown('components-ui.md');
-                // ## ComponentName 形式の見出しで検索（完全一致）
-                const uiSection = findComponentByHeading(uiMd, name);
-                if (uiSection) {
-                    return markdownResponse(uiSection);
+            const normalizedKey = normalizeComponentKey(name);
+            const rawLower = name.toLowerCase();
+            const isAngle = isAngleBracketNotation(name);
+            // --- 1) lism-css コア: primitives/ の個別ファイルを alias map で解決 ---
+            //   angle-bracket 形式 (`<Vertical>`) は React コンポーネント alias のみと照合し、
+            //   クラス専用プリミティブ (is--vertical 等) への false positive を避ける。
+            if (!pkg || pkg === 'lism-css') {
+                const componentHit = getComponentAliasMap().get(normalizedKey);
+                if (componentHit) {
+                    return markdownResponse(loadMarkdown(componentHit));
                 }
-                // 大文字小文字を無視した見出し検索
-                const uiLines = uiMd.split('\n');
-                const headingLine = uiLines.find((l) => l.startsWith('## ') && l.slice(3).trim().toLowerCase() === nameLower);
-                if (headingLine) {
-                    const section = findComponentByHeading(uiMd, headingLine.slice(3).trim());
-                    if (section)
-                        return markdownResponse(section);
+                if (!isAngle) {
+                    const classHit = getClassAliasMap().get(normalizedKey);
+                    if (classHit) {
+                        return markdownResponse(loadMarkdown(classHit));
+                    }
                 }
             }
-            // --- lism-css コアコンポーネントを検索 ---
+            // --- 2) lism-css コア: components-core.md のセマンティック/コアコンポーネント ---
             if (!pkg || pkg === 'lism-css') {
                 const coreMd = loadMarkdown('components-core.md');
                 // 見出しにコンポーネント名を含むセクションを検索（Lism, HTML 等）
                 const coreLines = coreMd.split('\n');
-                const headingLine = coreLines.find((l) => /^#{2,3}\s/.test(l) && l.toLowerCase().includes(`<${nameLower}>`));
+                const headingLine = coreLines.find((l) => /^#{2,3}\s/.test(l) && l.toLowerCase().includes(`<${rawLower}>`));
                 if (headingLine) {
                     const headingText = headingLine.replace(/^#+\s*/, '').trim();
                     const section = findComponentByHeading(coreMd, headingText);
@@ -55,22 +109,57 @@ export function registerGetComponent(server) {
                     return markdownResponse(coreSection);
                 }
             }
-            // --- 部分一致で候補を提示 ---
+            // --- 3) @lism-css/ui: components-ui.md を検索 ---
+            if (!pkg || pkg === '@lism-css/ui') {
+                const uiMd = loadMarkdown('components-ui.md');
+                // ## ComponentName 形式の見出しで検索（完全一致）
+                const uiSection = findComponentByHeading(uiMd, name);
+                if (uiSection) {
+                    return markdownResponse(uiSection);
+                }
+                // 大文字小文字を無視した見出し検索
+                const uiLines = uiMd.split('\n');
+                const headingLine = uiLines.find((l) => l.startsWith('## ') && l.slice(3).trim().toLowerCase() === rawLower);
+                if (headingLine) {
+                    const section = findComponentByHeading(uiMd, headingLine.slice(3).trim());
+                    if (section)
+                        return markdownResponse(section);
+                }
+            }
+            // --- 4) 部分一致で候補を提示 ---
             const uiMd = loadMarkdown('components-ui.md');
             const coreMd = loadMarkdown('components-core.md');
-            const uiCandidates = uiMd
-                .split('\n')
-                .filter((l) => l.startsWith('## ') && l.toLowerCase().includes(nameLower))
-                .map((l) => l.slice(3).trim());
+            const moduleCandidates = [];
+            if (!pkg || pkg === 'lism-css') {
+                const seenFiles = new Set();
+                for (const map of [getComponentAliasMap(), getClassAliasMap()]) {
+                    for (const [key, file] of map) {
+                        if (key.includes(normalizedKey) && !seenFiles.has(file)) {
+                            seenFiles.add(file);
+                            moduleCandidates.push(file.replace(/^primitives\//, '').replace(/\.md$/, ''));
+                        }
+                    }
+                }
+            }
             const coreCandidates = [];
-            for (const line of coreMd.split('\n')) {
-                if (line.startsWith('|') && line.toLowerCase().includes(nameLower)) {
-                    const match = line.match(/`<([^>]+)>`/);
-                    if (match)
-                        coreCandidates.push(match[1]);
+            if (!pkg || pkg === 'lism-css') {
+                for (const line of coreMd.split('\n')) {
+                    if (line.startsWith('|') && line.toLowerCase().includes(rawLower)) {
+                        const match = line.match(/`<([^>]+)>`/);
+                        if (match)
+                            coreCandidates.push(match[1]);
+                    }
+                }
+            }
+            const uiCandidates = [];
+            if (!pkg || pkg === '@lism-css/ui') {
+                for (const l of uiMd.split('\n')) {
+                    if (l.startsWith('## ') && l.toLowerCase().includes(rawLower)) {
+                        uiCandidates.push(l.slice(3).trim());
+                    }
                 }
             }
-            const suggestions = [...new Set([...uiCandidates, ...coreCandidates])];
+            const suggestions = [...new Set([...moduleCandidates, ...coreCandidates, ...uiCandidates])];
             if (suggestions.length > 0) {
                 return notFound(`Component "${name}" not found. Did you mean one of these? Or try search_docs with a broader query.`, {
                     suggestions,

package/dist/tools/get-guide.js

@@ -15,7 +15,7 @@ const GUIDE_TOPICS = {
     },
     'base-styles': { file: 'base-styles.md', label: 'Base styling, reset CSS, HTML element styles' },
     'set-class': { file: 'set-class.md', label: 'Set classes (set--plain, set--shadow, set--hov, etc.)' },
-    'module-class': { file: 'module-class.md', label: 'Module class prefixes (is--, l--, a--, c--)' },
+    'primitive-class': { file: 'primitive-class.md', label: 'Primitive class prefixes (is--, l--, a--) and Component class (c--)' },
     'utility-class': { file: 'utility-class.md', label: 'Utility classes (u--trim, u--cbox, etc.)' },
     'css-rules': { file: 'css-rules.md', label: 'CSS methodology, layer structure, naming conventions' },
     responsive: { file: 'prop-responsive.md', label: 'Responsive design, breakpoints, container queries' },

package/dist/tools/search-docs.js

@@ -5,7 +5,7 @@ import { DocsEntrySchema } from '../lib/schemas.js';
 import { parsePropRows } from '../lib/markdown-utils.js';
 import { searchDocs } from '../lib/search.js';
 import { success, error, READ_ONLY_ANNOTATIONS } from '../lib/response.js';
-const DOC_CATEGORIES = ['all', 'core-components', 'modules', 'props', 'ui', 'guide'];
+const DOC_CATEGORIES = ['all', 'core-components', 'primitives', 'property-class', 'ui', 'guide'];
 /**
  * property-class.md のテーブルから CSSプロパティ名 → Lism prop名 のマップを構築する。
  * search.ts の buildCssPropertyMap と同じインターフェースを返す。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lism-css/mcp",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "MCP server for lism-css documentation and API reference.",
   "type": "module",
   "bin": {

package/dist/data/guides/module-class.md

@@ -1,162 +0,0 @@
-# モジュールクラス
-
-Lism CSS では、クラス名のプレフィックスによってモジュールの種類と CSS Layer の所属が決まります。  
-すべてのモジュールクラスは `@layer lism-modules` に属します（`set--` を除く）。
-
-## TOC
-
-- [プレフィックス一覧](#プレフィックス一覧)
-- [State Module（`is--`）](#state-moduleis--)
-- [Layout Module（`l--`）](#layout-modulel--)
-- [Atomic Module（`a--`）](#atomic-modulea--)
-- [Component（`c--`）](#componentc--)
-
-[詳細](https://lism-css.com/docs/module-class/)
-
----
-
-## プレフィックス一覧
-
-| プレフィックス | 種類 | 役割 |
-|--------------|------|------|
-| `is--` | State Module | 複数のモジュールに付け外しできる汎用的な状態クラス |
-| `l--` | Layout Module | レイアウトの構成単位となるモジュール |
-| `a--` | Atomic Module | レイアウトの最小単位（アイコン・区切り線等） |
-| `c--` | Component | 具体的な役割を持つコンポーネント |
-
-**併用ルール:**
-- `is--` は他のすべてのモジュールと併用可能
-- `l--` と `c--` は併用可能（例: `class="l--flex c--nav"`）
-- 同カテゴリ内の併用は不可（例: `l--flex` と `l--grid` は同要素に付けない）
-
-
-## State Module（`is--`）
-
-[詳細](https://lism-css.com/docs/state/)
-
-要素に構造的な振る舞い（状態）を付与するクラスです。他のモジュールクラスと自由に組み合わせられます。
-
-| クラス | 用途 | 備考 |
-|--------|------|------|
-| `is--container` | コンテナクエリの基準要素にする（`container-type: inline-size`） | Lism のレスポンシブ機能の前提。判定基準にしたいラッパーに付与する |
-| `is--wrapper` | 直下の子要素のコンテンツ幅を制限する | `-contentSize:s` / `-contentSize:l` でプリセットサイズ指定可能。デフォルト: `--sz--m` |
-| `is--layer` | `position: absolute; inset: 0` の絶対配置レイヤー | `overflow: hidden` も適用される |
-| `is--linkBox` | ボックス全体をクリッカブルなリンク領域にする | `position: relative; isolation: isolate` を適用 |
-| `is--vertical` | 縦書きモード（`writing-mode: var(--vertical-mode)`） | `is--vertical@sm`, `is--vertical@md` でブレークポイント指定可能 |
-| `is--skipFlow` | `l--flow` 内で次の兄弟要素のフロー余白をリセット | `is--skipFlow + *` で `--flow: 0px` |
-| `is--side` | `l--sideMain` 内でサイド要素を示す | `l--sideMain` と組み合わせて使用 |
-
-### コンポーネントでの対応
-
-| JSX Prop | HTML クラス |
-|----------|-----------|
-| `isContainer` | `is--container` |
-| `isWrapper` / `isWrapper='s'` | `is--wrapper` / `is--wrapper -contentSize:s` |
-| `isLayer` | `is--layer` |
-| `isLinkBox` | `is--linkBox` |
-| `isVertical` | `is--vertical` |
-
-```jsx
-// Layout 優先の書き方（推奨）
-<Stack isLayer>背景レイヤー</Stack>
-// → <div class="l--stack is--layer">...</div>
-
-<Flex isWrapper="l">コンテンツ</Flex>
-// → <div class="l--flex is--wrapper -contentSize:l">...</div>
-```
-
-
-## Layout Module（`l--`）
-
-レイアウト構造を定義するメインのモジュール群です。Lism コンポーネントでは `layout` prop が内部で固定されており、対応するクラスが自動出力されます。
-
-| クラス | コンポーネント | CSS display | 用途 |
-|--------|-------------|-------------|------|
-| `l--box` | `<Box>` | — | 汎用ボックス |
-| `l--flex` | `<Flex>` | `flex` | Flexbox（横方向）。子要素に `min-width: 0` |
-| `l--stack` | `<Stack>` | `flex` | 縦積み（`flex-direction: column`） |
-| `l--cluster` | `<Cluster>` | `flex` | 折り返し Flex（`flex-wrap: wrap; align-items: center`） |
-| `l--grid` | `<Grid>` | `grid` | CSS Grid。`--gtc`, `--gtr`, `--gta` 変数で制御 |
-| `l--center` | `<Center>` | `grid` | 中央配置（`place-content: center; place-items: center`） |
-| `l--flow` | `<Flow>` | `flow-root` | フローコンテンツ。子要素間に `margin-block-start: var(--flow)` |
-| `l--frame` | `<Frame>` | — | アスペクト比フレーム。直下メディアに `object-fit: cover` |
-| `l--columns` | `<Columns>` | `grid` | 固定カラム数（`grid-template-columns: repeat(var(--cols), minmax(0, 1fr))`） |
-| `l--tileGrid` | `<TileGrid>` | `grid` | 均等タイルグリッド（`grid-template: repeat(var(--rows,1), minmax(0, 1fr)) / repeat(var(--cols,1), minmax(0, 1fr))`） |
-| `l--fluidCols` | `<FluidCols>` | `grid` | 流動カラム（`auto-fit` / `auto-fill`）。`--cols` で最小幅指定 |
-| `l--switchCols` | `<SwitchCols>` | `flex` | ブレークポイントでカラム切り替え。`--breakSize` で制御 |
-| `l--sideMain` | `<SideMain>` | `flex` | サイド＋メインの2カラム。`--sideW`, `--mainW` で制御 |
-
-### レイアウト固有の Props
-
-```jsx
-<Grid gtc="1fr 1fr" gtr="auto">...</Grid>
-<Columns cols={3}>...</Columns>              // --cols: 3
-<FluidCols autoFill>...</FluidCols>           // --autoMode: auto-fill
-<SwitchCols breakSize="480px">...</SwitchCols>  // --breakSize: 480px
-<SideMain sideW="200px" mainW="1fr">...</SideMain>
-<Flow flow="30">...</Flow>                    // --flow: var(--s30)
-```
-
-
-## Atomic Module（`a--`）
-
-レイアウトの最小単位となる単機能モジュールです。
-
-| クラス | コンポーネント | 用途 |
-|--------|-------------|------|
-| `a--icon` | `<Icon>` | SVG アイコン。`flex-shrink: 0`, デフォルトサイズ `1em` |
-| `a--divider` | `<Divider>` | 区切り線。`--bdc`, `--bds`, `--bdw` 変数でカスタマイズ |
-| `a--spacer` | `<Spacer>` | 空白要素（`min-height: 1px; min-width: 1px`） |
-| `a--decorator` | `<Decorator>` | 装飾用要素（SCSS定義なし、クラス名のみ出力） |
-
-```jsx
-<Icon as={LucideArrowRight} fz="xl" />
-<Media as="img" src="/image.jpg" alt="説明" ar="16/9" />
-<Divider />
-<Spacer h="40" />
-```
-
-
-## Component（`c--`）
-
-[詳細](https://lism-css.com/docs/components/)
-
-より具体的な役割を持つコンポーネントのクラスです。他のクラスとの組み合わせを前提とした設計になっています。
-
-### ユーザー定義コンポーネント
-
-独自のコンポーネントを作成する場合は `c--{name}` の命名規則に従います。
-
-```css
-@layer lism-modules {
-  .c--my-card {
-    border: 1px solid var(--brand);
-    border-radius: var(--bdrs--20);
-    padding: var(--s30);
-  }
-  .c--my-card_header { ... }  /* 子要素 */
-  .c--my-card_body { ... }
-}
-```
-
-- バリエーション: `.c--button.c--button--outline`
-- 子要素: `.c--card_header`, `.c--card_body`
-
-### `@lism-css/ui` で提供されるコンポーネント
-
-`@lism-css/ui` パッケージでは、以下の `c--` クラスを持つ UI コンポーネントが利用できます。
-
-| クラス | コンポーネント | 用途 |
-|--------|-------------|------|
-| `c--button` | `<Button>` | ボタン（`c--button--outline` バリエーションあり） |
-| `c--badge` | `<Badge>` | ラベル・バッジ（`c--badge--outline` バリエーションあり） |
-| `c--avatar` | `<Avatar>` | ユーザーアイコン |
-| `c--accordion` | `<Accordion>` | 折りたたみパネル（`_item`, `_panel`, `_button`, `_content`, `_icon` 子要素あり） |
-| `c--tabs` | `<Tabs>` | タブ切り替え UI（`_list`, `_tab`, `_panel` 子要素あり） |
-| `c--modal` | `<Modal>` | モーダルダイアログ（`_inner` 子要素あり） |
-| `c--details` | `<Details>` | details/summary（`_summary`, `_icon`, `_body` 子要素あり） |
-| `c--alert` | `<Alert>` | 警告・通知ボックス |
-| `c--callout` | `<Callout>` | 注釈・補足（`_head`, `_icon`, `_title`, `_body` 子要素あり） |
-| `c--chat` | `<Chat>` | チャット風 UI（`_avatar`, `_name`, `_body`, `_content`, `_deco` 子要素あり） |
-| `c--navMenu` | `<NavMenu>` | ナビゲーションメニュー（`_item`, `_link`, `_nest` 子要素あり） |
-| `c--shapeDivider` | `<ShapeDivider>` | 図形区切り線（`_inner`, `_svg` 子要素あり） |