@lism-css/mcp 0.23.0 → 0.24.0

package/dist/data/guides/components-ui.md

@@ -48,7 +48,7 @@ import { Button } from '@lism-css/ui/astro/Button';
 **構造:** `Accordion.Root > Accordion.Item > (Accordion.Heading > Accordion.Button) + Accordion.Panel`（`Accordion.Icon` は自動で含まれる）
 
 | Prop | 対象 | 型 | デフォルト | 説明 |
-|------|------|-----|----------|------|
+| --- | --- | --- | --- | --- |
 | `allowMultiple` | Root | `boolean` | — | 複数アイテムの同時展開を許可 |
 | `isOpen` | Item / Button / Panel | `boolean` | `false` | アイテムを初期展開。Item・Button・Panel の3つ揃えて指定（Item=`data-opened` 付与、Button=`aria-expanded`、Panel=`hidden` 解除） |
 | `as` | Heading | `string` | `div` | 見出しのHTMLタグ。`div` 時は `role='heading'` が自動付与。`h2`〜`h6` 指定時は role なし |
@@ -74,7 +74,7 @@ import { Button } from '@lism-css/ui/astro/Button';
 プリセット: `alert`=alert/red, `point`=lightbulb/orange（`tip`も同じ）, `warning`=warning/yellow, `check`=check-circle/green, `help`=question/purple, `info`=info/blue, `note`=note/gray。
 
 | Prop | 型 | デフォルト | 説明 |
-|------|-----|----------|------|
+| --- | --- | --- | --- |
 | `type` | `'alert' \| 'point' \| 'tip' \| 'warning' \| 'check' \| 'help' \| 'info' \| 'note'` | `'alert'` | アラートタイプ。keycolor と icon の組み合わせプリセット |
 | `keycolor` | `string` | — | キーカラー |
 | `icon` | `ReactNode \| string` | — | カスタムアイコン |
@@ -93,7 +93,7 @@ import { Button } from '@lism-css/ui/astro/Button';
 アバター（プロフィール画像）コンポーネント。Frame ベースの円形画像表示。`c--avatar` クラスが付与される。
 
 | Prop | 型 | デフォルト | 説明 |
-|------|-----|----------|------|
+| --- | --- | --- | --- |
 | `src` | `string` | — | 画像URL |
 | `alt` | `string` | — | 代替テキスト |
 | `size` | `string` | `'1.5em'` | アバターのサイズ |
@@ -110,7 +110,7 @@ import { Button } from '@lism-css/ui/astro/Button';
 バッジ（ラベル）コンポーネント。`span` 要素としてインライン表示。`c--badge` クラスが付与される。
 
 | Prop | 型 | デフォルト | 説明 |
-|------|-----|----------|------|
+| --- | --- | --- | --- |
 | `variant` | `string` | — | バリエーション（`'outline'` 等）。`c--badge--{variant}` クラスが出力 |
 | `keycolor` | `string` | — | キーカラー |
 
@@ -126,7 +126,7 @@ import { Button } from '@lism-css/ui/astro/Button';
 ボタン型リンクコンポーネント。デフォルトで `a` 要素として出力。`c--button` クラスが付与される。
 
 | Prop | 型 | デフォルト | 説明 |
-|------|-----|----------|------|
+| --- | --- | --- | --- |
 | `variant` | `string` | — | バリエーション（`'fill'`, `'outline'` 等）。`c--button--{variant}` クラスが出力 |
 | `keycolor` | `string` | — | キーカラー |
 | `href` | `string` | — | リンク先URL |
@@ -140,11 +140,10 @@ import { Button } from '@lism-css/ui/astro/Button';
 
 ソース: [Callout/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Callout)
 
-記事中の重要ポイントを示すコンポーネント。タイトルとアイコン付きの強調ボックス。`type` プリセットによりアイコンとカラーが自動設定される。
-プリセット: `alert`=alert/red, `point`=lightbulb/orange（`tip`も同じ）, `warning`=warning/yellow, `check`=check-circle/green, `help`=question/purple, `info`=info/blue, `note`=note/gray。
+記事中の重要ポイントを示すコンポーネント。タイトルとアイコン付きの強調ボックス。`type` プリセットによりアイコンとカラーが自動設定される（プリセット内容は [Alert](#alert) と同一）。
 
 | Prop | 型 | デフォルト | 説明 |
-|------|-----|----------|------|
+| --- | --- | --- | --- |
 | `type` | `'alert' \| 'point' \| 'tip' \| 'warning' \| 'check' \| 'help' \| 'info' \| 'note'` | `'note'` | コールアウトタイプ |
 | `keycolor` | `string` | — | キーカラー |
 | `icon` | `ReactNode \| string` | — | カスタムアイコン |
@@ -163,7 +162,7 @@ import { Button } from '@lism-css/ui/astro/Button';
 チャット風の吹き出しコンポーネント。Grid ベースの会話形式 UI。`c--chat` クラスが付与される。
 
 | Prop | 型 | デフォルト | 説明 |
-|------|-----|----------|------|
+| --- | --- | --- | --- |
 | `name` | `string` | — | 発言者の名前 |
 | `avatar` | `string` | — | アバター画像の src |
 | `variant` | `'speak' \| 'think'` | `'speak'` | チャットタイプ |
@@ -185,8 +184,9 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 **構造:** `Details.Root > Details.Summary > (Details.Title + Details.Icon) + Details.Content`
 
 | Prop | 対象 | 型 | デフォルト | 説明 |
-|------|------|-----|----------|------|
+| --- | --- | --- | --- | --- |
 | `as` | Title | `string` | `'span'` | Title の HTML タグ |
+| `open` | Root | `boolean` | — | 初期展開状態（`details` 要素の `open` 属性） |
 | `--duration` | Root | `string` | — | 展開アニメーションの秒数（style 経由で指定） |
 
 ```jsx
@@ -209,7 +209,7 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 **構造:** `Modal.OpenBtn + Modal.Root > Modal.Inner > Modal.Body + Modal.CloseBtn`
 
 | Prop | 対象 | 型 | デフォルト | 説明 |
-|------|------|-----|----------|------|
+| --- | --- | --- | --- | --- |
 | `id` | Root | `string` | — | モーダルの ID（必須） |
 | `modalId` | OpenBtn / CloseBtn | `string` | — | 対象モーダルの ID |
 | `duration` | Root | `string` | — | アニメーション持続時間。`--duration` 変数として出力 |
@@ -236,7 +236,7 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 **構造:** `NavMenu.Root > NavMenu.Item > NavMenu.Link`（`NavMenu.Nest` でネスト可能）
 
 | Prop | 対象 | 型 | デフォルト | 説明 |
-|------|------|-----|----------|------|
+| --- | --- | --- | --- | --- |
 | `hovBgc` | Root | `string` | — | ホバー時の背景カラー。`--hov-bgc` 変数として出力 |
 | `hovC` | Root | `string` | — | ホバー時のテキストカラー。`--hov-c` 変数として出力 |
 | `itemP` | Root | `string` | — | 各アイテムのパディング。`--_item-p` 変数として出力 |
@@ -264,10 +264,11 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 **構造:** `Tabs.Root > Tabs.Item > (Tabs.Tab + Tabs.Panel)`（`Tabs.List` も利用可能）
 
 | Prop | 対象 | 型 | デフォルト | 説明 |
-|------|------|-----|----------|------|
+| --- | --- | --- | --- | --- |
 | `tabId` | Root | `string` | — | タブを特定するための ID 文字列 |
 | `defaultIndex` | Root | `number` | `1` | 初期アクティブタブ（1始まり） |
 | `listProps` | Root | `object` | — | タブボタンリスト要素へ渡す props |
+| `variant` | Root | `string` | — | バリエーション。`c--tabs--{variant}` クラスが出力 |
 
 ```jsx
 <Tabs.Root>
@@ -290,7 +291,7 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 セクション間の波型などの装飾的な区切り要素。SVG ベースの形状で区切りを表現。
 
 | Prop | 型 | デフォルト | 説明 |
-|------|-----|----------|------|
+| --- | --- | --- | --- |
 | `viewBox` | `string` | — | SVG の viewBox |
 | `level` | `number` | `5` | シェイプの高さレベル。`0` で非表示 |
 | `flip` | `'X' \| 'Y' \| 'XY'` | — | 反転方向。`data-flip` 属性として出力 |
@@ -313,7 +314,7 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 ダミーテキストを生成するコンポーネント。プレビューやテスト用。複数の言語とテキスト長に対応。
 
 | Prop | 型 | デフォルト | 説明 |
-|------|-----|----------|------|
+| --- | --- | --- | --- |
 | `lang` | `'ja' \| 'en' \| 'ar'` | `'en'` | テキストの言語 |
 | `length` | `'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| 'codes'` | `'m'` | テキストの長さ。`'codes'` は `b`, `i`, `a`, `code` 要素を含むテキスト |
 | `pre` | `string` | — | テキストの前に表示する文字列 |
@@ -331,8 +332,8 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 コンポーネント名は `import` するときと同じ PascalCase で指定します。
 
 ```bash
-# 初期設定（framework、出力先ディレクトリを対話的に設定）
-npx lism-cli ui init
+# 初期設定（lism.config.js が無い場合に新規生成。framework 等を対話的に設定）
+npx lism-cli init
 
 # コンポーネントを追加
 npx lism-cli ui add Button Modal
@@ -343,14 +344,13 @@ npx lism-cli ui add --all        # 全コンポーネントを追加
 npx lism-cli ui list
 ```
 
-`ui init` で生成される `lism.config.js` の `cli` セクション:
+`init` で生成される `lism.config.js` の `ui` セクション:
 
 ```js
 export default {
-  cli: {
+  ui: {
     framework: 'react',
-    componentsDir: 'src/components/ui',
-    helperDir: 'src/components/ui/_helper',
+    dir: 'src/components/ui', // helper は常に {dir}/_helper に配置される
   },
 };
 ```

package/dist/data/guides/css-rules.md

@@ -3,7 +3,7 @@
 ## TOC
 
 - [CSS Layer 構造](#css-layer-構造)
-- [プレフィックスとクラス分類](#プレフィックスとクラス分類)
+- [クラス分類とプレフィックス](#クラス分類とプレフィックス)
 - [Component Class（`c--`）](#component-classc--)
 - [カスタムCSS を追加する場合](#カスタムcss-を追加する場合)
 - [独自プレフィックス](#独自プレフィックス)
@@ -34,7 +34,6 @@ Settings（トークン定義）
   → Property Class（レイヤー外 — 最も詳細度が高い）
 ```
 
-
 ## クラス分類とプレフィックス
 
 [詳細](https://lism-css.com/docs/naming.md)
@@ -42,7 +41,7 @@ Settings（トークン定義）
 Lism CSSで定義されるクラスは、その役割とレイヤーの所属が決まっており、その分類によってプレフィックスが定められています。
 
 | 分類 | 役割 | プレフィックス | 例 |
-|---|---|---|---|
+| --- | --- | --- | --- |
 | Set Class | ベーススタイル上書き・変数提供 | `set--` | `set--plain`, `set--revert`, `set--hov`, `set--bxsh` |
 | Layout Primitive | レイアウトの構成単位となる Primitive | `l--` | `l--grid`, `l--flex`, `l--stack` |
 | Atomic Primitive | レイアウトの最小単位となる Primitive | `a--` | `a--icon`, `a--divider` |
@@ -53,20 +52,18 @@ Lism CSSで定義されるクラスは、その役割とレイヤーの所属が
 | Property Class | 単一プロパティの制御 | `-` | `-fz:l`, `-p:20`, `-d:none` |
 
 **併用ルール:**
+
 - `l--` と `c--` は併用OK（例: `<div class="l--flex c--nav">`）
 - 同カテゴリ内の Primitive 併用は不可（例: `l--flex` と `l--grid`、`a--icon` と `a--divider` は同要素に付けない）
 - `l--` × `a--` は非推奨（役割的に同居しない想定）
 - `is--` / `has--` 同士は併用OK（Trait は複数併用できる）
 - `is--` / `has--` × `l--` / `a--` も併用OK
-- `c--` の Block 同士の併用（`.c--xxx.c--yyy`）は基本 NG。ただし以下は許容:
-  - Block と自身の Modifier: `.c--button.c--button--outline`
-  - Block と他 Block の Element: `.c--xxx.c--yyy_elem`
-- 子要素: `c--card_header`, `c--card_body`（`c--` のみ Element を持つ。`_` 一つ区切り）
+- `c--` 同士の併用ルールとBEM構造は[Component Class（`c--`）](#component-classc--)を参照
 
 **`is--` と `has--` の判定軸:**
 
 |  | `is--` | `has--` |
-|---|---|---|
+| --- | --- | --- |
 | 意味 | 〜である（役割・存在の宣言） | 〜を持つ（機能の付与） |
 | CSS 変数 | 必須ではない | 必須（カスタマイズポイントを提供） |
 
@@ -78,7 +75,7 @@ class 属性にクラスを直接記述する場合は、以下の順序で並
 ```
 
 | # | 区分 | 例 |
-|---|---|---|
+| --- | --- | --- |
 | 1 | 独自クラス（`customClass`） | `z--header`, `hoge` |
 | 2 | Component（`c--`） | `c--box`, `c--box--primary` |
 | 3 | Atomic Primitive（`a--`） | `a--icon`, `a--divider` |
@@ -99,7 +96,6 @@ class 属性にクラスを直接記述する場合は、以下の順序で並
 
 なお、`class` 属性内の並び順は CSS の適用結果（詳細度・カスケード順）には影響しません。この順序はあくまで可読性と一貫性のための整理です。
 
-
 ## Component Class（`c--`）
 
 `c--` プレフィックスで定義する **Component クラス** は、Primitive を組み合わせて作られた具体的な UI 部品です。`@layer lism-component` に配置され、コアの `lism-css` には含まれず、`@lism-css/ui` パッケージやユーザー定義として提供されます。
@@ -107,7 +103,7 @@ class 属性にクラスを直接記述する場合は、以下の順序で並
 `c--` クラスは BEM 構造（Block / Modifier / Element）を持つことができ、それぞれ次の形式で定義します。
 
 | 分類 | 形式 | 例 |
-|---|---|---|
+| --- | --- | --- |
 | Block | `c--{name}` | `c--button`, `c--card` |
 | Modifier | `c--{name}--{modifier}` | `c--button--outline` |
 | Element | `c--{name}_{element}` | `c--card_header`, `c--card_body` |
@@ -121,33 +117,17 @@ class 属性にクラスを直接記述する場合は、以下の順序で並
 
 `c--` を使った独自コンポーネントを使う場合でも、他の Primitive クラス（`l--`, `is--`）や Property Class（`-{prop}:{value}`）との組み合わせを前提とした設計にすることで CSS の記述量を削減できます。`c--` クラスにスタイルが全くなく、HTML 側での可視性を高める名前付けのためだけに利用しても構いません。
 
-
 ### 作成例
 
-`l--stack` と併用する前提でのカスタムクラス例:
-
-```css
-@layer lism-component {
-  .c--myCard {
-    gap: var(--s20);
-    padding: var(--s30);
-    border-radius: var(--bdrs--20);
-    box-shadow: var(--bxsh--20);
-    border: 1px solid currentColor;
-    /* ... */
-  }
-}
-```
+`c--*`は意味名として残し、レイアウトと単一プロパティ値はPrimitive/Property Classへ寄せます。CSSへ残すのは、擬似要素・子孫セレクタ・状態セレクタなど、Props/Property Classで表現できないものだけです。
 
 ```html
-<div class="c--myCard l--stack">
-  ...
-</div>
+<!-- HTMLで書く場合も、意味名 + Primitive + Property Class を優先 -->
+<div class="c--myCard l--stack -g:20 -p:30 -bdrs:20 -bxsh:20 -bd">...</div>
 ```
 
-素の HTML サイトではこのように `c--` クラスに CSS を書いてスタイリングしても問題ありませんが、React などでコンポーネントを作成できる場合は、特別な理由がない限り Property Class を活用してください。
-
 ```jsx
+// React/AstroコンポーネントではPropsを優先
 export default function MyCard(props) {
   return <Stack className="c--myCard" g="20" p="30" bdrs="20" bxsh="20" bd {...props} />;
 }
@@ -155,12 +135,13 @@ export default function MyCard(props) {
 
 ```css
 @layer lism-component {
-  .c--myCard {
-    /* 複雑なスタイルがあれば css で書く */
+  .c--myCard::before {
+    /* 擬似要素など、Props/Property Classで表せないものだけを書く */
   }
 }
 ```
 
+CSSが空になる場合は、CSSファイル側に`.c--myCard {}`を書かず、マークアップ上の意味名として`c--myCard`だけ残して構いません。
 
 ## カスタムCSS を追加する場合
 
@@ -169,53 +150,39 @@ export default function MyCard(props) {
 ```css
 /* カスタムコンポーネント → lism-component に追加 */
 @layer lism-component {
-  .c--my-card {
-    border: 1px solid var(--brand);
-    border-radius: var(--bdrs--20);
-    padding: var(--s30);
+  .c--myCard[data-is-active]::before {
+    border-color: var(--brand);
   }
 }
 
 /* ベーススタイルの拡張 → lism-base に追加 */
 @layer lism-base {
-  .set--my-theme {
+  .set--myTheme {
     --brand: #c00;
   }
 }
 ```
 
-カスタムCSS内でも、できる限り Lism のCSS変数（トークン）を使ってください。
+カスタムCSS内でも、できる限り Lism のCSS変数（トークン）を使ってください。ただし、`padding`/`border-radius`/`font-size`/`color`などProperty Class/Propsへ移せる宣言は、CSSに書く前にマークアップ側へ移します（NG→OK例は[antipatterns.md](./antipatterns.md#property-class-で書けるのに-css-で書く)を参照）。
 
-```css
-/* NG */
-.c--my-card { padding: 24px; border-radius: 8px; }
-
-/* OK */
-.c--my-card { padding: var(--s30); border-radius: var(--bdrs--20); }
-```
-
-ただし、明確にその数値に意図がある場合は、生のCSS値を使用しても構いません。
+明確にその数値に意図があり、トークン化・丸め・Property Class化ができない場合だけ、生のCSS値を例外として使用できます。その場合は実装プランに理由を残します。
 
 **レイヤー外に書く場合:**
 `@layer` の外（レイヤーなし）でカスタムCSSを書くのは、**Property Class（`-{prop}:{value}`）を拡張する場合のみ**としてください。それ以外のカスタムスタイルは必ずいずれかの `@layer` 内に記述します。
 
 ```css
-/* OK: Property Class の拡張はレイヤー外 */
+/* Property Class の拡張のみレイヤー外に書ける */
 .-myProp\:myValue { ... }
-
-/* NG: コンポーネントやユーティリティをレイヤー外に書かない */
-.c--my-card { ... }
 ```
 
-
-### 独自プレフィックス
+## 独自プレフィックス
 
 Lism CSS の既存プレフィックス（`set--` / `is--` / `has--` / `l--` / `a--` / `c--` / `u--` / `-`）のどれにも該当しないクラスは、独自プレフィックスを付けても、プレフィックスなしで命名しても構いません。
 
 代表的な例：
 
 | 分類 | 形式 | 例 |
-|---|---|---|
+| --- | --- | --- |
 | ゾーニング（サイトの大まかな領域） | `z--{zoneName}` または `{zoneName}` | `z--header`, `z--main`, `z--sidebar`, `z--footer` |
 | ページ分類 | `p--{type}-{id\|slug}` または `{slug}Page` | `p--front`, `p--page--{slug}` |
 
@@ -223,11 +190,27 @@ Lism CSS の既存プレフィックス（`set--` / `is--` / `has--` / `l--` / `
 
 ```css
 @layer lism-custom {
-  .z--header { /* ... */ }
-  .p--front { /* ... */ }
+  .z--header {
+    /* ... */
+  }
+  .p--front {
+    /* ... */
+  }
 }
 ```
 
+### `z--`/`p--`/`c--`の使い分け
+
+| 用途 | 推奨 | 理由 |
+| --- | --- | --- |
+| 再利用可能なUI部品 | `c--featureCard` | componentとして再利用され、Block/Element/Modifier構造を持てる |
+| サイトの大まかな領域 | `z--header`/`z--main`/`z--footer` | 再利用UIではなくゾーニングなので`c--`にしない |
+| ページ固有の領域 | `p--frontHero`/`p--postBody` | ページ依存の見た目をcomponent命名から分離する |
+| 外部JS・CMS・E2Eが参照するclass | 既存名を維持、または⏸ | 外部契約なのでrenameはユーザー確認が必要 |
+
+`c--header`や`c--sidebar`のような命名は、UI部品として再利用する意図がある場合だけ使います。サイト構造の領域名なら`z--header`、ページ限定なら`p--*`を優先してください。
+
+公開API、CMS出力、外部JS、E2Eセレクタ、ドキュメントで案内済みのclass名を変える場合は、内部参照を全更新できる場合でも⏸としてユーザー確認します。CSSだけrenameしてJS/テスト/HTML生成側を漏らさないでください。
 
 ## CSS の配置場所
 

package/dist/data/guides/customize.md

@@ -44,7 +44,7 @@ import 'lism-css/main_no_layer.css';
 ### 上書き可能な変数
 
 | 変数 | 用途 | デフォルト |
-|------|------|-----------|
+| --- | --- | --- |
 | `$breakpoints` | ブレイクポイント数値の定義（`0` は無効＝クエリを出力しない） | `('xs': 0, 'sm': '480px', 'md': '800px', 'lg': '1120px', 'xl': 0)` |
 | `$is_container_query` | コンテナクエリで出力するか（`1` = container query, `0` = media query） | `1` |
 | `$default_important` | Property Class にデフォルトで `!important` を付与するか | `0` |
@@ -102,7 +102,9 @@ SCSS を直接読み込む構成では、コンパイル時に `lism-css` 本体
 
 ## `lism.config.js` でのカスタマイズ
 
-プロジェクトのルート直下に `lism.config.js`（または `lism.config.mjs`）を置くことで、**コンポーネントの挙動**（受け付ける props の値や、出力されるクラス名）をカスタマイズできます。
+プロジェクトのルート直下に `lism.config.js`（または `lism.config.ts` / `lism.config.mjs`）を置くことで、**コンポーネントの挙動**（受け付ける props の値や、出力されるクラス名）をカスタマイズできます。
+
+設定ファイルの型チェック・補完には `lism-css/config-types` の `LismConfig` 型を使います。`.ts` は `export default { ... } satisfies LismConfig`、`.js` は `/** @type {import('lism-css/config-types').LismConfig} */` を付けると、キー名の typo や値の形をエディタが検出します（コンポーネント側の prop/trait を解禁する生成物 `lism-env.d.ts` とは別物）。
 
 ### Vite / Astro プラグインの登録（推奨セットアップ）
 
@@ -138,7 +140,7 @@ export default defineConfig({
 - **動的CSSビルド**: `import 'lism-css/main.css'` 等を捕捉し、`lism.config.js` を反映済みの CSS をその場で生成する（props / tokens を追加すると CSS に自動反映される）
 - **型の自動生成**: 有効化したブレイクポイント・追加した props / traits を反映した `lism-env.d.ts` を起動時に自動生成する
 
-`lism.config.js` はプロジェクトルートから `lism.config.js` → `lism.config.mjs` の順で自動検出します。別の場所に置く場合は `configPath` で指定できます。
+設定ファイルはプロジェクトルートから `lism.config.ts` → `lism.config.mjs` → `lism.config.js` の順で自動検出します。別の場所に置く場合は `configPath` で指定できます。
 
 ```js
 // Vite
@@ -240,7 +242,7 @@ export default {
 これによってコンポーネント側で次のような挙動が追加されます：
 
 | 入力 | 出力されるクラス |
-|------|----------------|
+| --- | --- |
 | `ta="justify"` | `-ta:justify` |
 | `p="box"` | `-p:box` |
 | `filter="blur"` | `-filter:blur` |
@@ -254,7 +256,7 @@ export default {
 
 ### 追加した prop / trait の型解禁
 
-統合プラグイン（型自動生成が有効）を使っている場合、`lism.config.js` で追加した **prop / trait も `lism-env.d.ts` 経由で型側に自動解禁**されます（`CustomPropRegistry` / `CustomTraitRegistry` の拡張として出力）。そのため上記の `<Box filter="blur" ... isHoge>` のような新規 prop / trait も、エディタや `astro check` で型エラーになりません。手書きの型拡張は不要です（`lism-env.d.ts` は git にコミットしてください）。
+統合プラグイン（型自動生成が有効）を使っている場合、`lism.config.js` で追加した **prop / trait も `lism-env.d.ts` 経由で型側に自動解禁**されます（`CustomPropRegistry` / `CustomTraitRegistry` の拡張として出力）。そのため上記の `<Box filter="blur" ... isHoge>` のような新規 prop / trait も、エディタや `astro check` で型エラーになりません。手書きの型拡張は不要です。
 
 なお、既存 prop への値追加（`ta="justify"` 等）はもともと任意の文字列を受け付けるため、型エラーにはなりません（ただし補完候補には出ません）。
 

package/dist/data/guides/naming.md

@@ -18,7 +18,7 @@
 ### トークン変数
 
 | 種類 | 形式 | 例 |
-|------|------|-----|
+| --- | --- | --- |
 | 基本 | `--{prop}--{token}` | `--fz--l`, `--bdrs--20`, `--bxsh--10`, `--sz--s` |
 | カラー | `--{color}` | `--brand`, `--text`, `--text-2`, `--red` |
 | 余白 | `--s{Token}` | `--s10`, `--s40` |
@@ -26,7 +26,7 @@
 トークンのバリエーション:
 
 | 表記 | 条件 | 例 |
-|------|------|-----|
+| --- | --- | --- |
 | `s`, `m`, `l`, `xl`... | ベース値を中心に大小の段階を示す | `--fz--s`, `--fz--l` |
 | `base` | `:root`/`body` の初期値にセットされるもの | `--fz--base`, `--lh--base` |
 | `10`, `20`, `30`... | `0`(`none`)基準で段階的に増加 | `--bdrs--20`, `--bxsh--30` |
@@ -38,45 +38,28 @@
 ### Property Class 用の変数
 
 | 形式 | 説明 | 例 |
-|------|------|-----|
+| --- | --- | --- |
 | `--{prop}` | クラスの `{prop}` 部分と同じ省略名 | `--p`, `--bgc`, `--bdrs`, `--m` |
 | `--{prop}_{bp}` | ブレークポイント値 | `--p_sm`, `--mx_md` |
 
 ### その他の変数
 
 | 形式 | 用途 | 例 |
-|------|------|-----|
+| --- | --- | --- |
 | `--{target}-{prop}` | 要素・クラスに対するプロパティ（`:root`で上書き可） | `--link-td`, `--headings-ff` |
 | `--{propName}` | クラス自身の主要機能を制御する変数。要素側で値が初期化され、`:root` からは初期値の定義ができないもの | `--sideW`, `--mainW` |
 | `--_{item}-{propName}` | `c--` の子要素プロパティ | `--_icon-size` |
 | `--_{varName}` | 状態管理用の内部変数 | `--_isHov`, `--_notHov` |
 
-
 ## クラスの命名規則
 
-プレフィックスとクラス分類の対応:
-
-- Component: `c--`
-- Atomic Primitives: `a--`
-- Layout Primitives: `l--`
-- Trait（役割宣言）: `is--`
-- Trait（機能付与）: `has--`
-- Set Class: `set--`
-- Utility Class: `u--`
-
-プレフィックスに続く名称は camelCase（例: `c--myComponent`）。
+クラス分類ごとのプレフィックス（`c--`/`a--`/`l--`/`is--`/`has--`/`set--`/`u--`）と各分類の責務・所属レイヤーは、[css-rules.md](./css-rules.md#クラス分類とプレフィックス)の分類表を正本とします。
 
-**使い分けの判断軸:**
+プレフィックスに続く名称は camelCase（例: `c--myComponent`）。`is--`/`has--`/`set--`/`u--`にも同じ規則が適用されます。
 
-| プレフィックス | 責務 | 代表例 |
-|---|---|---|
-| `set--` | HTML 要素の基礎スタイリング / 変数セット | `set--plain`, `set--revert`, `set--hov`, `set--bxsh` |
-| `is--` | 〜である（役割・存在の宣言）。CSS 変数は必須ではない | `is--container`, `is--wrapper`, `is--layer` |
-| `has--` | 〜を持つ（単一機能 trait の付与）。CSS 変数でカスタマイズ可 | `has--transition`, `has--gutter`, `has--snap`, `has--mask` |
-| `u--` | 装飾的効果（単独 or 子要素の装飾） | `u--trim`, `u--cbox`, `u--divide`, `u--enclose` |
+### `c--*`の命名
 
-- `set--` は `lism-base` 層で HTML 要素の基礎スタイル・変数を提供するもの。
-- `is--` / `has--` は `lism-trait` 層に属する。
+Block/Element/Modifierの形式（Block=`c--{name}`、Element=`_`ひとつ、Modifier=`--`ふたつ）は[css-rules.md](./css-rules.md#component-classc--)を参照。Block名はcamelCaseを第一候補にし、既存コードがアンダースコア区切りならそれに合わせます。単語区切りのハイフン（`c--feature-card`）とBEM風の`__`は使いません（NG→OK例は[antipatterns-layout.md](./antipatterns-layout.md#クラス名の命名ミス)を参照）。
 
 Property Class の形式:
 
@@ -85,7 +68,6 @@ Property Class の形式:
 - ブレークポイント値を受け取る: `-{prop}_{bp}`
 - 修飾子 + Property Class 合成: `-{modifier}:-{prop}`（例: `-hov:-c` は `-c` の hover バリアント）
 
-
 ## `{prop}` の省略ルール
 
 基本は [Emmet](https://docs.emmet.io/cheat-sheet/) 準拠。
@@ -97,15 +79,15 @@ Property Class の形式:
 1文字に省略する主要プロパティは以下の通り（このリストが全て）。
 
 | 省略 | プロパティ | 省略 | プロパティ |
-|------|-----------|------|-----------|
-| `p` | `padding`    | `i` | `inset` |
-| `m` | `margin`     | `t` | `top` |
-| `g` | `gap`        | `b` | `bottom` |
-| `c` | `color`      | `l` | `left` |
-| `f` | `font`       | `r` | `right` |
-| `w` | `width`      | `o` | `opacity` |
-| `h` | `height`     | `v` | `visibility` |
-| `d` | `display`    | `z` | `z-index` |
+| --- | --- | --- | --- |
+| `p` | `padding` | `i` | `inset` |
+| `m` | `margin` | `t` | `top` |
+| `g` | `gap` | `b` | `bottom` |
+| `c` | `color` | `l` | `left` |
+| `f` | `font` | `r` | `right` |
+| `w` | `width` | `o` | `opacity` |
+| `h` | `height` | `v` | `visibility` |
+| `d` | `display` | `z` | `z-index` |
 
 Emmet と異なるのは `o` (`opacity`) のみ。
 
@@ -114,7 +96,7 @@ Emmet と異なるのは `o` (`opacity`) のみ。
 #### 基本形式: 「グループ略称」+「サブプロパティ名の省略形」
 
 | CSS プロパティ | Prop |
-|-------------|------|
+| --- | --- |
 | font-size | `fz` |
 | font-weight | `fw` |
 | background-color | `bgc` |
@@ -130,7 +112,7 @@ Emmet と異なるのは `o` (`opacity`) のみ。
 `inline-start`/`inline-end`は`is`/`ie`ではなく、すでに普及しているCSSフレームワークの慣習に沿って`s`/`e`とする。
 
 | 方向 | サフィックス | 例 |
-|------|-----------|-----|
+| --- | --- | --- |
 | physical | `-t` / `-b` / `-l` / `-r` | `bd-t`, `bd-b`, `bd-l`, `bd-r` |
 | inline / block | `-x` / `-y` | `bd-x`, `bd-y` |
 | inline-start / end | `-s` / `-e` | `bd-s`, `bd-e`, `ps`, `pe`, `ms`, `me`, `i-s`, `i-e` |
@@ -154,7 +136,7 @@ NG例: `flex` → `fx` としたうえで `flex-shrink` を `fsh` にする（`f
 2. ハイフン繋がり、または6文字以上: Emmet形式または認識しやすい範囲で省略
 
 | CSS プロパティ | Prop | 分類 |
-|-------------|------|------|
+| --- | --- | --- |
 | float | `float` | そのまま |
 | order | `order` | そのまま |
 | position | `pos` | 省略 |
@@ -170,13 +152,12 @@ NG例: `flex` → `fx` としたうえで `flex-shrink` を `fsh` にする（`f
 グループを持たない1文字プロパティや、方向プロパティのみをサブプロパティに持つ場合は、衝突しない範囲で再利用可。
 
 | 1文字 Prop | 再利用先 | 展開例 |
-|-----------|---------|--------|
+| --- | --- | --- |
 | `t`(`top`) | `text-*` | `ta`(`text-align`) |
 | `l`(`left`) | `line-*` | `lh`(`line-height`) |
 | `w`(`width`) | `writing-*` | `wm`(`writing-mode`) |
 | `p`(`padding`) | `place-*` | `pi`(`place-items`) |
 
-
 ## `{value}` の省略ルール
 
 ### 基本: CSS の実値をそのまま使う
@@ -218,7 +199,7 @@ opacity トークンは音楽記号に由来する例外的な命名で、その
 6文字以上かつ省略しても意味が通るものは省略可:
 
 | 実際の値 | 省略名 | クラスの例 |
-|--------|------------|-----|
+| --- | --- | --- |
 | `uppercase` | `upper` | `-tt:upper` |
 | `lowercase` | `lower` | `-tt:lower` |
 | `fit-content` | `fit` | `-w:fit`, `-h:fit` |

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

@@ -18,11 +18,11 @@ Lism CSS では、レイアウトを組み立てる小さな積み木として *
 ## プレフィックス一覧
 
 | プレフィックス | 種類 | サブレイヤー | 役割 |
-|--------------|------|------------|------|
+| --- | --- | --- | --- |
 | `l--` | Layout Primitive | `lism-primitive.layout` | レイアウトの構成単位となる Primitive |
 | `a--` | Atomic Primitive | `lism-primitive.atomic` | レイアウトの最小単位（アイコン・区切り線等） |
 
-併用ルールは [css-rules.md](./css-rules.md#プレフィックスとクラス分類) を参照してください。
+併用ルールは [css-rules.md](./css-rules.md#クラス分類とプレフィックス) を参照してください。
 
 
 ## Layout Primitive（`l--`）
@@ -30,7 +30,7 @@ Lism CSS では、レイアウトを組み立てる小さな積み木として *
 レイアウト構造を定義するメインの Primitive 群です。
 
 | クラス | 用途 |
-|--------|-------------|
+| --- | --- |
 | `l--box` | 汎用ボックス |
 | `l--flex` | 横方向の基本的なFlexboxレイアウト |
 | `l--stack` | 縦方向の縦積みFlexboxレイアウト（`flex-direction: column`）。 |
@@ -57,7 +57,7 @@ Lism CSS では、レイアウトを組み立てる小さな積み木として *
 各 Primitive がどの用途に向いているか：
 
 | やりたいこと | `l--columns` | `l--autoColumns` | `l--switchColumns` | `l--withSide` | `l--grid` |
-|---|---|---|---|---|---|
+| --- | --- | --- | --- | --- | --- |
 | 等幅 N 列 | ◯ | ◯ | ✗ | ✗ | △ |
 | 横並び ↔ 1 列の一括切替 | ◯ | ✗ | ◯ | ✗ | △ |
 | カラム最小幅で自動折返し | ✗ | ◯ | ✗ | ✗ | △ |
@@ -127,7 +127,7 @@ Lism CSS では、レイアウトを組み立てる小さな積み木として *
 レイアウト構成物の最小単位となる Primitive です。
 
 | クラス | 用途 |
-|--------|------|
+| --- | --- |
 | `a--icon` | SVG アイコン。`flex-shrink: 0`, デフォルトサイズ `1em` |
 | `a--divider` | 区切り線。`--bdc`, `--bds`, `--bdw` 変数でカスタマイズ |
 | `a--spacer` | 空白要素（`min-height: 1px; min-width: 1px`） |

package/dist/data/guides/primitives/a--decorator.md

@@ -2,40 +2,14 @@
 
 コンテンツを装飾するための空要素として使うクラス。`<Decorator>` は `<Lism atomic="decorator" aria-hidden="true" />` のエイリアスとして用意されています。
 
-## 基本情報
-
-- クラス名: `a--decorator`
-- コンポーネント: `<Decorator>`
-- 公式ドキュメント: https://lism-css.com/docs/primitives/a--decorator.md
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/primitives/a--decorator.md
 
 ## 専用Props
 
 | Prop | 説明 |
-|------|------|
+| --- | --- |
 | `size` | デコレーターのサイズを一括指定。この指定があると `w`（`width`）に値が渡され、自動で `ar="1/1"`（`aspect-ratio:1/1`）が付与される |
 
-## Usage
-
-### 装飾に使用する例（コーナー装飾）
-
-`pos="absolute"` と組み合わせて、親の四隅にコーナー枠を配置する例です。`bdc="current"` で文字色に追随します。
-
-```jsx
-<Box p="30" pos="relative">
-  <p>本文テキスト...</p>
-  <Decorator size="1.25em" pos="absolute" t="0" l="0" bd-s bd-bs bdc="current" />
-  <Decorator size="1.25em" pos="absolute" r="0" b="0" bd-e bd-be bdc="current" />
-</Box>
-```
-
-```html
-<div class="l--box -p:30 -pos:relative">
-  <p>本文テキスト...</p>
-  <div class="a--decorator -pos:absolute -t:0 -l:0 -bd-s -bd-bs -bdc:current -ar:1/1 -w" style="--w:1.25em" aria-hidden="true"></div>
-  <div class="a--decorator -pos:absolute -r:0 -b:0 -bd-e -bd-be -bdc:current -ar:1/1 -w" style="--w:1.25em" aria-hidden="true"></div>
-</div>
-```
-
 ## 関連プリミティブ
 
 - [a--spacer](./a--spacer.md) — 要素間スペース