@cakejp/design-system 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -9,6 +9,31 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.11.0] - 2026-07-22
+
+### ⚠️ Upgrade impact
+
+- **minor リリース・破壊的変更なし**: 追加はすべて後方互換（新 prop はデフォルト値が現行挙動）。視覚変更もなし。`^0.10.0` からは `npm install @cakejp/design-system@0.11.0` で安全に上げられる
+- consumer 統合カスケード（#83 / #86 / #87 / #88）を収録。他ブランド consumer（仕入れEC等）が `MypageShell` を手組みシェルの代わりに採用できる状態になる回
+
+### ✨ Added
+
+- **`MypageShell` に PC ヘッダーの `logo` / `navItems` prop を追加**: これまで PC ヘッダーのロゴが内蔵 `CakeLogo` にハードコードされ、グローバルナビの差し込み口も無かったため、他ブランドの consumer がこのシェルを採用すると**マイページ配下だけ Cake.jp ロゴにブランドが割れて**採用を見送っていた（手組みのマイページシェルに退行）。`logo?: ReactNode`（既定=`CakeLogo`）と `navItems?: HeaderNavItem[]`（既定=なし）を追加し、自社ロゴ・自社グローバルナビへ差し替え可能にした。命名・建て付けは同じ `Header` を使う `FunnelShell` の `logo` prop と整合。既定値は現行のままで**後方互換**（既存の Cake.jp マイページは無変更）。これで既存の `menuGroups` / `headerActions` / `breadcrumbs` / `bottomNavItems` と合わせ PC ヘッダーまでブランド差し替えが揃い、consumer は手組みシェルを DS `MypageShell` に置換できる。※ SP ヘッダーは `variant="back"`（戻るボタン）でロゴを表示しないため `logo` は PC のみに作用する（[#88](https://github.com/flashpark/cake-design-system/issues/88)）
+- **`SideNav` のアクティブ判定を「key 完全一致のみ」から拡張**: `MypageShell` 化で各ページが `activeMenu`（string）でサイドバーのアクティブ項目を指定する形になったが、`SideNav` が `item.key === activeMenu` の完全一致でしか判定できず、詳細・配下ページ（`/mypage/orders/123/` 等）で「どの項目もアクティブにならない」か、一覧と同じ `activeMenu` を無理に渡して実 URL と乖離していた。`SideNav` に3段階の判定を追加（優先順位: 述語 > URL 照合 > key 完全一致）: **`currentPath?: string`**（現在 URL を href と照合して自動判定）、**`activeMatch?: "exact" | "prefix"`**（既定 `exact`。`prefix` は配下ページ全体でアクティブにし、複数一致時は最長 href の1項目のみ＝親子の二重アクティブを防ぐ）、**`isActive?: (item) => boolean`**（consumer 固有の URL 集約ロジックを注入）。`MypageShell` にも `currentPath` / `activeMatch` / `isActiveMenuItem` を透過追加し、`activeMenu` を optional 化（URL 自動判定時は不要）。既定は完全一致のままで**後方互換**（[#86](https://github.com/flashpark/cake-design-system/issues/86)）
+
+### 🐛 Fixed
+
+- **#83 ハードニング — CSS セットアップ反転（PR #84）後に残った穴を3点塞いだ**（アーキ変更なし。`@source` 単一ビルド方式の確実化）:
+  1. **dist CSS ファイル名の誤設定を修正**: `vite.config.lib.ts` の `cssFileName: "styles"` は公開 exports（`./dist/index.css`・`./styles.css`→`index.css`）とドキュメントの降格パス案内が指す `dist/index.css` と食い違っていた。実測では Vite が entry 名で `dist/index.css` を出力し設定は無視されていた（＝現状 404 は起きていない）が、将来 Vite がこの設定を尊重し始めると Tailwind 非使用 consumer の `@import ".../dist/index.css"` が静かに壊れる罠のため、実出力・exports と一致する `"index"` に修正
+  2. **guidelines の反転漏れを修正**: `guidelines/setup.md`（Required CSS）と `guidelines/overview.md` が PR #84 前の `preset` 単独 import のままで、setup.md には「preset に Tailwind 設定が含まれる」という誤記もあった（実際 `src/preset.css` は `@import "tailwindcss"` を含まない）。両方を `@source` 単一ビルド方式＋降格パス＋併用警告に更新し、README の警告実害例にも `MenuDrawer` を追記して templates と一致させた
+  3. **整合ガードテストを新設**（`__tests__/css-setup-integrity.test.ts`）: ①`cssFileName` と exports の dist CSS 参照の一致 ②consumer 向け全ドキュメント（README / templates 2種 / guidelines 2種）に `@source` 推奨スニペットが存在 ③併用警告の実害例（Header/Footer/MenuDrawer）が全ファイルで一致——を静的に固定し、反転状態の再ドリフトを防ぐ（[#83](https://github.com/flashpark/cake-design-system/issues/83)）
+- **optional 依存 6 種を通常 `dependencies` に昇格し、未インストールの利用側でのビルド破綻を解消**: `dist/index.js`（単一バンドル）が `cmdk` / `next-themes` / `react-day-picker` / `react-hook-form` / `sonner` / `vaul` を**静的 import** しているのに、これらは optional な `peerDependencies` 扱いだった。そのため利用側がこの 6 種を入れずに DS の任意コンポーネント（例: `Footer`）を import すると、Vite/Rollup が解決に失敗してビルドが落ちていた（`"getDefaultClassNames" is not exported by "__vite-optional-peer-dep:react-day-picker..."` 等。[#84](https://github.com/flashpark/cake-design-system/pull/84) の検証で判明）。6 種を `peerDependencies` / `peerDependenciesMeta` から外し、同じ semver レンジのまま通常 `dependencies` に移した。**利用側の対応は不要**——`npm install @cakejp/design-system` で 6 種が自動的に入る。`@hookform/resolvers` / `date-fns` / `zod` は引き続き optional peer（実際に使う画面のみ導入すればよい）
+
+### 📝 Docs
+
+- **SectionHeader の適用範囲を明確化＋consumer 向け AI 参照の存在を保証**: cake-api の設計書で「SectionHeader 手書き禁止」が**通常の文書見出しまで一律禁止**と読める形で広く適用されていた。実際に必須なのは SectionHeader が担う2パターン（①「タイトル + もっと見る/すべて見るアクション」②中央寄せ大見出し）だけで、素の semantic heading は対象外。AI 向け要約（`CLAUDE.md` / `AGENTS.md`）と `contracts/rules.json`（R48）の表現をこの区別に統一（正典は `contracts/components.json` の SectionHeader `rules`）。あわせて **consumer 向け AI ルールファイルの参照整合**を整理: `npx cakejp-ds init` が置く `AGENTS.md` / `CLAUDE.md` は薄いポインタで、正典は `node_modules/@cakejp/design-system/{CLAUDE.md,contracts/*,tokens.json}`（すべて npm 同梱・複製なし）。`node_modules/@cakejp/design-system/AGENTS.md` は**同梱されない**（DS リポ内部の dev 用）ため参照先は `CLAUDE.md` に統一。既存 consumer の更新手順（`npx cakejp-ds init --force`）を `UPDATING.md` に明記し、テンプレの参照先が全て `files` で配布・実在することを固定するテスト（`__tests__/consumer-ref-integrity.test.ts`）を追加。SectionHeader の公開 API は不変（[#87](https://github.com/flashpark/cake-design-system/issues/87)）
+- **CSS セットアップの推奨構成を反転**: 従来推奨だった「プリビルド `dist/index.css` + consumer の `@import "tailwindcss"`」は**独立した 2 ビルド**になり、consumer が DS と同名ユーティリティ（`.hidden` 等）を 1 箇所でも使うと、同一 `@layer utilities` 内の宣言順で consumer の基底ルールが DS のバリアント（`@lg:block` 等）を打ち消す構造的欠陥があった（`Header` / `Footer` の永久モバイル表示・タブのアクティブ下線消失など）。推奨を **`@source` 単一ビルド方式**（`@import "tailwindcss"` + `preset` + `@source ".../dist/index.js"`）へ変更し、`dist/index.css` 方式は「consumer が Tailwind を使わない場合のみ」に降格。併用時の警告も明記。対象: `README.md` / `templates/CLAUDE.md` / `templates/AGENTS.md`。パッケージ同梱物（`dist/index.js` / `preset`）だけで成立し、実体変更は不要（[#83](https://github.com/flashpark/cake-design-system/issues/83)）
+
 ## [0.10.0] - 2026-07-17
 
 ### ⚠️ Upgrade impact
@@ -65,6 +90,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### 🛡 Internal
 
+- プロトタイプビューアー、既存モック、`/mock` スキル、スクリーンショットスクリプトを専用の `cake-prototypes` リポジトリへ分離。DS 本体はコンポーネント・contracts・Storybook の提供に専念し、プロトタイプ側は公開パッケージ `@cakejp/design-system` を consumer として利用する構成へ変更
 - **`npm run check` の型検査を実効化**: 先頭の `tsc --noEmit` がルートの solution-style な `tsconfig.json`（`files: []` + references のみ）を指し、実際には 1 ファイルも型検査していない no-op だった。`-p tsconfig.app.json` を明示指定して app 本体の型検査を実効化
 - **stories の型チェックゲート `typecheck:stories` を追加**: `tsconfig.stories.json`（新設・`tsconfig.app.json` を extends し stories 除外を無効化）で stories を含む `src` 全域を strict 型チェックし、`npm run check` に組み込み（CI は check 経由で自動適用）。現時点の stories 型エラーは 0 件
 

package/CLAUDE.md

@@ -83,4 +83,4 @@ PdM や社長が AI（Claude 等）で HTML モックを作る際、このパッ
 - **aria-label**: 日本語で記述 — 英語 aria-label 禁止
 - **input type="date"**: 使用禁止 — Popover と Calendar を組み合わせる
 - **Tag に onClick**: 禁止 — 押せるものは Chip を使う
-- **SectionHeader 手書き**: 禁止 — `SectionHeader` コンポーネントを使う
+- **SectionHeader が担う「パターン」の手書き**: 禁止 — 次の2パターンは `SectionHeader` を使う。①「タイトル + もっと見る/すべて見るアクション」の並び、②中央寄せの大見出し（ランディング/ガイド系。`align="center"`、eyebrow に Badge 等）。**通常の文書見出し（`<h1>`〜`<h6>` 相当の素の semantic heading）まで SectionHeader に置き換える意味ではない** — 見出し単体なら `typo-heading-*` を付けた素の heading 要素でよい。正典は `contracts/components.json` の SectionHeader `rules`

package/README.md

@@ -12,17 +12,42 @@ npm install @cakejp/design-system
 
 ```tsx
 import { Button, ProductCard, Header } from "@cakejp/design-system"
-import "@cakejp/design-system/dist/index.css"
 
 <Header logo={<MyLogo />} variant="logo" />
 <ProductCard ... />
 <Button>カートに入れる</Button>
 ```
 
-> **`dist/index.css` の import は必須。**
-> このCSSにはカラートークン定義に加え、Tailwind v4 のベースレイヤー（`* { border-color: var(--border) }` 等）が含まれます。
-> import しないと、Tailwind v4 の border-color 既定が `currentColor` のままになり、コンポーネントの罫線や枠線がその要素の文字色に化けます（例: テーブルの行罫線が黒くなる）。
-> 自前の Tailwind 設定にマージしたい場合は `@cakejp/design-system/preset`（base レイヤー込み）を参照してください。
+### CSS のセットアップ
+
+**consumer が Tailwind v4 を使う場合（推奨）** — エントリ CSS で単一ビルドに統一する:
+
+```css
+@import "tailwindcss";
+@import "@cakejp/design-system/preset";                          /* トークン・typo-*・コンテナ段・dark variant */
+@source "../node_modules/@cakejp/design-system/dist/index.js";   /* DS の className を consumer と同一ビルドで生成 */
+```
+
+ユーティリティのビルドが 1 つに統一されるため「基底→バリアント」の整列が保証され、
+consumer が DS と同名のユーティリティ（`.hidden` 等）を使っても DS のバリアント
+（`@lg:block` 等）が正しく後勝ちする。`@source` のパスは CSS ファイルからの相対で、
+`node_modules/@cakejp/design-system/dist/index.js` を指すこと。
+
+**consumer が Tailwind を使わない場合のみ** — プリビルド CSS を import:
+
+```tsx
+import "@cakejp/design-system/dist/index.css"
+```
+
+このCSSにはカラートークン定義に加え、Tailwind v4 のベースレイヤー
+（`* { border-color: var(--border) }` 等）が含まれます。
+
+> ⚠️ **Tailwind v4 を併用する構成でプリビルド `dist/index.css` を使わないこと。**
+> DS のプリビルド CSS と consumer の Tailwind は独立した 2 ビルドで、同名ユーティリティを
+> 同じ `@layer utilities` へ二重出力する。後段（consumer）の基底ルールが DS のバリアント
+> ルールを宣言順で打ち消し、`Header` / `Footer` / `MenuDrawer` がデスクトップ幅でも永久モバイル表示に
+> なる等の不具合が出る（import 順の入れ替えでは解決しない）。Tailwind 併用時は上の
+> `@source` 方式を使う。詳細は [#83](https://github.com/flashpark/cake-design-system/issues/83)。
 
 ## 構造
 

package/UPDATING.md

@@ -165,6 +165,42 @@ npm run test   # あれば
 
 ---
 
+## AI ルールファイル（AGENTS.md / CLAUDE.md）の更新
+
+利用側リポジトリのルートにある `AGENTS.md`（Codex 用）/ `CLAUDE.md`（Claude Code 用）は、
+`npx cakejp-ds init`（または postinstall）が設置した**薄いポインタ**。禁止パターン・props・variant・
+トークンといったルールの実体は**複製していない**——正典は常に node_modules 側にある。
+
+### 参照すべき正典（package 内に実在するもの）
+
+| 参照先 | 内容 |
+|---|---|
+| `node_modules/@cakejp/design-system/CLAUDE.md` | DS 利用ガイド・禁止パターンの要点 |
+| `node_modules/@cakejp/design-system/contracts/*.json` | components / rules / screen-patterns / composition |
+| `node_modules/@cakejp/design-system/tokens.json` | カラー・余白・角丸・影・タイポ |
+
+- **Codex 用の `AGENTS.md` も、Claude 用の `CLAUDE.md` も、同じ上記 `CLAUDE.md` + `contracts` を指すポインタ**。
+  ルールの一次情報は 1 箇所（DS 同梱の `CLAUDE.md` + `contracts`）に集約されている。
+- ⚠️ **`node_modules/@cakejp/design-system/AGENTS.md` は同梱されない**（それは DS リポジトリ内部の
+  開発者向け Codex ファイル）。利用側の生成済み `AGENTS.md` がこのパスを参照していたら、
+  参照先を `node_modules/@cakejp/design-system/CLAUDE.md` に直すか、下記 `--force` で再設置する。
+
+### DS を更新したあと
+
+ルールの実体は node_modules 側なので、**DS のバージョンを上げれば禁止パターン等は自動的に最新**になる
+（ポインタ側の再設置は通常不要）。ただし**テンプレート自体が更新された**とき——参照先パスの追加や
+CSS セットアップ手順の変更（例: `@source` 単一ビルド方式への移行）——は、ポインタを貼り直す:
+
+```bash
+# 既存の AGENTS.md / CLAUDE.md を最新テンプレートで上書き再設置
+npx cakejp-ds init --force
+```
+
+`--force` を付けないと既存ファイルはスキップされる（上書きされない）。CHANGELOG に
+「`templates/AGENTS.md` / `templates/CLAUDE.md` を更新」と記載があった回だけ実行すればよい。
+
+---
+
 ## していい？ダメ？早見表
 
 | 状況 | 判断 |

package/contracts/rules.json

@@ -518,8 +518,8 @@
       "id": "R48",
       "severity": "warning",
       "category": "component",
-      "message": "SectionHeaderをCardTitle+Buttonで手書きしない",
-      "fix": "<SectionHeader title='お知らせ' moreHref='#' moreLabel='すべて見る' />"
+      "message": "SectionHeader が担うパターン（①タイトル+もっと見る/すべて見るアクション ②中央寄せ大見出し）を手書きしない。通常の semantic heading 単体は対象外（typo-heading-* を付けた素の見出しでよい）",
+      "fix": "①<SectionHeader title='お知らせ' moreHref='#' moreLabel='すべて見る' /> ②<SectionHeader title='ご利用ガイド' align='center' />"
     },
     {
       "id": "R49",