@cakejp/design-system 0.19.0 → 0.20.0

package/CHANGELOG.md

@@ -9,6 +9,41 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.20.0] - 2026-08-20
+
+ダークモードで浮遊レイヤー（メニュー・ポップオーバー・ダイアログ・シート）の地が半透明で、後ろのコンテンツが透けていた問題の修正を中心に、開閉アニメーションの配布漏れ・`AdminSideNav` サブメニューの標準化・`DataTable` 系の root export をまとめた回。**公開 API の破壊的変更はなし。** ただし次の 3 点は既定の見た目・挙動が変わる。
+
+- ダークモードで浮遊レイヤーの地が半透明の黒 → 不透明のグレーになる（ライトモードは変更なし）
+- 同じくダークモードで、エッジ固定バー（`Header` / `StickyActionBar` / `BottomTabBar` / `AdminHeader` / `AdminSideNav` のレール / `OrderSummary` の fixed 表示）の地も不透明のグレーになる（ライトモードは変更なし）
+- tw-animate-css を自分で入れていなかった consumer では、メニュー・ダイアログ等の**開閉アニメーションが新たに効き始める**（`prefers-reduced-motion` では従来どおり停止）
+- `AdminSideNav` の PC サブメニューが標準 overlay（`DropdownMenu` 合成）になる
+
+### ✨ Added
+
+- **`--Surface-Elevated` トークンを追加**: 浮遊レイヤー専用の**不透明**サーフェス。light は `#FFFFFF`（`Surface-Primary` と同値）、dark は `#3A3736`（`Primitive-Gray-800`）。ページ地として設計された `Surface-Primary` は dark でアルファ付き（`#000000E5`）のため、任意のコンテンツの上に重なる浮遊レイヤーには使えない。`preset-standalone.css` / `tokens.json` にも配布する
+- **`DataTable` の実装済み subcomponent と `SortDirection` 型を root export**: `DataTableTable` / `DataTableHeader` / `DataTableBody` / `DataTableRow` / `DataTableHead` / `DataTableCell` と、セル・一括操作・空状態など全19部品を `@cakejp/design-system` から直接 import できる。consumer は配布対象外の内部パスや互換 wrapper に依存せず、標準の表現を組み合わせられる（[#270](https://github.com/flashpark/cake-design-system/issues/270)）
+- **`BookmarkRibbonIcon` を root export**: `size` / `filled` を指定して、商品カードと同じブックマーク意匠を consumer から直接利用できる。互換 wrapper で同じアイコンを再実装する必要がなくなる（[#271](https://github.com/flashpark/cake-design-system/issues/271)）
+- **AI 向けルールを「コピー」から「参照」へ変更**: `init` / postinstall が consumer ルートへ置くのはルール本文ではなく、package 内の正本を指す**ポインタ**（`templates/*.stub.md`）になった。DS 側のルール更新が `npm install` だけで既存 consumer にも届く。ルール本文の正本は `node_modules/@cakejp/design-system/templates/AGENTS.md` / `CLAUDE.md`（[#263](https://github.com/flashpark/cake-design-system/issues/263)）
+
+  **既存 consumer の移行**（初回のみ手作業。以後は不要）:
+  1. 自分の `AGENTS.md` / `CLAUDE.md` から、DS 共通ルールを写した部分を削除する
+  2. 代わりに次の 1 行を置く: `DS 共通ルールは node_modules/@cakejp/design-system/templates/AGENTS.md（Claude は CLAUDE.md）を読む`
+  3. プロジェクト固有のルールはそのまま残す
+
+  移行しない場合も動作は変わらないが、DS 側のルール更新は届かないままになる。
+
+### 🐛 Fixed
+
+- **ダークモードで `DropdownMenu` / `Popover` / `Select` / `HoverCard` / `Command` / `ContextMenu` / `Menubar` のメニュー面が半透明で、後ろのコンテンツが透けていた問題を修正**: `--popover` が `--Surface-Primary`（dark = `#000000E5` = 10% 透過）を指していた。`--Surface-Elevated` に向け直して不透明にする（[#262](https://github.com/flashpark/cake-design-system/issues/262)）
+- **同じ理由で `Sheet` / `Dialog` / `AlertDialog` / `Drawer` の地も半透明だった問題を修正**: `bg-background`（= `--Surface-Primary`）から `bg-[var(--Surface-Elevated)]` へ。`Dialog` だけは以前から `dark:bg-[var(--Primitive-Gray-800)]` の個別対処が入っていたため**見た目は変わらない**（トークン経由に置き換えただけ）。他の 3 つは dark で地が変わる
+- **preset がアニメーションユーティリティ（tw-animate-css）を配っておらず、consumer で開閉アニメーションが無言で効いていなかった問題を修正**: foundations の 12 部品（Dialog / Sheet / Popover / DropdownMenu / Select / Tooltip / Drawer / AlertDialog / HoverCard / ContextMenu / Menubar / NavigationMenu）が `animate-in` / `zoom-in-95` / `slide-in-from-*` を使うが、これらは Tailwind 本体ではなく tw-animate-css のユーティリティで、DS の devDependency のままだった。たまたま自分でも tw-animate-css を入れていた consumer（cake-api / kakeyasan-jp）だけアニメーションが動き、入れていない consumer（cakejp-biz-mag）では動かなかった。`tw-animate-css` を dependency に昇格し、`preset` が `@import` して配る。**consumer 側の設定変更は不要**（既に自分で import している場合は重複しても無害。自前の import と依存は削除してよい）
+- **ダークモードでエッジ固定バーの地が半透明で、スクロールした内容が透けていた問題を修正**: `Header`（sticky） / `StickyActionBar` / `BottomTabBar` / `AdminHeader` / `AdminSideNav` のレール / `OrderSummary`（fixed 表示）が `bg-[var(--Surface-Primary)]`（dark = 10% 透過）を地にしていた。浮遊レイヤーと同じ `--Surface-Elevated` へ変更。**ライトモードは同値（`#FFFFFF`）のため変化なし**。ページ内フローに置かれる面（`OrderSummary disableFixed` / カード類）は重なりが発生しないため `Surface-Primary` のまま
+- **`AdminSideNav` のPCサブメニューを標準overlayへ統一**: 自作の絶対配置flyoutを `DropdownMenu` 合成へ置き換え、下端寄り・12件以上でもviewport内へ収まるようにした。hover時はフォーカスを奪わず、クリック・Enter・Space・ArrowDown・Escapeでも操作できる。ダークモードでは不透明な `Surface-Elevated`、標準枠・影・重なり順を使う（[#272](https://github.com/flashpark/cake-design-system/issues/272)）
+
+### 📝 Docs
+
+- **`linkComponent` の React Server Components 境界を部品別に明記**: Client Component の `Footer` / `MenuDrawer` へ Server Component から渡すと `Functions cannot be passed directly to Client Components` で落ちるため、Next.js App Router では呼び出し側を `"use client"` にする。一方、`Pagination` / `SubNav` / `ContentCard` は Server Component のまま利用でき、この prop のためだけに `"use client"` を付ける必要はない。契約・JSDoc に追記（[#264](https://github.com/flashpark/cake-design-system/issues/264)）
+
 ## [0.19.0] - 2026-08-20
 
 記事メディア系 consumer（cakejp-biz-mag）と仕入れサイト（cake-distributor）から上がっていた不具合・不足を一括で解消する回。**公開 API の破壊的変更はなし**（追加した prop はすべて既定値が従来の挙動）。ただし次の 4 点は既定の挙動・見た目が変わる。

package/CLAUDE.md

@@ -102,6 +102,7 @@ PdM や社長が AI（Claude 等）で HTML モックを作る際、このパッ
 | テキスト（中） | `var(--color-gray-600)` |
 | テキスト（弱） | `var(--color-gray-400)` |
 | エラー | `var(--color-red-500)` |
+| 浮遊レイヤーの地（メニュー・ポップオーバー・ダイアログ・シート） | `var(--Surface-Elevated)` |
 | 成功 | `var(--color-green-500)` |
 
 詳細は `tokens.json` を参照。

package/bin/init.js

@@ -11,8 +11,8 @@
 //   npx cakejp-ds init --force  # 既存ファイルを上書き
 //   npx cakejp-ds postinstall   # npm postinstall から呼ばれる silent モード
 
-import { copyFileSync, existsSync, readdirSync } from "node:fs"
-import { dirname, join, resolve } from "node:path"
+import { copyFileSync, existsSync, readFileSync, realpathSync, readdirSync } from "node:fs"
+import { dirname, join, resolve, sep } from "node:path"
 import { fileURLToPath } from "node:url"
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
@@ -94,25 +94,186 @@ if (cmd !== "init" && cmd !== "postinstall") {
 }
 
 // ─── postinstall モードのガード ─────────────────────────────
-// INIT_CWD は npm install が実行されたディレクトリ（consumer のルート）。
+function findDirectPackageInstallRoot(packageRoot) {
+  const parts = resolve(packageRoot).split(sep)
+  for (let i = parts.length - 3; i >= 0; i--) {
+    if (parts[i] !== "node_modules" || parts[i + 1] !== "@cakejp" || parts[i + 2] !== "design-system") {
+      continue
+    }
+
+    const candidate = parts.slice(0, i).join(sep) || sep
+    if (existsSync(join(candidate, "package.json"))) {
+      return candidate
+    }
+  }
+
+  return undefined
+}
+
+function readWorkspacePatterns(root) {
+  const patterns = []
+
+  try {
+    const pkg = JSON.parse(readFileSync(join(root, "package.json"), "utf8"))
+    if (Array.isArray(pkg.workspaces)) patterns.push(...pkg.workspaces)
+    if (Array.isArray(pkg.workspaces?.packages)) patterns.push(...pkg.workspaces.packages)
+  } catch {
+    // package.json が無い・壊れている場合は pnpm-workspace.yaml の確認へ進む。
+  }
+
+  try {
+    patterns.push(...readPnpmWorkspacePatterns(join(root, "pnpm-workspace.yaml")))
+  } catch {
+    // pnpm-workspace.yaml が無い・壊れている場合は通常の単一 package として扱う。
+  }
+
+  return [...new Set(patterns)]
+}
+
+function readPnpmWorkspacePatterns(file) {
+  if (!existsSync(file)) return []
+
+  const patterns = []
+  let inPackages = false
+  for (const rawLine of readFileSync(file, "utf8").split(/\r?\n/)) {
+    const withoutComment = rawLine.replace(/\s+#.*$/, "")
+    const line = withoutComment.trim()
+    if (!line) continue
+
+    if (!inPackages) {
+      const inlineMatch = line.match(/^packages:\s*\[(.*)\]$/)
+      if (inlineMatch) {
+        patterns.push(...parseYamlInlineSequence(inlineMatch[1]))
+        continue
+      }
+      inPackages = line === "packages:"
+      continue
+    }
+
+    if (/^\S[^:]*:/.test(withoutComment)) break
+
+    const match = line.match(/^-\s+['"]?([^'"]+)['"]?$/)
+    if (match) patterns.push(match[1])
+  }
+
+  return patterns
+}
+
+function parseYamlInlineSequence(value) {
+  return value
+    .split(",")
+    .map((item) => item.trim().replace(/^['"]|['"]$/g, ""))
+    .filter(Boolean)
+}
+
+function hasWorkspaceConfig(root) {
+  try {
+    const pkg = JSON.parse(readFileSync(join(root, "package.json"), "utf8"))
+    if (Array.isArray(pkg.workspaces) || Array.isArray(pkg.workspaces?.packages)) return true
+  } catch {
+    // package.json が無い・壊れている場合は pnpm-workspace.yaml の有無だけを見る。
+  }
+
+  return existsSync(join(root, "pnpm-workspace.yaml"))
+}
+
+function expandWorkspaceRoots(root) {
+  const roots = new Set([root])
+  const workspacePatterns = readWorkspacePatterns(root)
+
+  for (const pattern of workspacePatterns) {
+    if (typeof pattern !== "string") continue
+
+    if (!pattern.includes("*")) {
+      roots.add(resolve(root, pattern))
+      continue
+    }
+
+    if (pattern.endsWith("/**")) {
+      collectPackageRoots(resolve(root, pattern.slice(0, -3)), roots)
+      continue
+    }
+
+    // npm/pnpm workspaces で一般的な apps/* / packages/* を展開する。
+    // それ以外の複雑な glob は安全に無視する。
+    if (!pattern.endsWith("/*") || pattern.includes("**")) continue
+
+    const parent = resolve(root, pattern.slice(0, -2))
+    if (!existsSync(parent)) continue
+
+    for (const entry of readdirSync(parent, { withFileTypes: true })) {
+      if (entry.isDirectory()) roots.add(join(parent, entry.name))
+    }
+  }
+
+  return [...roots].filter((candidate) => existsSync(join(candidate, "package.json")))
+}
+
+function collectPackageRoots(dir, roots) {
+  if (!existsSync(dir)) return
+
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    if (!entry.isDirectory()) continue
+    if (["node_modules", ".git", ".hg", ".svn", ".pnpm"].includes(entry.name)) continue
+
+    const full = join(dir, entry.name)
+    if (existsSync(join(full, "package.json"))) {
+      roots.add(full)
+    }
+    collectPackageRoots(full, roots)
+  }
+}
+
+function findLinkedConsumerRoots(packageRoot, requestedRoot) {
+  const realPackageRoot = realpathSync(packageRoot)
+  return expandWorkspaceRoots(requestedRoot).filter((workspaceRoot) => {
+    const installedPackage = join(workspaceRoot, "node_modules/@cakejp/design-system")
+    if (!existsSync(installedPackage)) return false
+    try {
+      return realpathSync(installedPackage) === realPackageRoot
+    } catch {
+      return false
+    }
+  })
+}
+
+function findConsumerRoots(packageRoot, requestedRoot) {
+  const roots = new Set()
+  const directRoot = findDirectPackageInstallRoot(packageRoot)
+  if (directRoot) roots.add(directRoot)
+  for (const linkedRoot of findLinkedConsumerRoots(packageRoot, requestedRoot)) {
+    roots.add(linkedRoot)
+  }
+  if (roots.size === 0 && !hasWorkspaceConfig(requestedRoot)) roots.add(requestedRoot)
+  return [...roots].filter((candidate) => existsSync(join(candidate, "package.json")))
+}
+
+// INIT_CWD は npm install が実行されたディレクトリ。
+// monorepo では root になり、実際の consumer package は frontend/node_modules 等にある
+// ため、postinstall では package の配置場所から consumer package root を優先して決める。
 // 未設定、または pkgRoot と同じ場合は DS 自身のインストールコンテキストなのでスキップ。
 const isPostinstall = cmd === "postinstall"
-const consumerRoot = process.env.INIT_CWD || process.cwd()
+const requestedRoot = resolve(process.env.INIT_CWD || process.cwd())
+const consumerRoots = isPostinstall ? findConsumerRoots(pkgRoot, requestedRoot) : [requestedRoot]
 
 if (isPostinstall) {
   // DS 自身を開発している場合（INIT_CWD が pkgRoot）はスキップ
-  if (!process.env.INIT_CWD || resolve(consumerRoot) === pkgRoot) {
+  if (!process.env.INIT_CWD || requestedRoot === pkgRoot) {
     process.exit(0)
   }
   // consumer のルートに package.json が無ければスキップ（安全のため）
-  if (!existsSync(join(consumerRoot, "package.json"))) {
+  if (consumerRoots.length === 0) {
     process.exit(0)
   }
 }
 
+// consumer へ設置するのは「正本を参照するポインタ」だけ（issue #87 / #263）。
+// ルール本文（templates/AGENTS.md / CLAUDE.md）は package 内に置いたまま読ませる。
+// 本文をコピーすると、DS 側の更新が既存 consumer へ二度と届かない
+// （postinstall は既存ファイルを上書きしないため）。
 const files = [
-  { src: "templates/AGENTS.md", dest: "AGENTS.md", label: "Codex 用" },
-  { src: "templates/CLAUDE.md", dest: "CLAUDE.md", label: "Claude Code 用" },
+  { src: "templates/AGENTS.stub.md", dest: "AGENTS.md", label: "Codex 用" },
+  { src: "templates/CLAUDE.stub.md", dest: "CLAUDE.md", label: "Claude Code 用" },
 ]
 
 if (!isPostinstall) {
@@ -123,32 +284,34 @@ if (!isPostinstall) {
 let created = 0
 let skipped = 0
 
-for (const { src, dest, label } of files) {
-  const srcPath = join(pkgRoot, src)
-  const destPath = join(consumerRoot, dest)
+for (const consumerRoot of consumerRoots) {
+  for (const { src, dest, label } of files) {
+    const srcPath = join(pkgRoot, src)
+    const destPath = join(consumerRoot, dest)
 
-  if (!existsSync(srcPath)) {
-    if (!isPostinstall) {
-      console.error(`  ✗ テンプレートが見つかりません: ${srcPath}`)
+    if (!existsSync(srcPath)) {
+      if (!isPostinstall) {
+        console.error(`  ✗ テンプレートが見つかりません: ${srcPath}`)
+      }
+      process.exit(isPostinstall ? 0 : 1)
     }
-    process.exit(isPostinstall ? 0 : 1)
-  }
 
-  if (existsSync(destPath) && !force) {
-    if (!isPostinstall) {
-      console.log(`  ⏭  ${dest} は既に存在するためスキップ（--force で上書き）`)
+    if (existsSync(destPath) && !force) {
+      if (!isPostinstall) {
+        console.log(`  ⏭  ${dest} は既に存在するためスキップ（--force で上書き）`)
+      }
+      skipped++
+      continue
     }
-    skipped++
-    continue
-  }
 
-  copyFileSync(srcPath, destPath)
-  if (isPostinstall) {
-    console.log(`[@cakejp/design-system] ${dest} をプロジェクトルートに設置しました`)
-  } else {
-    console.log(`  ✓ ${dest} を設置しました（${label}）`)
+    copyFileSync(srcPath, destPath)
+    if (isPostinstall) {
+      console.log(`[@cakejp/design-system] ${dest} をプロジェクトルートに設置しました`)
+    } else {
+      console.log(`  ✓ ${dest} を設置しました（${label}）`)
+    }
+    created++
   }
-  created++
 }
 
 if (isPostinstall) {

package/contracts/components.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Component Contracts",
-    "version": "0.19.0",
+    "version": "0.20.0",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "kind": "kind:\"shell\" は複数ページで再利用されるレイアウト枠（AdminShell / WorkspaceShell / MypageShell 等）。無印は部品コンポーネント。固有ページを組むときは該当 shell から始める。src/components/pages/ 配下のストーリーは特定ページ専用・非配布のため contracts の対象外。",
     "naming": "コンポーネント名は**用途ではなく機能**で付ける。用途名（QuantitySelector = カート数量）にすると、同じ機能を別の文脈で探した人が見つけられず二重実装が生まれる（実例: 用途名だったため NumberInput が別途作られ、意匠の違うステッパーが 2 つになった）。「〜Selector」「〜Picker」等の用途接尾辞を付ける前に、その部品が何をするものかで名前が付けられないかを先に検討する。既存名を機能名へ変える場合は deprecatedAliases に旧名を残す。",
@@ -214,6 +214,27 @@
       "name": "DataTable",
       "path": "src/components/foundations/data-table.tsx",
       "formBinding": "none",
+      "subcomponents": [
+        "DataTableTable",
+        "DataTableHeader",
+        "DataTableBody",
+        "DataTableRow",
+        "DataTableHead",
+        "DataTableCell",
+        "DataTableAvatarCell",
+        "DataTableImageCell",
+        "DataTableLinkCell",
+        "DataTableCheckboxCell",
+        "DataTableActionCell",
+        "DataTableInputCell",
+        "DataTableSelectCell",
+        "DataTableNumberCell",
+        "DataTableDragHandleCell",
+        "DataTableBulkActions",
+        "DataTableSectionRow",
+        "DataTableAddRow",
+        "DataTableEmptyState"
+      ],
       "rules": [
         "管理画面のテーブルはui/tableでなくこちらを使う。ソート・選択行・アクションメニュー対応",
         "ActionCellのメニュー操作は行のonClickへ伝播しない（本体でstopPropagation済み）。行クリック選択との併用時も利用側ガードは不要",
@@ -357,7 +378,8 @@
       "name": "Pagination",
       "path": "src/components/foundations/pagination.tsx",
       "rules": [
-        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。この部品の項目に external フラグは無く、渡した href はすべて linkComponent で描かれる（外部 URL を出し分けたい場合は consumer 側でラップする）（#236）"
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。この部品の項目に external フラグは無く、渡した href はすべて linkComponent で描かれる（外部 URL を出し分けたい場合は consumer 側でラップする）（#236）",
+        "この部品は Server Component のまま使える。linkComponent を渡すためだけに、Next.js App Router の呼び出し側を \"use client\" にする必要はない（#264）"
       ]
     },
     {
@@ -597,7 +619,9 @@
         "サイドバーは 1 枚のパネルとして読ませる。ヘッダー行に border-bottom、フッター（ユーザーブロック・ヘルプ導線等）に border-top を引かない。内部を横線で区切ると分割されて見えるため、分離は余白で担う",
         "画面に見える線は①サイドバー右端の縦線②コンテンツヘッダー下の横線の 2 本に絞る。サイドバー内で横線を引くと 2 本が十字に交差して見える（正しくは T 字で突き当たる）",
         "折りたたみ（開閉）を持たせる場合、トリガーはサイドバー内ヘッダー行の右端に置く。コンテンツヘッダーの左端に置かない。動かす対象と操作する場所が離れると、そのボタンが何に属するか読めなくなる",
-        "ナビ項目は項目高 44px（WCAG 2.5.5 の最小ターゲット）を確保する。メイン項目・サブメニュー項目とも min-h-11 で下限を固定する（行高の小さいテキストは縦 padding だけだと割り込む）"
+        "ナビ項目は項目高 44px（WCAG 2.5.5 の最小ターゲット）を確保する。メイン項目・サブメニュー項目とも min-h-11 で下限を固定する（行高の小さいテキストは縦 padding だけだと割り込む）",
+        "PC のサブメニューは DropdownMenu の Portal / collision handling を使い、side=right / align=start / collisionPadding=8 で viewport 内に収める。絶対配置の flyout を手組みしない",
+        "PC のサブメニューは hover とクリックに加え、Enter / Space / ArrowDown で開き Escape で閉じてトリガーへフォーカスを戻す。hover 起動時はメニューへフォーカスを移さず、トリガーと Portal 間は短い close delay で橋渡しする"
       ]
     },
     {
@@ -704,7 +728,8 @@
         "meta は 1 行に収める。複数行にすると一覧でカード高さが割れる",
         "画像は imageSlot に渡す（next/image・CMS・図版を吸収する）。縦横比とクリップはカード側が持つ",
         "Medium 型の縦リストは orientation=\"list\" + ContentList（区切り線つき）を使う",
-        "カード全体がリンク。linkComponent で next/link 等を差し込める"
+        "カード全体がリンク。linkComponent で next/link 等を差し込める",
+        "この部品は Server Component のまま使える。linkComponent を渡すためだけに、Next.js App Router の呼び出し側を \"use client\" にする必要はない（#264）"
       ]
     },
     {
@@ -809,7 +834,8 @@
       "path": "src/components/primitives/footer.tsx",
       "rules": [
         "variant='brand-first' でロゴ・説明文を先頭カラムに置き、その右にリンク群を並べる。下部バーはコピーライト左・bottomRightSlot 右の左右振り分けになる。linkGroups が空でもロゴ・説明文は落ちず、逆に logo/description が無いときは nav を 2 カラムへ押し込まない。この構成をカスタムマークアップで自作しない（#246）",
-        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。external:true のリンクは framework のリンク部品へ通す意味が無いため常に素の <a target=_blank> にフォールバックする（#236）"
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。external:true のリンクは framework のリンク部品へ通す意味が無いため常に素の <a target=_blank> にフォールバックする（#236）",
+        "この部品は Client Component のため、React Server Components では Server Component から linkComponent を渡せない（実行時に Functions cannot be passed directly to Client Components で落ちる）。Next.js App Router では呼び出し側のファイルを \"use client\" にする。エラーメッセージは \"use server\" を示唆するが正解は逆（#264）"
       ],
       "variants": [
         "default",
@@ -964,7 +990,8 @@
       "name": "MenuDrawer",
       "path": "src/components/primitives/menu-drawer.tsx",
       "rules": [
-        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。この部品の項目に external フラグは無く、渡した href はすべて linkComponent で描かれる（外部 URL を出し分けたい場合は consumer 側でラップする）（#236）"
+        "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。この部品の項目に external フラグは無く、渡した href はすべて linkComponent で描かれる（外部 URL を出し分けたい場合は consumer 側でラップする）（#236）",
+        "この部品は Client Component のため、React Server Components では Server Component から linkComponent を渡せない（実行時に Functions cannot be passed directly to Client Components で落ちる）。Next.js App Router では呼び出し側のファイルを \"use client\" にする。エラーメッセージは \"use server\" を示唆するが正解は逆（#264）"
       ]
     },
     {
@@ -1223,7 +1250,8 @@
       "rules": [
         "linkComponent でリンク実装を差し替えられる（next/link 等）。未指定なら素の <a>。この部品の項目に external フラグは無く、渡した href はすべて linkComponent で描かれる（外部 URL を出し分けたい場合は consumer 側でラップする）（#236）",
         "左右の余白は Container と同じ SP 16 / PC 24。利用側で px-* を足さない",
-        "本文を Container size=\"page\" で中央寄せしているサイトは containerSize=\"page\" を指定する。下線は全幅のまま中身だけ中央寄せされる（issue #234）"
+        "本文を Container size=\"page\" で中央寄せしているサイトは containerSize=\"page\" を指定する。下線は全幅のまま中身だけ中央寄せされる（issue #234）",
+        "この部品は Server Component のまま使える。linkComponent を渡すためだけに、Next.js App Router の呼び出し側を \"use client\" にする必要はない（#264）"
       ]
     },
     {
@@ -1374,6 +1402,9 @@
     {
       "name": "ProductCard",
       "path": "src/components/ec/product-card.tsx",
+      "subcomponents": [
+        "BookmarkRibbonIcon"
+      ],
       "layouts": [
         "vertical",
         "horizontal"

package/contracts/composition.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Composition Contracts",
-    "version": "0.19.0",
+    "version": "0.20.0",
     "description": "ページ骨格・視覚階層・余白リズムの機械可読な正本。画面パターンを選んだ後の「実際の組み方」を規定する。ページの外枠（モバイル/デスクトップ/管理）、商品グリッドの列数、余白の4段リズム、Surface のネスト階層、テキスト階層、CTA の優先順位を構造化する。人間向けの解説は guidelines/composition/layout.md・guidelines/composition/hierarchy.md・guidelines/overview.md。",
     "source": "guidelines/composition/layout.md, guidelines/composition/hierarchy.md, guidelines/overview.md, guidelines/components/button.md（CTA 密度ルール）を正本化",
     "roleSeparation": "screen-patterns.json はページ種別（Standard Page / Focused Workspace / ResponsiveDialog / Dialog）を選ぶための契約。composition.json は選んだ後、その骨格をどう組むか（外枠構造・余白リズム・階層）の契約。前者=何を使うか、後者=どう並べるか。",

package/contracts/rules.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Rules Contracts",
-    "version": "0.19.0",
+    "version": "0.20.0",
     "description": "禁止パターン・アクセシビリティ要件・ライティングルールの構造化定義。lint-scratch.sh と check-drift.sh で自動検証。"
   },
   "prohibited": [

package/contracts/screen-patterns.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Screen Patterns Contracts",
-    "version": "0.19.0",
+    "version": "0.20.0",
     "description": "CRUD 機能でどの画面パターンを使うかの機械可読な判断基準。5パターンの定義・CRUD 対応・決定木・編集UIの観点比較を構造化する。人間向けの解説は guidelines/foundations/screen-patterns.md。",
     "source": "GitHub issue #37 CRUDの画面設計の型化と基本パターンの整備",
     "relatedContract": "本契約はページ種別の選択（何を使うか）を担う。選んだ後の骨格の組み方（外枠構造・余白リズム・視覚階層）は contracts/composition.json を参照する。",

package/dist/components/ec/order-summary.js

@@ -1,14 +1,14 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import "react";
-import y from "iconsax-reactjs/dist/esm/ShieldTick.js";
+import v from "iconsax-reactjs/dist/esm/ShieldTick.js";
 import { cn as l } from "../../lib/utils.js";
 import { Button as u } from "../foundations/button.js";
-import { Separator as v } from "../foundations/separator.js";
+import { Separator as y } from "../foundations/separator.js";
 function T({
   className: t,
-  lineItems: r,
-  totalLabel: o = "合計（税込）",
-  totalValue: d,
+  lineItems: a,
+  totalLabel: d = "合計（税込）",
+  totalValue: o,
   ctaLabel: c,
   onCTAClick: n,
   showSecurityBadge: p = !1,
@@ -17,8 +17,8 @@ function T({
   ctaDisabled: f = !1,
   ...i
 }) {
-  const m = /* @__PURE__ */ a("div", { className: "space-y-2 px-4 py-3", children: [
-    r && r.map((s) => /* @__PURE__ */ a(
+  const m = /* @__PURE__ */ r("div", { className: "space-y-2 px-4 py-3", children: [
+    a && a.map((s) => /* @__PURE__ */ r(
       "div",
       {
         className: "flex items-center justify-between typo-body-md",
@@ -29,10 +29,10 @@ function T({
       },
       s.label
     )),
-    r && r.length > 0 && /* @__PURE__ */ e(v, {}),
-    /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ e("span", { className: "typo-heading-md text-[var(--Text-High-Emphasis)]", children: o }),
-      /* @__PURE__ */ e("span", { className: "typo-heading-lg text-[var(--Text-High-Emphasis)]", children: d })
+    a && a.length > 0 && /* @__PURE__ */ e(y, {}),
+    /* @__PURE__ */ r("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ e("span", { className: "typo-heading-md text-[var(--Text-High-Emphasis)]", children: d }),
+      /* @__PURE__ */ e("span", { className: "typo-heading-lg text-[var(--Text-High-Emphasis)]", children: o })
     ] }),
     /* @__PURE__ */ e(
       u,
@@ -44,8 +44,8 @@ function T({
         children: c
       }
     ),
-    p && /* @__PURE__ */ a("p", { className: "flex items-center justify-center gap-1 typo-body-sm text-[var(--Text-Low-Emphasis)]", children: [
-      /* @__PURE__ */ e(y, { size: 12 }),
+    p && /* @__PURE__ */ r("p", { className: "flex items-center justify-center gap-1 typo-body-sm text-[var(--Text-Low-Emphasis)]", children: [
+      /* @__PURE__ */ e(v, { size: 12 }),
       h
     ] })
   ] });
@@ -65,7 +65,8 @@ function T({
     {
       "data-slot": "order-summary",
       className: l(
-        "fixed inset-x-0 bottom-[52px] z-[var(--Z-Sticky)] mx-auto max-w-[430px] border-t border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Primary)]",
+        // fixed 表示はスクロール内容の上に重なるため地は Surface-Elevated（disableFixed 側はページ内フローなので Surface-Primary のまま）
+        "fixed inset-x-0 bottom-[52px] z-[var(--Z-Sticky)] mx-auto max-w-[430px] border-t border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Elevated)]",
         t
       ),
       ...i,

package/dist/components/ec/product-card.js

@@ -1,4 +1,4 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
 import "react";
 import { cn as m } from "../../lib/utils.js";
 import { PriceDisplay as k } from "../primitives/price-display.js";

package/dist/components/foundations/alert-dialog.js

@@ -8,7 +8,7 @@ function x({
 }) {
   return /* @__PURE__ */ e(o.Root, { "data-slot": "alert-dialog", ...a });
 }
-function D({
+function v({
   ...a
 }) {
   return /* @__PURE__ */ e(o.Trigger, { "data-slot": "alert-dialog-trigger", ...a });
@@ -34,7 +34,7 @@ function g({
     }
   );
 }
-function h({
+function D({
   className: a,
   size: t = "default",
   ...r
@@ -51,7 +51,7 @@ function h({
           // 画面端との余白は上下左右 40px（calc(100%-5rem)）。
           // 幅上限は端末幅に応じて: SP は端末幅-80px に追従 / sm 以上は
           // default=480px（テキスト確認が間延びしない幅）・sm=320px
-          "group/alert-dialog-content fixed top-[50%] left-[50%] z-[var(--Z-Modal)] grid w-full max-w-[calc(100%-5rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-background p-6 shadow-lg duration-[var(--Motion-Duration-Base)] data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-[480px]",
+          "group/alert-dialog-content fixed top-[50%] left-[50%] z-[var(--Z-Modal)] grid w-full max-w-[calc(100%-5rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Elevated)] p-6 shadow-lg duration-[var(--Motion-Duration-Base)] data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-[480px]",
           a
         ),
         ...r
@@ -59,7 +59,7 @@ function h({
     )
   ] });
 }
-function v({
+function h({
   className: a,
   ...t
 }) {
@@ -154,12 +154,12 @@ export {
   x as AlertDialog,
   w as AlertDialogAction,
   N as AlertDialogCancel,
-  h as AlertDialogContent,
+  D as AlertDialogContent,
   y as AlertDialogDescription,
   A as AlertDialogFooter,
-  v as AlertDialogHeader,
+  h as AlertDialogHeader,
   g as AlertDialogOverlay,
   n as AlertDialogPortal,
   z as AlertDialogTitle,
-  D as AlertDialogTrigger
+  v as AlertDialogTrigger
 };