@lism-css/mcp 0.10.4 → 0.12.0

package/dist/data/guides/tokens.md

@@ -0,0 +1,210 @@
+# デザイントークン
+
+Lism CSS では、余白・フォントサイズ・カラーなどの主要なCSSプロパティに対してデザイントークンを定義しています。
+トークン値は CSS 変数にマッピングされ、Props やユーティリティクラスから参照できます。
+
+CSSコードを書く場合やコンポーネントのPropsに値を指定する際は、明確な意図がない限りは固定値のハードコーディングを避け、デザイントークンの値を優先して使用してください。
+
+## TOC
+
+- [トークン概要テーブル](#トークン概要テーブル)
+- [余白 (space)](#余白-space)
+- [フォントサイズ (fz)](#フォントサイズ-fz)
+- [行間 (lh/hl)](#行間-lhhl)
+- [字間 (lts)](#字間-lts)
+- [フォント (ff)](#フォント-ff)
+- [ウェイト (fw)](#ウェイト-fw)
+- [透明度 (o)](#透明度-o)
+- [角丸 (bdrs)](#角丸-bdrs)
+- [影 (bxsh)](#影-bxsh)
+- [カラー](#カラー)
+- [トークン値の命名規則](#トークン値の命名規則)
+
+[詳細](https://lism-css.com/docs/tokens/)
+
+---
+
+## トークン概要テーブル
+
+| カテゴリ | トークン値 | CSS変数パターン | 例 |
+|---|---|---|---|
+| 余白 (space) | `5`, `10`, `15`, `20`, `30`, `40`, `50`, `60`, `70`, `80` | `--s{n}` | `--s20` |
+| フォントサイズ (fz) | `root`, `base`, `2xs`, `xs`, `s`, `m`, `l`, `xl`, `2xl`, `3xl`, `4xl`, `5xl` | `--fz--{key}` | `--fz--l` |
+| ハーフレディング・行間 (lh/hl) | `base`, `xs`, `s`, `l` | `--hl--{key}` | `--hl--s` |
+| 字間 (lts) | `base`, `s`, `l` | `--lts--{key}` | `--lts--s` |
+| フォント (ff) | `base`, `accent`, `mono` | `--ff--{key}` | `--ff--mono` |
+| ウェイト (fw) | `light`, `normal`, `bold` | `--fw--{key}` | `--fw--bold` |
+| 透明度 (o) | `-10`, `-20`, `-30` | `--o--n{n}` | `--o--n10` |
+| 角丸 (bdrs) | `10`, `20`, `30`, `40`, `99`, `inner` | `--bdrs--{key}` | `--bdrs--20` |
+| 影 (bxsh) | `10`, `20`, `30`, `40` | `--bxsh--{n}` | `--bxsh--20` |
+| サイズ (sz) | `xs`, `s`, `m`, `l`, `xl`, `min`, `full`, `container` | `--sz--{key}` | `--sz--l` |
+| アスペクト比 (ar) | `og` | `--ar--{key}` | `--ar--og` |
+| 書字方向 (writing) | `vertical` | `--writing--{key}` | `--writing--vertical` |
+| フロー余白 (flow) | `s`, `l` | `--flow--{key}` | `--flow--s` |
+| セマンティックカラー (c) | `base`, `base-2`, `text`, `text-2`, `divider`, `link`, `brand`, `accent` | `--{name}` | `--brand` |
+| パレットカラー (palette) | `red`, `blue`, `green`, `yellow`, `purple`, `orange`, `pink`, `gray`, `white`, `black` | `--{name}` | `--red` |
+
+
+---
+
+
+## 余白 (space)
+
+フィボナッチ数列ベースのスケーリング。`--s-unit`（≒ 8px）を基準単位とする。
+
+| CSS変数 | 値 | 実サイズ目安 |
+|---------|-----|------------|
+| `--s5` | `calc(0.5 * var(--s-unit))` | ≒ 4px |
+| `--s10` | `var(--s-unit)` | ≒ 8px |
+| `--s15` | `calc(1.5 * var(--s-unit))` | ≒ 12px |
+| `--s20` | `calc(2 * var(--s-unit))` | ≒ 16px |
+| `--s30` | `calc(3 * var(--s-unit))` | ≒ 24px |
+| `--s40` | `calc(5 * var(--s-unit))` | ≒ 40px |
+| `--s50` | `calc(8 * var(--s-unit))` | ≒ 64px |
+| `--s60` | `calc(13 * var(--s-unit))` | ≒ 104px |
+| `--s70` | `calc(21 * var(--s-unit))` | ≒ 168px |
+| `--s80` | `calc(34 * var(--s-unit))` | ≒ 272px |
+
+係数 `0.5, 1, 1.5, 2, 3, 5, 8, 13, 21, 34` はフィボナッチ数列に基づいている。`--s-unit` を上書きすることでスケール全体を調整可能。
+
+
+## フォントサイズ (fz)
+
+倍音列（調和数列）ベースの、ハーモニックモジュラースケーリングを採用。`--fz-mol`（デフォルト `8`）を分子とする `mol / (mol ± n)` の比率で算出される。
+
+| CSS変数 | 値 | 説明 |
+|---------|-----|------|
+| `--fz--5xl` | `calc(1em * var(--fz-mol) / (var(--fz-mol) - 6))` | 最大（mol/(mol-6)） |
+| `--fz--4xl` | `calc(1em * var(--fz-mol) / (var(--fz-mol) - 5))` | 特大（mol/(mol-5)） |
+| `--fz--3xl` | `calc(1em * var(--fz-mol) / (var(--fz-mol) - 4))` | 3XL（mol/(mol-4)） |
+| `--fz--2xl` | `calc(1em * var(--fz-mol) / (var(--fz-mol) - 3))` | 2XL（mol/(mol-3)） |
+| `--fz--xl` | `calc(1em * var(--fz-mol) / (var(--fz-mol) - 2))` | XL（mol/(mol-2)） |
+| `--fz--l` | `calc(1em * var(--fz-mol) / (var(--fz-mol) - 1))` | L（mol/(mol-1)） |
+| `--fz--m` | `1em` | M（基準） |
+| `--fz--s` | `calc(1em * var(--fz-mol) / (var(--fz-mol) + 1))` | S（mol/(mol+1)） |
+| `--fz--xs` | `calc(1em * var(--fz-mol) / (var(--fz-mol) + 2))` | XS（mol/(mol+2)） |
+| `--fz--2xs` | `calc(1em * var(--fz-mol) / (var(--fz-mol) + 3))` | 最小（mol/(mol+3)） |
+| `--fz--base` | `var(--REM)` | 本文の基本フォントサイズ（≒ 1rem） |
+| `--fz--root` | — | `:root` のフォントサイズ |
+
+`--fz-mol` を上書きすることでスケール全体を調整可能（7以上の値に対応）。
+
+
+## 行間 (lh/hl)
+
+ハーフレディングの大きさ。Lism CSSでは、`line-height` は `calc(1em + var(--hl) * 2)` で算出される。`--hl-unit`（≒ 2px）を基準単位とする。
+
+| CSS変数 | 値 | 説明 |
+|---------|-----|------|
+| `--hl--xs` | `var(--hl-unit)` | 極小の行間（≒ 2px） |
+| `--hl--s` | `calc(var(--hl-unit) * 2)` | 小さめの行間（≒ 4px） |
+| `--hl--base` | `calc(var(--hl-unit) * 3)` | 基本の行間（≒ 6px） |
+| `--hl--l` | `calc(var(--hl-unit) * 4)` | 大きめの行間（≒ 8px） |
+
+
+## 字間 (lts)
+
+| CSS変数 | 値 | 説明 |
+|---------|-----|------|
+| `--lts--base` | `normal` | 基本の文字間隔 |
+| `--lts--s` | `-0.05em` | 狭めの文字間隔 |
+| `--lts--l` | `0.05em` | 広めの文字間隔 |
+
+
+## フォント (ff)
+
+| CSS変数 | 値 |
+|---------|-----|
+| `--ff--base` | `-apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif, 'Segoe UI Emoji'` |
+| `--ff--accent` | `'Garamond', 'Baskerville', 'Times New Roman', serif` |
+| `--ff--mono` | `ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace` |
+
+
+## ウェイト (fw)
+
+| CSS変数 | 値 | 説明 |
+|---------|-----|------|
+| `--fw--light` | `300` | 細め |
+| `--fw--normal` | `400` | 標準 |
+| `--fw--bold` | `600` | 太字（Hiragino Sans W6 相当） |
+
+数値ユーティリティ: `-fw:100` 〜 `-fw:900` も使用可能。
+
+
+## 透明度 (o)
+
+| CSS変数 | 値 | 説明 |
+|---------|-----|------|
+| `--o--n10` | `0.75` | 75%の不透明度 |
+| `--o--n20` | `0.5` | 50%の不透明度 |
+| `--o--n30` | `0.25` | 25%の不透明度 |
+
+
+## 角丸 (bdrs)
+
+| CSS変数 | 値 | 説明 |
+|---------|-----|------|
+| `--bdrs--10` | `0.25rem` | ≒ 4px |
+| `--bdrs--20` | `0.5rem` | ≒ 8px |
+| `--bdrs--30` | `1rem` | ≒ 16px |
+| `--bdrs--40` | `1.5rem` | ≒ 24px |
+| `--bdrs--99` | `99rem` | 完全な丸（pill） |
+| `--bdrs--inner` | `calc(var(--bdrs, 0px) - var(--p, 0px))` | 内側の角丸（親要素に合わせる） |
+
+
+## 影 (bxsh)
+
+`--shc`（シャドウカラー: `hsl(220 4% 8% / 5%)`）と `--shsz--{n}`（シャドウサイズ）を組み合わせた複合シャドウ。使用時は `set--shadow` クラスの併用が必要（影色 `--shc` の再計算のため）。
+
+| CSS変数 | 値 | 説明 |
+|---------|-----|------|
+| `--bxsh--10` | `var(--sh--5), var(--sh--10)` | step 10 |
+| `--bxsh--20` | `var(--sh--10), var(--sh--20)` | step 20 |
+| `--bxsh--30` | `var(--sh--20), var(--sh--30)` | step 30 |
+| `--bxsh--40` | `var(--sh--30), var(--sh--40)` | step 40（最も濃い） |
+
+
+## カラー
+
+### セマンティックカラー
+
+サイト全体のカラー設計に使用するトークン。
+
+| CSS変数 | デフォルト値 | 説明 |
+|---------|------------|------|
+| `--base` | `hsl(224 4% 99%)` | ベース背景色 |
+| `--base-2` | `hsl(224 8% 95%)` | 代替背景色 |
+| `--text` | `hsl(224 4% 8%)` | 基本テキスト色 |
+| `--text-2` | `hsl(224 6% 32%)` | 補助テキスト色 |
+| `--divider` | `hsl(224 8% 88%)` | 区切り線色 |
+| `--link` | `oklch(50% 0.3 240)` | リンク色 |
+| `--brand` | `#1e5f8c` | ブランド色 |
+| `--accent` | `#d94a6a` | アクセント色 |
+
+### パレットカラー
+
+OKLCH で定義されたカラーパレット。`--L`（明度）と `--C`（彩度）の基準値を調整するとパレット全体の色味を変更可能。デフォルト: `--L: 60%`, `--C: 0.22`。
+
+| CSS変数 | 値 |
+|---------|-----|
+| `--red` | `oklch(var(--L) var(--C) 20)` |
+| `--orange` | `oklch(calc(var(--L) + 4%) calc(var(--C) - 0.01) 52)` |
+| `--yellow` | `oklch(calc(var(--L) + 12%) calc(var(--C) - 0.025) 84)` |
+| `--green` | `oklch(calc(var(--L) + 4%) calc(var(--C) - 0.02) 152)` |
+| `--blue` | `oklch(calc(var(--L) - 2%) calc(var(--C) + 0.01) 260)` |
+| `--purple` | `oklch(calc(var(--L) - 4%) calc(var(--C) + 0.02) 292)` |
+| `--pink` | `oklch(calc(var(--L) + 2%) calc(var(--C) + 0.02) 348)` |
+| `--gray` | `oklch(calc(var(--L) - 4%) 0.04 256)` |
+| `--black` | `#000` |
+| `--white` | `#fff` |
+
+- `c`, `bgc` 等のカラー系 Props では、セマンティックカラー → パレットカラーの順で検索される
+- どちらも最終的に `var(--{name})` に変換される
+
+
+## トークン値の命名規則
+
+1. **`s`, `m`, `l`, `xl` 等のサイズ表記** — ベース値（`base` or `m`）があり、それに対する大小を表すトークン
+   - `:root`/`body` にセットされている値に戻すものは `base`、そうでない中心値は `m`
+2. **`10`, `20`, `30` 等の数値表記** — `0`（`none`）が基準で、段階的に値を持つトークン
+3. **セマンティック名** — プロパティ固有の意味を持つ名前（例: `--ar--og`, `--ff--mono`など）

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

@@ -0,0 +1,81 @@
+# ユーティリティクラス（`u--`）
+
+`u--` プレフィックスを持つユーティリティクラスは、用途が明確なスタイルセットをまとめて適用するクラスです。  
+`@layer lism-utility` に属します。
+
+> **Property Class との違い:**  
+> Property Class（`-{prop}:{value}`）は個別の CSS プロパティを 1 対 1 で制御するクラスです。  
+> ユーティリティクラス（`u--{name}`）は複数のプロパティや子要素への効果をまとめて提供するもので、まったく別の仕組みです。
+
+## TOC
+
+- [コアに含まれるユーティリティ一覧](#コアに含まれるユーティリティ一覧)
+- [使用例](#使用例)
+- [Opt-in ユーティリティ](#opt-in-ユーティリティ)
+- [ユーザー定義のユーティリティクラス](#ユーザー定義のユーティリティクラス)
+
+[詳細](https://lism-css.com/docs/utility-class/)
+
+---
+
+## コアに含まれるユーティリティ一覧
+
+以下は `lism-css` コアの CSS に組み込まれているユーティリティクラスです。
+
+| クラス | 用途 | ソースファイル |
+|--------|------|---------------|
+| `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) |
+
+
+## 使用例
+
+```html
+<!-- u--cbox: キーカラーで色付きボックス -->
+<div class="u--cbox -bd -p:20" style="--keycolor: var(--blue)">...</div>
+
+<!-- u--trim: テキスト余白の詰め -->
+<p class="u--trim">テキスト...</p>
+
+<!-- u--collapseGrid: グリッド子要素間の境界線 -->
+<div class="l--grid u--collapseGrid" style="--gtc: 1fr 1fr">
+  <div>A</div>
+  <div>B</div>
+</div>
+```
+
+```jsx
+// JSX での使用（className で指定）
+<Lism className="u--cbox" keycolor="red" bd p="20">...</Lism>
+<Text className="u--trim">テキスト...</Text>
+<Grid className="u--collapseGrid" gtc="1fr 1fr">...</Grid>
+```
+
+
+## Opt-in ユーティリティ
+
+コアには含まれないが、ドキュメントで紹介されている追加ユーティリティの例:
+
+- `u--inlineCenter`: 絵文字やインラインアイコンをテキスト中央に揃える
+
+これらは必要に応じて自分で CSS を追加して使用します。
+
+
+## ユーザー定義のユーティリティクラス
+
+`u--{name}` の命名規則に従えば、独自のユーティリティクラスを自由に定義できます。  
+定義は `@layer lism-utility` の中で行ってください。
+
+```css
+@layer lism-utility {
+  .u--myUtil {
+    /* カスタムスタイル */
+  }
+}
+```

package/dist/data/meta.js

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

package/dist/index.js

@@ -1,14 +1,17 @@
 import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
 import { preloadAll } from './lib/load-data.js';
+import { preloadGuides } from './lib/load-markdown.js';
 import { registerGetOverview } from './tools/get-overview.js';
 import { registerGetTokens } from './tools/get-tokens.js';
 import { registerGetPropsSystem } from './tools/get-props-system.js';
 import { registerGetComponent } from './tools/get-component.js';
+import { registerGetGuide } from './tools/get-guide.js';
 import { registerSearchDocs } from './tools/search-docs.js';
 import { registerConvertCss } from './tools/convert-css.js';
 async function main() {
     preloadAll();
+    preloadGuides();
     const server = new McpServer({
         name: 'lism-css',
         version: '0.1.0',
@@ -17,6 +20,7 @@ async function main() {
     registerGetTokens(server);
     registerGetPropsSystem(server);
     registerGetComponent(server);
+    registerGetGuide(server);
     registerSearchDocs(server);
     registerConvertCss(server);
     const transport = new StdioServerTransport();

package/dist/lib/load-data.js

@@ -2,7 +2,7 @@ import { readFileSync } from 'node:fs';
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { z } from 'zod';
-import { OverviewDataSchema, TokenCategorySchema, PropsSystemDataSchema, ComponentInfoSchema, DocsEntrySchema } from './schemas.js';
+import { DocsEntrySchema } from './schemas.js';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const dataDir = resolve(__dirname, '..', 'data');
 const cache = new Map();
@@ -16,14 +16,5 @@ export function loadJSON(filename, schema) {
     return data;
 }
 export function preloadAll() {
-    const entries = [
-        { filename: 'overview.json', schema: OverviewDataSchema },
-        { filename: 'tokens.json', schema: z.array(TokenCategorySchema) },
-        { filename: 'props-system.json', schema: PropsSystemDataSchema },
-        { filename: 'components.json', schema: z.array(ComponentInfoSchema) },
-        { filename: 'docs-index.json', schema: z.array(DocsEntrySchema) },
-    ];
-    for (const { filename, schema } of entries) {
-        loadJSON(filename, schema);
-    }
+    loadJSON('docs-index.json', z.array(DocsEntrySchema));
 }

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

@@ -0,0 +1,6 @@
+/** guides/ ディレクトリから Markdown ファイルを読み込む（キャッシュ付き） */
+export declare function loadMarkdown(filename: string): string;
+/** 利用可能なガイドファイル名の一覧を返す */
+export declare function getGuideFilenames(): string[];
+/** 起動時に全ガイドを一括読み込みしてキャッシュに載せる */
+export declare function preloadGuides(): void;

package/dist/lib/load-markdown.js

@@ -0,0 +1,29 @@
+import { existsSync, readFileSync, readdirSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+// スキル Markdown の正本を直接参照（開発・テスト時）
+// npm パッケージとして利用される場合は dist/data/guides/ にフォールバック
+const skillsDir = resolve(__dirname, '..', '..', '..', '..', '.claude', 'skills', 'lism-css-guide');
+const distDir = resolve(__dirname, '..', 'data', 'guides');
+const guidesDir = existsSync(skillsDir) ? skillsDir : distDir;
+const cache = new Map();
+/** guides/ ディレクトリから Markdown ファイルを読み込む（キャッシュ付き） */
+export function loadMarkdown(filename) {
+    if (cache.has(filename))
+        return cache.get(filename);
+    const filePath = resolve(guidesDir, filename);
+    const content = readFileSync(filePath, 'utf-8');
+    cache.set(filename, content);
+    return content;
+}
+/** 利用可能なガイドファイル名の一覧を返す */
+export function getGuideFilenames() {
+    return readdirSync(guidesDir).filter((f) => f.endsWith('.md'));
+}
+/** 起動時に全ガイドを一括読み込みしてキャッシュに載せる */
+export function preloadGuides() {
+    for (const filename of getGuideFilenames()) {
+        loadMarkdown(filename);
+    }
+}

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

@@ -0,0 +1,42 @@
+/**
+ * Markdown から指定した見出しのセクションを抽出する。
+ * 同レベル以上の次の見出しが来るまでの内容を返す。
+ * @param md - Markdown 全文
+ * @param heading - 見出しテキスト（`#` プレフィックスあり・なし両可）
+ */
+export declare function extractSection(md: string, heading: string): string;
+/**
+ * Markdown から全ての見出しとその開始行を抽出する。
+ */
+export declare function listHeadings(md: string): {
+    level: number;
+    text: string;
+    line: number;
+}[];
+export interface PropRow {
+    /** Lism Prop 名（例: "fz"） */
+    prop: string;
+    /** CSS プロパティ名（例: "font-size"）。変数形式（"--hl"）も含む */
+    cssProperty: string;
+    /** 所属する ### セクション名 */
+    sectionName: string;
+    /** プリセット値クラス列の生テキスト（例: "-fz:root, -fz:base, ..."） */
+    presetColumn: string;
+}
+/**
+ * property-class.md のテーブルを全て解析して PropRow[] を返す。
+ * `| Prop | CSS プロパティ | ...` 形式のテーブルのみ対象とする。
+ */
+export declare function parsePropRows(md: string): PropRow[];
+/**
+ * Markdown からコンポーネント名に一致するセクションを探して返す。
+ *
+ * components-ui.md のように各コンポーネントが `## ComponentName` で始まる場合に有効。
+ */
+export declare function findComponentByHeading(md: string, name: string): string;
+/**
+ * Markdown 内のテーブルセル（`` `<ComponentName>` ``）からコンポーネントを含む
+ * `##` セクション全体を返す。
+ * components-core.md のように複数コンポーネントが同一セクションに列挙されている場合に使う。
+ */
+export declare function findComponentInTables(md: string, name: string): string;

package/dist/lib/markdown-utils.js

@@ -0,0 +1,158 @@
+/** 見出しの `#` レベルを返す（見出しでなければ 0） */
+function headingLevel(line) {
+    const m = line.match(/^(#{1,6})\s/);
+    return m ? m[1].length : 0;
+}
+/**
+ * Markdown から指定した見出しのセクションを抽出する。
+ * 同レベル以上の次の見出しが来るまでの内容を返す。
+ * @param md - Markdown 全文
+ * @param heading - 見出しテキスト（`#` プレフィックスあり・なし両可）
+ */
+export function extractSection(md, heading) {
+    const headingText = heading.replace(/^#+\s*/, '').trim();
+    const lines = md.split('\n');
+    let startIdx = -1;
+    let level = 0;
+    for (let i = 0; i < lines.length; i++) {
+        const lv = headingLevel(lines[i]);
+        if (lv > 0 && lines[i].replace(/^#+\s*/, '').trim() === headingText) {
+            startIdx = i;
+            level = lv;
+            break;
+        }
+    }
+    if (startIdx === -1)
+        return '';
+    let endIdx = lines.length;
+    for (let i = startIdx + 1; i < lines.length; i++) {
+        const lv = headingLevel(lines[i]);
+        if (lv > 0 && lv <= level) {
+            endIdx = i;
+            break;
+        }
+    }
+    return lines.slice(startIdx, endIdx).join('\n').trimEnd();
+}
+/**
+ * Markdown から全ての見出しとその開始行を抽出する。
+ */
+export function listHeadings(md) {
+    return md.split('\n').flatMap((line, i) => {
+        const lv = headingLevel(line);
+        if (lv === 0)
+            return [];
+        return [{ level: lv, text: line.replace(/^#+\s*/, '').trim(), line: i }];
+    });
+}
+/**
+ * property-class.md のテーブルを全て解析して PropRow[] を返す。
+ * `| Prop | CSS プロパティ | ...` 形式のテーブルのみ対象とする。
+ */
+export function parsePropRows(md) {
+    const lines = md.split('\n');
+    const rows = [];
+    let currentSection = '';
+    let inPropTable = false;
+    for (const line of lines) {
+        const lv = headingLevel(line);
+        // セクション見出しを追跡（### レベル）
+        if (lv >= 2) {
+            currentSection = line.replace(/^#+\s*/, '').trim();
+            inPropTable = false;
+            continue;
+        }
+        // Property Class テーブルのヘッダー行を検出
+        if (line.includes('Prop') && line.includes('CSS プロパティ')) {
+            inPropTable = true;
+            continue;
+        }
+        // 区切り行はスキップ
+        if (inPropTable && /^\|[-\s|:]+\|/.test(line)) {
+            continue;
+        }
+        // テーブルの終了を検出
+        if (inPropTable && !line.startsWith('|')) {
+            inPropTable = false;
+            continue;
+        }
+        // データ行を解析
+        if (inPropTable && line.startsWith('|')) {
+            const cells = line
+                .split('|')
+                .map((c) => c.trim())
+                .filter(Boolean);
+            if (cells.length >= 2) {
+                const prop = cells[0].replace(/`/g, '').trim();
+                // CSS プロパティ: バッククォート除去、括弧内の注釈は保持しない
+                const cssPropertyRaw = cells[1].replace(/`/g, '').trim();
+                // `line-height`（`--hl` 経由） のような括弧注釈を除去
+                const cssProperty = cssPropertyRaw
+                    .replace(/（[^）]*）$/, '')
+                    .replace(/\([^)]*\)$/, '')
+                    .trim();
+                if (prop && cssProperty) {
+                    const presetColumn = cells.length >= 3 ? cells[2].replace(/`/g, '').trim() : '';
+                    rows.push({ prop, cssProperty, sectionName: currentSection, presetColumn });
+                }
+            }
+        }
+    }
+    return rows;
+}
+// ----------------------------------------------------------------
+// コンポーネント検索
+// ----------------------------------------------------------------
+/**
+ * Markdown からコンポーネント名に一致するセクションを探して返す。
+ *
+ * components-ui.md のように各コンポーネントが `## ComponentName` で始まる場合に有効。
+ */
+export function findComponentByHeading(md, name) {
+    return extractSection(md, name);
+}
+/**
+ * Markdown 内のテーブルセル（`` `<ComponentName>` ``）からコンポーネントを含む
+ * `##` セクション全体を返す。
+ * components-core.md のように複数コンポーネントが同一セクションに列挙されている場合に使う。
+ */
+export function findComponentInTables(md, name) {
+    const nameLower = name.toLowerCase();
+    const lines = md.split('\n');
+    // コンポーネント名のパターン: `<Flex>`, `<flex>`, または単純に "flex" がテーブル行に含まれるか
+    const escaped = name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const pattern = new RegExp(`\`?<${escaped}>?\`?`, 'i');
+    // まず対象行を探す
+    let targetLineIdx = -1;
+    for (let i = 0; i < lines.length; i++) {
+        if (lines[i].startsWith('|') && (pattern.test(lines[i]) || lines[i].toLowerCase().includes(`\`${nameLower}\``))) {
+            targetLineIdx = i;
+            break;
+        }
+    }
+    if (targetLineIdx === -1)
+        return '';
+    // 対象行を含む ## セクションの開始を遡って探す
+    let sectionStart = -1;
+    let sectionLevel = 0;
+    for (let i = targetLineIdx; i >= 0; i--) {
+        const lv = headingLevel(lines[i]);
+        if (lv === 2) {
+            sectionStart = i;
+            sectionLevel = lv;
+            break;
+        }
+    }
+    if (sectionStart === -1)
+        return lines.slice(0, targetLineIdx + 20).join('\n');
+    // セクションの終端を探す
+    let sectionEnd = lines.length;
+    for (let i = sectionStart + 1; i < lines.length; i++) {
+        const lv = headingLevel(lines[i]);
+        if (lv > 0 && lv <= sectionLevel) {
+            sectionEnd = i;
+            break;
+        }
+    }
+    return lines.slice(sectionStart, sectionEnd).join('\n').trimEnd();
+}