@lism-css/mcp 0.12.0 → 0.14.0

package/dist/data/guides/primitives/l--tileGrid.md

@@ -0,0 +1,61 @@
+# l--tileGrid / `<TileGrid>`
+
+`cols`（列数）と `rows`（行数）を指定して、**均等なタイル型グリッドレイアウト**を構成するクラス。内部的には `grid-template: repeat(rows, minmax(0, 1fr)) / repeat(cols, minmax(0, 1fr))` を使用します。
+
+## 基本情報
+
+- クラス名: `l--tileGrid`
+- コンポーネント: `<TileGrid>`
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/layout/_tileGrid.scss
+- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/l--tileGrid/
+
+## 専用Props
+
+| Prop | CSS変数 | 説明 | デフォルト |
+|------|--------|------|------------|
+| `cols` | `--cols` | 列数を指定。配列でブレイクポイント指定可 | `1` |
+| `rows` | `--rows` | 行数を指定。配列でブレイクポイント指定可 | `1` |
+
+## Usage
+
+### 基本的な使い方
+
+```jsx
+<TileGrid cols="3" rows="3" g="5" min-h="50svh">
+  <Box p="20" bgc="base-2">item1</Box>
+  <Box p="20" bgc="base-2">item2</Box>
+  <Box p="20" bgc="base-2">item3</Box>
+  <Box p="20" bgc="base-2">item4</Box>
+  <Box p="20" bgc="base-2" gc="span 2">item5</Box>
+  <Center gc="3" gr="1 / -1" p="20" bgc="blue">item6</Center>
+</TileGrid>
+```
+
+```html
+<div class="l--tileGrid -g:5 -min-h:50svh" style="--cols: 3; --rows: 3">
+  <div class="l--box -p:20 -bgc:base-2">item1</div>
+  <div class="l--box -p:20 -bgc:base-2">item2</div>
+  <div class="l--box -p:20 -bgc:base-2">item3</div>
+  <div class="l--box -p:20 -bgc:base-2">item4</div>
+  <div class="l--box -p:20 -bgc:base-2 -gc:span 2">item5</div>
+  <div class="l--center -p:20 -bgc:blue" style="grid-column: 3; grid-row: 1 / -1">item6</div>
+</div>
+```
+
+### ブレイクポイント別指定
+
+`cols` / `rows` をブレイクポイントで切り替え、`gaf`（`grid-auto-flow`）と組み合わせて動的レイアウトも構築できます。
+
+```jsx
+<TileGrid cols={['2', '3']} rows="4" min-h="50svh" gaf="row dense">
+  <Box gc={['1 / -1', 'span 2']} gr={['span 2', '1 / -1']} p="20" bgc="base-2">A</Box>
+  <Box p="20" bgc="green:20%">B</Box>
+  <Box p="20" bgc="blue:20%">C</Box>
+</TileGrid>
+```
+
+## 関連プリミティブ
+
+- [l--columns](./l--columns.md) — 等幅列のみ（1D）のカラム
+- [l--fluidCols](./l--fluidCols.md) — 自動折り返し型段組
+- [l--grid](./l--grid.md) — 汎用 CSS Grid

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

@@ -53,7 +53,7 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 
 ## 全 Prop 一覧
 
-ソース: [props.ts](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/config/defaults/props.ts)
+ソース: [props.ts](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/config/defaults/props.ts)
 
 ### タイポグラフィ
 
@@ -98,9 +98,9 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 | `sz` | `inline-size` | — | — |
 | `min-sz` | `min-inline-size` | — | — |
 | `max-sz` | `max-inline-size` | `-max-sz:xs`, `-max-sz:s`, `-max-sz:m`, `-max-sz:l`, `-max-sz:xl`, `-max-sz:full`, `-max-sz:container` | — |
-| `ysz` | `block-size` | — | — |
-| `min-ysz` | `min-block-size` | — | — |
-| `max-ysz` | `max-block-size` | — | — |
+| `bsz` | `block-size` | — | — |
+| `min-bsz` | `min-block-size` | — | — |
+| `max-bsz` | `max-block-size` | — | — |
 
 **`max-sz` の特殊クラス:**
 - `-max-sz:full` — `max-inline-size: 100%`。`.set--gutter` 内では gutter 分を含めた全幅に拡張
@@ -125,7 +125,8 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 | `keycolor` | `--keycolor` 変数のみ | — | — |
 
 セマンティックカラー: `base`, `base-2`, `text`, `text-2`, `divider`, `link`, `brand`, `accent`  
-パレットカラー: `red`, `blue`, `green`, `yellow`, `purple`, `orange`, `pink`, `gray`, `white`, `black`, `keycolor`
+パレットカラー: `red`, `blue`, `green`, `yellow`, `purple`, `orange`, `pink`, `gray`, `white`, `black`  
+キーカラー変数: `keycolor`（ユーザー定義の `--keycolor` を参照する独立変数。詳細は `tokens.md` を参照）
 
 ### 角丸
 
@@ -270,7 +271,7 @@ SPACE トークン（全値）: `5`, `10`, `15`, `20`, `30`, `40`, `50`, `60`, `
 
 ### ボーダー（`bd` 系）
 
-[詳細](https://lism-css.com/docs/props/bd/)
+[詳細](https://lism-css.com/docs/property-class/bd/)
 
 Lism CSS のボーダーは CSS 変数（`--bds`, `--bdw`, `--bdc`）で管理される特殊な仕様です。  
 `-bd` または `-bd-{side}` クラスを付けると、初期値（`--bds: solid`, `--bdw: 1px`, `--bdc: var(--divider)`）がセットされ、`bds`, `bdc`, `bdw` Prop で個別に上書きできます。
@@ -311,7 +312,7 @@ Lism CSS のボーダーは CSS 変数（`--bds`, `--bdw`, `--bdc`）で管理
 
 ### ホバー（`hov` 系）
 
-[詳細](https://lism-css.com/docs/props/hov/)
+[詳細](https://lism-css.com/docs/property-class/hov/)
 
 ホバーエフェクト用のクラスです。`-hov:{prop}` 系と `-hov:to:*` 系の2種類があります。
 
@@ -349,7 +350,7 @@ Lism CSS のボーダーは CSS 変数（`--bds`, `--bdw`, `--bdc`）で管理
 
 ```jsx
 // set--hov + set--transition が必要
-<Box set={['hov', 'transition']}>
+<Box set="hov transition">
   <Box hov={{ to: 'show' }}>ホバーで表示</Box>
 </Box>
 ```
@@ -358,11 +359,11 @@ Lism CSS のボーダーは CSS 変数（`--bds`, `--bdw`, `--bdc`）で管理
 
 | Prop | CSS プロパティ | プリセット値クラス | BP クラス |
 |------|--------------|-------------|-----|
-| `ovwrap` | `overflow-wrap` | `-ovwrap:anywhere` | — |
-| `whspace` | `white-space` | `-whspace:nowrap` | — |
+| `ovw` | `overflow-wrap` | `-ovw:anywhere` | — |
+| `whs` | `white-space` | `-whs:nowrap` | — |
 | `float` | `float` | `-float:left`, `-float:right` | — |
 | `clear` | `clear` | `-clear:both` | — |
-| `isolation` | `isolation` | `-isolation:isolate` | — |
+| `iso` | `isolation` | `-iso:isolate` | — |
 
 
 ## 値の省略形（例外一覧）

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

@@ -3,6 +3,8 @@
 `@layer lism-base` に属し、特定の機能を有効にするために CSS変数やベーススタイルをセットアップするクラス群です。
 HTML では直接クラスを付与し、Lism コンポーネントでは `set` prop（`set="plain"`, `set="shadow"` 等）で指定します。
 
+`set` prop の記法（複数値指定・`-` prefix による除外）は [components-core.md](./components-core.md#共通-props) を参照してください。
+
 ## TOC
 
 - [`set--plain`](#set--plain)
@@ -11,9 +13,7 @@ HTML では直接クラスを付与し、Lism コンポーネントでは `set`
 - [`set--transition`](#set--transition)
 - [`set--gutter`](#set--gutter)
 - [`set--innerRs`](#set--innerrs)
-- [`set--bp`](#set--bp)
-
-[詳細](https://lism-css.com/docs/set/)
+[詳細](https://lism-css.com/docs/set-class/)
 
 ---
 
@@ -23,14 +23,12 @@ HTML では直接クラスを付与し、Lism コンポーネントでは `set`
 
 | クラス | ソースファイル |
 |--------|---------------|
-| `set--plain` | [`_plain.scss`](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/src/scss/base/set/_plain.scss) |
-| `set--shadow` | [`_shadow.scss`](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/src/scss/base/tokens/_shadow.scss) |
-| `set--hov` | [`_hov.scss`](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/src/scss/base/set/_hov.scss) |
-| `set--transition` | [`_transition.scss`](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/src/scss/base/set/_transition.scss) |
-| `set--gutter` | [`_gutter.scss`](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/src/scss/base/set/_gutter.scss) |
-| `set--innerRs` | [`_innerRs.scss`](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/src/scss/base/set/_innerRs.scss) |
-| `set--bp` | [`_bp.scss`](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/src/scss/base/set/_bp.scss) |
-
+| `set--plain` | [`_plain.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_plain.scss) |
+| `set--shadow` | [`_shadow.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/tokens/_shadow.scss) |
+| `set--hov` | [`_hov.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_hov.scss) |
+| `set--transition` | [`_transition.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_transition.scss) |
+| `set--gutter` | [`_gutter.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_gutter.scss) |
+| `set--innerRs` | [`_innerRs.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_innerRs.scss) |
 ---
 
 ## `set--plain`
@@ -84,7 +82,7 @@ HTML では直接クラスを付与し、Lism コンポーネントでは `set`
 .-hov\:test {
   color: var(--_isHov, green) var(--_notHov, red); /* hover時はgreen, 非hover時はred*/
   box-shadow: var(--_isHov, var(--bxsh--30)); /* hover時はshadowをつける（非hover時は無効な値） */
-  opacity: var(--_notHov, var(--o--n20)); /* 非hover時は不透明度を下げる（hover時は無効な値） */
+  opacity: var(--_notHov, var(--o---20)); /* 非hover時は不透明度を下げる（hover時は無効な値） */
 }
 ```
 
@@ -93,7 +91,7 @@ HTML では直接クラスを付与し、Lism コンポーネントでは `set`
 例えば、親のボックスがhoverされたら、その内部の画像をズームするようなケースで活用でき、`-hov:to:zoom`クラスが標準で用意されています。
 
 ```html
-<a href="###" class="l--frame is--linkBox set--hov -ar:21/9 -ov:hidden">
+<a href="###" class="l--frame is--boxLink set--hov -ar:21/9 -ov:hidden">
   <img class="set--transition -hov:to:zoom" src="https://cdn.lism-css.com/img/a-2.jpg" width="960" height="640" loading="lazy" />
   <div class="is--layer -bgc" style="--c: #fff; --bgc: rgb(0 0 0 / 50%)"></div>
   <div class="l--center is--layer -c" style="--c: #fff;">
@@ -175,16 +173,3 @@ HTML では直接クラスを付与し、Lism コンポーネントでは `set`
 ```
 
 
-## `set--bp`
-
-ブレークポイント判定用の hack 変数をセットします。コンテナクエリで各ブレークポイントを超えた時に空変数がセットされ、CSS の空変数トリックで条件分岐に使えます。
-`sm`, `md`にのみ対応しています。（`--_is_sm`, `--_is_md`が定義されます。）
-
-smサイズ以上でテキストカラーを赤に変える例:
-
-```html
-<div class="set--bp -p:20" style="color: var(--_is_sm) red">...</div>
-```
-```jsx
-<Lism set="bp" p="20" style={{ color: 'var(--_is_sm) red;' }}>...</Lism>
-```

package/dist/data/guides/tokens.md

@@ -28,18 +28,17 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 | カテゴリ | トークン値 | CSS変数パターン | 例 |
 |---|---|---|---|
-| 余白 (space) | `5`, `10`, `15`, `20`, `30`, `40`, `50`, `60`, `70`, `80` | `--s{n}` | `--s20` |
+| 余白 (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` |
+| 透明度 (o) | `-10`, `-20`, `-30` | `--o--{-N}` | `--o---10` |
 | 角丸 (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` |
+| 影 (bxsh) | `10`, `20`, `30`, `40` | `--bxsh--{N}` | `--bxsh--20` |
+| サイズ (sz) | `xs`, `s`, `m`, `l`, `xl`, `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` |
@@ -135,9 +134,9 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 | CSS変数 | 値 | 説明 |
 |---------|-----|------|
-| `--o--n10` | `0.75` | 75%の不透明度 |
-| `--o--n20` | `0.5` | 50%の不透明度 |
-| `--o--n30` | `0.25` | 25%の不透明度 |
+| `--o---10` | `0.75` | 75%の不透明度 |
+| `--o---20` | `0.5` | 50%の不透明度 |
+| `--o---30` | `0.25` | 25%の不透明度 |
 
 
 ## 角丸 (bdrs)
@@ -154,7 +153,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 ## 影 (bxsh)
 
-`--shc`（シャドウカラー: `hsl(220 4% 8% / 5%)`）と `--shsz--{n}`（シャドウサイズ）を組み合わせた複合シャドウ。使用時は `set--shadow` クラスの併用が必要（影色 `--shc` の再計算のため）。
+`--shc`（シャドウカラー: `hsl(220 4% 8% / 5%)`）と `--shsz--{N}`（シャドウサイズ）を組み合わせた複合シャドウ。使用時は `set--shadow` クラスの併用が必要（影色 `--shc` の再計算のため）。
 
 | CSS変数 | 値 | 説明 |
 |---------|-----|------|
@@ -198,6 +197,24 @@ OKLCH で定義されたカラーパレット。`--L`（明度）と `--C`（彩
 | `--black` | `#000` |
 | `--white` | `#fff` |
 
+### キーカラー変数 (`--keycolor`)
+
+`--keycolor` は、カラートークンとは性質が異なる。初めから値があるわけではない。ボックス全体のカラーリングなどを行う際の「軸となる色」を指定するための変数。
+
+`--keycolor: var(--red)` のように指定しておくことで、そのボックス自身や子要素のカラー Props（`c`, `bgc`, `bdc` など）で 特定の色をハードコーディングせずに `--keycolor` 経由で参照できるようにすることができる。代表的な使用例は `u--cbox` ユーティリティクラス。
+
+```html
+<!-- ボックスにキーカラーを設定、テキストをキーカラーに連動させる例 -->
+<div class="u--cbox" style="--keycolor: var(--red)">
+  <p class="-c" style="-c:var(--keycolor)">...</p>
+</div>
+```
+```jsx
+<Lism class="u--cbox" keycolor="var(--red)">
+  <Text c="keycolor">...</Text>
+</Lism>
+```
+
 - `c`, `bgc` 等のカラー系 Props では、セマンティックカラー → パレットカラーの順で検索される
 - どちらも最終的に `var(--{name})` に変換される
 

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-17',
+    sourceCommit: '38761f59',
     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/DummyText.mdx`             → `ui/dummytext`
+ */
+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 形式の問い合わせには componentAliasMap のみを照合し、
+ *  クラス専用プリミティブへの false positive を避けるために分離している。 */
+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 のみと照合し、
+            //   クラス専用プリミティブへの 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 と同じインターフェースを返す。