@cakejp/design-system 0.13.0 → 0.14.1

package/dist/types/components/ec/product-detail-sidebar.d.ts

@@ -106,7 +106,7 @@ export interface ProductDetailSidebarProps extends React.HTMLAttributes<HTMLDivE
  * ### AI 向け使用ルール
  *
  * - PC商品詳細ページの右カラムに配置（幅 400px 推奨）
- * - 既存の `Tag`, `RatingStars`, `QuantitySelector`, `PriceDisplay`, `Button` を内部で使用
+ * - 既存の `Tag`, `RatingStars`, `NumberInput`, `PriceDisplay`, `Button` を内部で使用
  * - 価格表示は `PriceDisplay` コンポーネント（size="xl"）を使用し、税込表示フォーマットを統一
  * - サイズ選択肢は行単位の2次元配列で渡す
  * - `onAddToCart` が未指定の場合、ボタンは disabled

package/dist/types/components/foundations/social-icon.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+export type SocialPlatform = "line" | "x" | "facebook" | "amazon" | "google" | "apple";
+export interface SocialIconProps extends Omit<React.ComponentProps<"svg">, "children"> {
+    platform: SocialPlatform;
+    /**
+     * 表示サイズ（px）。
+     * width/height 属性は詳細度 0 のため Button の
+     * `[&_svg:not([class*='size-'])]:size-4` に負ける。確実に効かせるため inline style で当てる
+     * （consumer が `style` を渡した場合はそちらを優先）。
+     */
+    size?: number;
+    /**
+     * brand=ブランド配色 / mono=currentColor。
+     *
+     * **地がブランド色のボタン（LINE の緑地・Apple の黒地）では必ず `mono` を指定すること。**
+     * brand のままだとアイコンが地と同色になって消える。
+     */
+    tone?: "brand" | "mono";
+}
+/**
+ * SNS・決済ブランドのアイコン
+ *
+ * ブランドロゴの SVG を 1 箇所に集約する。ShareButtons / SocialLoginButton から利用し、
+ * 各所での SVG 手組み・二重管理を避ける。
+ *
+ * ### AI 向け使用ルール
+ *
+ * - ブランド色の地に載せるときは `tone="mono"` を指定する（地と同色になって消えるため）
+ * - サイズは `size`（px）で指定する。`className` の `size-*` は inline style に負ける
+ * - HEX 直書きは各ブランドの公式ロゴ色のみ（CLAUDE.md のブランドロゴ例外）
+ */
+declare function SocialIcon({ platform, size, tone, className, style, ...props }: SocialIconProps): import("react/jsx-runtime").JSX.Element;
+export { SocialIcon };

package/dist/types/components/primitives/combobox.d.ts

@@ -0,0 +1,24 @@
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    keywords?: string[];
+    disabled?: boolean;
+}
+export interface ComboboxProps {
+    options: ComboboxOption[];
+    value?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyLabel?: string;
+    disabled?: boolean;
+    className?: string;
+    /** trigger の id。FormField / FieldLabel の htmlFor と揃える */
+    id?: string;
+    /** 検証エラー時に true。FieldError と併せて使う */
+    "aria-invalid"?: boolean;
+    /** FieldError / FieldDescription の id */
+    "aria-describedby"?: string;
+}
+declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyLabel, disabled, className, id, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+export { Combobox };

package/dist/types/components/primitives/multi-select.d.ts

@@ -0,0 +1,24 @@
+export interface MultiSelectOption {
+    value: string;
+    label: string;
+    keywords?: string[];
+    disabled?: boolean;
+}
+export interface MultiSelectProps {
+    options: MultiSelectOption[];
+    value?: string[];
+    onValueChange?: (value: string[]) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyLabel?: string;
+    disabled?: boolean;
+    className?: string;
+    /** trigger の id。FormField / FieldLabel の htmlFor と揃える */
+    id?: string;
+    /** 検証エラー時に true。FieldError と併せて使う */
+    "aria-invalid"?: boolean;
+    /** FieldError / FieldDescription の id */
+    "aria-describedby"?: string;
+}
+declare function MultiSelect({ options, value, onValueChange, placeholder, searchPlaceholder, emptyLabel, disabled, className, id, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export { MultiSelect };

package/dist/types/components/primitives/notification-badge.d.ts

@@ -5,7 +5,7 @@ import { type VariantProps } from "class-variance-authority";
  * CVA では color のみ管理し、サイズは条件分岐で適用する。
  */
 declare const notificationBadgeVariants: (props?: {
-    color?: "red" | "green";
+    color?: "green" | "red";
     size?: "sm" | "md";
 } & import("class-variance-authority/types").ClassProp) => string;
 export interface NotificationBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">, VariantProps<typeof notificationBadgeVariants> {

package/dist/types/components/primitives/number-input.d.ts

@@ -0,0 +1,84 @@
+import * as React from "react";
+export interface NumberInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /** 現在の値（制御） */
+    value?: number;
+    /** 初期値（非制御） */
+    defaultValue?: number;
+    /** 最小値。既定 1 — 汎用の数値入力では明示すること */
+    min?: number;
+    /** 最大値。既定 99 — 価格・在庫など上限が違う用途では明示すること */
+    max?: number;
+    /** 増減幅 */
+    step?: number;
+    /** 値変更時のコールバック */
+    onChange?: (value: number) => void;
+    /** 無効状態 */
+    disabled?: boolean;
+    /** エラー状態 */
+    error?: boolean;
+    /** サイズ（md = Pattern 2 サークル / sm = Pattern 1 ピル） */
+    size?: "sm" | "md";
+    /** 数値の直接入力を許可する */
+    editable?: boolean;
+    /** 値が min のときにゴミ箱アイコンを表示する（カート行の削除導線） */
+    showTrash?: boolean;
+    /** ゴミ箱アイコン押下時のコールバック（削除確認ダイアログ表示等に使用） */
+    onDelete?: () => void;
+    /** 表示のフォーマット。桁区切り・通貨表示に使う（編集中は素の数値） */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** formatOptions のロケール */
+    locale?: string;
+    /** 入力欄の id。FormField / FieldLabel の htmlFor と揃える */
+    inputId?: string;
+    /**
+     * 入力欄・増減ボタンの読み上げラベル。既定はカート数量向けの「数量」。
+     * 価格・在庫など数量以外に使うときは必ず指定する（例: "販売価格"）
+     */
+    label?: string;
+}
+/**
+ * 数値入力コンポーネント（Figma 準拠デザイン）
+ *
+ * `−` / 数値 / `+` のステッパー。カートの数量から管理画面の価格・在庫まで、
+ * **DS の数値入力はすべてこれ**を使う（生の `<input type="number">` は使わない）。
+ *
+ * Figma DS の Adjust コンポーネントを再現。2つのパターンを提供：
+ *
+ * - **`size="sm"`（Pattern 1: コンパクト型）** — カート内での使用。
+ *   108×36px のコンテナに −/数字/+ をインライン配置。背景 `Surface/Tertiary`、角丸は全周。
+ *   ボタン（28px 円）の内側余白は上下左右とも 4px。
+ *
+ * - **`size="md"`（Pattern 2: サークル型）** — 商品詳細・管理画面での使用。
+ *   40px の円形ボタンが左右に独立し、中央に 48px 幅の数値コンテナ。ボタン間隔 12px。
+ *   `formatOptions` 指定時のみ、数値コンテナが内容幅に追従する（上限 160px）。
+ *
+ * ### ステート
+ * - `disabled`: 全要素のテキスト/アイコンが `Text/Disable` (#B7B5B4)
+ * - `error`: コンパクト型は赤枠（2px）、サークル型は数値コンテナが赤枠
+ * - `showTrash`: 値が min のとき − がゴミ箱アイコンに変化
+ *
+ * ### AI 向け使用ルール
+ *
+ * - **商品詳細ページ**: `size="md"` で配置
+ * - **カート内**: `size="sm"` でコンパクトに表示
+ * - **カート数量では `min=1` が標準**（0 にしない — 削除は別の UI で行う）
+ * - **価格・在庫など汎用の数値入力では `min` / `max` を必ず明示する**
+ *   （既定はカート数量向けの `min=1` / `max=99`）
+ * - 桁区切り・通貨表示は `formatOptions` を渡す（編集中は素の数値になる）
+ * - `editable=true` で数値の直接入力可能
+ *
+ * ※ 旧名 `QuantitySelector` は「カート数量」という用途名だったため、
+ *   同じものを探した人が見つけられず別実装が生まれた。機能名に改名し、
+ *   旧名は deprecated alias として残している。
+ */
+declare function NumberInput({ className, value, defaultValue, min, max, step, onChange, disabled, error, size, editable, showTrash, onDelete, formatOptions, locale, inputId, label, ...props }: NumberInputProps): import("react/jsx-runtime").JSX.Element;
+export { NumberInput };
+/**
+ * @deprecated 用途名（カート数量）ではなく機能名の `NumberInput` を使ってください。
+ * 同じものを別名で探して見つけられず二重実装が生まれたため改名しました。
+ * 意匠・API は同一で、この別名は互換のために残しています。
+ */
+declare const QuantitySelector: typeof NumberInput;
+/** @deprecated `NumberInputProps` を使ってください */
+export type QuantitySelectorProps = NumberInputProps;
+export { QuantitySelector };

package/dist/types/components/primitives/section.d.ts

@@ -53,7 +53,7 @@ declare const sectionVariants: (props?: {
     background?: "none" | "accent-subtle" | "subtle";
 } & import("class-variance-authority/types").ClassProp) => string;
 declare const sectionScrimVariants: (props?: {
-    scrim?: "none" | "light" | "dark" | "bottom-dark";
+    scrim?: "none" | "dark" | "light" | "bottom-dark";
 } & import("class-variance-authority/types").ClassProp) => string;
 declare function Section({ className, spacing, background, backgroundImage, scrim, style, ...props }: SectionProps): import("react/jsx-runtime").JSX.Element;
 export { Section, sectionVariants, sectionScrimVariants };

package/dist/types/components/primitives/social-login-button.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
-export type SocialProvider = "line" | "amazon" | "google" | "apple";
+import { type SocialPlatform } from "../../components/foundations/social-icon";
+export type SocialProvider = Extract<SocialPlatform, "line" | "amazon" | "google" | "apple">;
 export interface SocialLoginButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /** ソーシャルプロバイダー */
     provider: SocialProvider;
@@ -19,6 +20,7 @@ export interface SocialLoginButtonProps extends React.ButtonHTMLAttributes<HTMLB
  * - フルサイズ: `<SocialLoginButton provider="line" />`
  * - アイコンのみ: `<SocialLoginButton provider="google" size="icon" />`
  * - LINE は緑背景、他は白背景、Apple は黒背景
+ * - ブランドロゴは `SocialIcon` に集約している。個別に SVG を手組みしない
  */
 declare function SocialLoginButton({ provider, size, label, className, ...props }: SocialLoginButtonProps): import("react/jsx-runtime").JSX.Element;
 export { SocialLoginButton };

package/dist/types/index.d.ts

@@ -52,6 +52,8 @@ export { SkipLink } from "./components/foundations/skip-link";
 export type { SkipLinkProps } from "./components/foundations/skip-link";
 export { Slider } from "./components/foundations/slider";
 export { Spinner } from "./components/foundations/spinner";
+export { SocialIcon } from "./components/foundations/social-icon";
+export type { SocialIconProps, SocialPlatform } from "./components/foundations/social-icon";
 export { Switch } from "./components/foundations/switch";
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./components/foundations/table";
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/foundations/tabs";
@@ -67,10 +69,14 @@ export { AdminHeader } from "./components/primitives/admin-header";
 export type { AdminHeaderProps } from "./components/primitives/admin-header";
 export { CoachMark } from "./components/primitives/coach-mark";
 export type { CoachMarkProps, CoachMarkDirection } from "./components/primitives/coach-mark";
+export { Combobox } from "./components/primitives/combobox";
+export type { ComboboxOption, ComboboxProps } from "./components/primitives/combobox";
 export { BannerCarousel } from "./components/primitives/banner-carousel";
 export type { BannerCarouselProps, BannerItem } from "./components/primitives/banner-carousel";
 export { ContentCarousel } from "./components/primitives/content-carousel";
 export type { ContentCarouselProps, ContentCarouselItemsPerView } from "./components/primitives/content-carousel";
+export { MultiSelect } from "./components/primitives/multi-select";
+export type { MultiSelectOption, MultiSelectProps } from "./components/primitives/multi-select";
 export { StickyActionBar } from "./components/primitives/sticky-action-bar";
 export { BottomTabBar } from "./components/primitives/bottom-tab-bar";
 export type { BottomTabBarProps, BottomTabBarItem } from "./components/primitives/bottom-tab-bar";
@@ -136,8 +142,8 @@ export { ProgressSteps } from "./components/primitives/progress-steps";
 export type { ProgressStepsProps } from "./components/primitives/progress-steps";
 export { Timeline } from "./components/primitives/timeline";
 export type { TimelineItem, TimelineProps } from "./components/primitives/timeline";
-export { QuantitySelector } from "./components/primitives/quantity-selector";
-export type { QuantitySelectorProps } from "./components/primitives/quantity-selector";
+export { NumberInput, QuantitySelector } from "./components/primitives/number-input";
+export type { NumberInputProps, QuantitySelectorProps } from "./components/primitives/number-input";
 export { SearchBar } from "./components/primitives/search-bar";
 export type { SearchBarProps } from "./components/primitives/search-bar";
 export { SearchPanel } from "./components/primitives/search-panel";

package/eslint/deprecated.js

@@ -0,0 +1,44 @@
+import { readFileSync } from "node:fs"
+
+const contractUrl = new URL("../contracts/components.json", import.meta.url)
+const contracts = JSON.parse(readFileSync(contractUrl, "utf8"))
+const entries = ["foundations", "primitives", "ec"].flatMap(
+  (tier) => contracts[tier] ?? []
+)
+const deprecated = new Map(
+  entries.flatMap((entry) =>
+    (entry.deprecatedAliases ?? []).map((alias) => [alias, entry.name])
+  )
+)
+
+const noDeprecated = {
+  meta: {
+    type: "suggestion",
+    docs: { description: "Cake.jp DS の非推奨 export を検出する" },
+    schema: [],
+    messages: {
+      deprecated: "[cakejp-ds] {{name}} は非推奨です。{{replacement}} を使ってください。",
+    },
+  },
+  create(context) {
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value !== "@cakejp/design-system") return
+        for (const specifier of node.specifiers) {
+          if (specifier.type !== "ImportSpecifier") continue
+          const imported = specifier.imported.name
+          const replacement = deprecated.get(imported)
+          if (replacement) {
+            context.report({
+              node: specifier,
+              messageId: "deprecated",
+              data: { name: imported, replacement },
+            })
+          }
+        }
+      },
+    }
+  },
+}
+
+export default { rules: { "no-deprecated": noDeprecated } }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cakejp/design-system",
-  "version": "0.13.0",
+  "version": "0.14.1",
   "type": "module",
   "description": "Cake.jp Design System — UI コンポーネント・カラートークン・タイポグラフィ",
   "license": "UNLICENSED",
@@ -39,7 +39,9 @@
     "bin",
     "contracts",
     "dist",
+    "eslint",
     "scripts/codemod",
+    "src/components/COMPONENT_LOOKUP.md",
     "src/preset-standalone.css",
     "src/preset.css",
     "src/styles",
@@ -68,7 +70,8 @@
     "./styles": "./src/preset.css",
     "./tokens/primitive": "./src/styles/primitive.css",
     "./tokens/semantic": "./src/styles/semantic.css",
-    "./tokens/typography": "./src/styles/typography.css"
+    "./tokens/typography": "./src/styles/typography.css",
+    "./eslint/deprecated": "./eslint/deprecated.js"
   },
   "sideEffects": [
     "*.css"
@@ -91,7 +94,8 @@
     "typecheck:stories": "tsc --noEmit -p tsconfig.stories.json",
     "generate:lint-rules": "node scripts/generate-lint-rules.mjs",
     "generate:lookup": "node scripts/generate-component-lookup.mjs",
-    "check": "tsc --noEmit -p tsconfig.app.json && npm run typecheck:stories && bash scripts/check-deps.sh && bash scripts/check-drift.sh && bash scripts/check-docs-drift.sh && bash scripts/lint-scratch.sh && bash scripts/check-story-reuse.sh && bash scripts/check-responsive.sh && node scripts/check-border-color.mjs && bash scripts/lint-scratch.sh --components && bash scripts/check-generated-drift.sh",
+    "lint:contrast": "node scripts/check-contrast.mjs",
+    "check": "tsc --noEmit -p tsconfig.app.json && npm run typecheck:stories && bash scripts/check-deps.sh && bash scripts/check-drift.sh && bash scripts/check-docs-drift.sh && bash scripts/lint-scratch.sh && bash scripts/check-story-reuse.sh && bash scripts/check-responsive.sh && node scripts/check-border-color.mjs && npm run lint:contrast && bash scripts/lint-scratch.sh --components && bash scripts/check-generated-drift.sh",
     "test": "vitest run --config vitest.config.ts"
   },
   "dependencies": {

package/scripts/codemod/README.md

@@ -0,0 +1,14 @@
+# Codemod
+
+破壊的変更では `template.mjs` を複製し、`RENAMES`、`PROP_RENAMES`、
+`WARNINGS` の3箇所を埋めて移行スクリプトを作ります。
+
+```bash
+cp scripts/codemod/template.mjs scripts/codemod/v1-to-v2.mjs
+node scripts/codemod/v1-to-v2.mjs --dry ./src
+node scripts/codemod/v1-to-v2.mjs ./src
+```
+
+正規表現ベースのため、必ずコミット済みの利用側で `--dry` を先に実行し、
+適用後は `git diff` と ESLint の `@cakejp/design-system/eslint/deprecated`
+で残件を確認してください。

package/scripts/codemod/template.mjs

@@ -0,0 +1,62 @@
+#!/usr/bin/env node
+import fs from "node:fs"
+import path from "node:path"
+
+const PACKAGE_PATTERN = /@cakejp\/design-system/
+const RENAMES = []
+const PROP_RENAMES = []
+const WARNINGS = []
+
+const args = process.argv.slice(2)
+const dry = args.includes("--dry")
+const targetDir = args.find((arg) => !arg.startsWith("--")) ?? "./src"
+if (!fs.existsSync(targetDir)) {
+  console.error(`Directory not found: ${targetDir}`)
+  process.exit(1)
+}
+
+function filesIn(directory) {
+  return fs.readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+    const full = path.join(directory, entry.name)
+    if (entry.isDirectory()) {
+      return ["node_modules", "dist"].includes(entry.name) || entry.name.startsWith(".")
+        ? []
+        : filesIn(full)
+    }
+    return /\.(?:ts|tsx|js|jsx|mjs|cjs)$/.test(entry.name) ? [full] : []
+  })
+}
+
+let changedFiles = 0
+let changedItems = 0
+for (const file of filesIn(targetDir)) {
+  const source = fs.readFileSync(file, "utf8")
+  if (!PACKAGE_PATTERN.test(source)) continue
+  let output = source
+  let count = 0
+  for (const [before, after] of [...RENAMES].sort((a, b) => b[0].length - a[0].length)) {
+    const pattern = new RegExp(`\\b${before}\\b`, "g")
+    const matches = output.match(pattern)
+    if (matches) {
+      output = output.replace(pattern, after)
+      count += matches.length
+    }
+  }
+  for (const [component, before, after] of PROP_RENAMES) {
+    const pattern = new RegExp(`(<${component}[^>]*\\s)${before}=`, "g")
+    const matches = output.match(pattern)
+    if (matches) {
+      output = output.replace(pattern, `$1${after}=`)
+      count += matches.length
+    }
+  }
+  for (const warning of WARNINGS) {
+    if (warning.pattern.test(source)) console.warn(`⚠ ${file}: ${warning.message}`)
+  }
+  if (!count) continue
+  changedFiles++
+  changedItems += count
+  if (!dry) fs.writeFileSync(file, output)
+  console.log(`${dry ? "[dry]" : "✓"} ${file}: ${count}`)
+}
+console.log(`${changedFiles} files / ${changedItems} replacements`)

package/src/components/COMPONENT_LOOKUP.md

@@ -0,0 +1,166 @@
+# Component Lookup (AI必読)
+
+> **このファイルは `node scripts/generate-component-lookup.mjs` で自動生成されています。手動編集しないでください。**
+
+ページストーリーを書く前に、このファイルを確認して既存コンポーネントを必ず使うこと。
+独自でコンポーネントを定義する（function Xxx）前に、ここに同等品がないか確認すること。
+
+---
+
+## Foundations Components (src/components/foundations/)
+
+| Component | Import | Variants | Stories |
+|-----------|--------|----------|---------|
+| Accordion, AccordionItem, AccordionTrigger, AccordionContent | `@/components/foundations/accordion` | — | Default（単一展開）, 複数展開, 商品ページFAQ例 |
+| AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger | `@/components/foundations/alert-dialog` | — | Default, 破壊的操作（アカウント削除）, コンパクトサイズ |
+| Alert, AlertTitle, AlertDescription | `@/components/foundations/alert` | **variant**: `success`, `info`, `error`, `warning`, `inline-info`, `inline-caution`<br>**variant**: `success`, `info`, `error`, `warning`, `inline-info`, `inline-caution`, `inline-warning` | Success（成功）, Info（お知らせ）, Error（エラー）, Warning（注意）, Inline Info（インライン情報）, Inline Caution（インラインエラー）, Inline Warning（インライン警告）, Prop-based Warning（旧 Banner 相当）, Prop-based Error（エラー）, Prop-based Info（お知らせ）, Prop-based Success（成功）, Prop-based with Action（アクション付き）, Prop-based Inline Info（インライン情報）, Prop-based Inline Caution（インラインエラー）, Prop-based Inline Warning（インライン警告）, Info + ボタン, Error（複数メッセージ）, 全 Bordered バリアント, 全 Inline バリアント |
+| AspectRatio | `@/components/foundations/aspect-ratio` | — | Square, Banner16x9, ProductImage4x3, RatioComparison |
+| Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount | `@/components/foundations/avatar` | — | Default, フォールバック, サイズ比較, バッジ付き, グループ表示, レビュー表示例 |
+| Badge | `@/components/foundations/badge` | **variant**: `default`, `destructive`, `success`, `info-subtle`, `success-subtle`, `accent-subtle`, `caution-subtle`, `warning-subtle`, `muted-subtle`, `secondary`, `outline`, `ghost` | Default（商品ハイライト）, Secondary（カテゴリ）, Success（成功・完了）, Warning（注意）, Destructive（エラー）, Outline（枠線）, WithIcon, 注文ステータス例, 全バリアント一覧 |
+| Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis | `@/components/foundations/breadcrumb` | — | Default, 省略表示, 長いパス, 商品ページ例 |
+| Button | `@/components/foundations/button` | **variant**: `default`, `secondary`, `tertiary`, `destructive`, `ghost` | Default（CTA）, Secondary（副次的）, Secondary（追加済み）, Tertiary（低優先度）, Ghost（透明）, Destructive（破壊的）, Link（リンク）, Inverse（暗背景用 primary）, Ghost Inverse（暗背景用 secondary）, Inverse + Ghost Inverse（dark CTA 帯）, Overlay（画像上）, サイズ比較, XL（56px / rounded-18px）, Hero（56px / pill）, Large, FullWidth, Disabled（無効）, Loading（読込中）, WithIcon, IconOnly |
+| Calendar, CalendarDayButton | `@/components/foundations/calendar` | — | Default, お届け日選択, 日付範囲選択 |
+| Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent | `@/components/foundations/card` | **surface**: `default`, `primary` | Default, アクション付き, surface=, サーフェス文脈の伝播, 注文サマリー例 |
+| CheckboxCardGroup, CheckboxCardItem | `@/components/foundations/checkbox-card` | — | Default, 説明付き, 無効状態, 展開コンテンツ付き, ギフトオプション選択例, アレルギー情報例, バッジ付き, エラー状態 |
+| CheckboxGroup, CheckboxGroupItem | `@/components/foundations/checkbox-group` | — | Default, 選択済み, エラー, 非活性, ヘルプテキスト付き, 1カラム, 説明付き |
+| Checkbox | `@/components/foundations/checkbox` | — | Default, チェック済み, 件数バッジ付き, 説明テキスト付き, 非活性, HoverState, filter sidebar 実用例, 素の Checkbox（label なし）, エラーパターン, グループ例 |
+| Collapsible, CollapsibleTrigger, CollapsibleContent | `@/components/foundations/collapsible` | — | Default, CouponCodeInput, OrderOptions |
+| Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator | `@/components/foundations/command` | — | Default, ProductSearch, DeliveryOptions |
+| ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup | `@/components/foundations/context-menu` | — | Default, WithCheckboxItems |
+| DataTable, DataTableTable, DataTableHeader, DataTableBody, DataTableRow, DataTableHead, DataTableCell, DataTableAvatarCell, DataTableImageCell, DataTableLinkCell, DataTableCheckboxCell, DataTableActionCell, DataTableInputCell, DataTableSelectCell, DataTableNumberCell, DataTableDragHandleCell, DataTableBulkActions, DataTableSectionRow, DataTableAddRow, DataTableEmptyState | `@/components/foundations/data-table` | **state**: `default`, `selected`<br>**width**: `auto`, `max`, `hug`<br>**align**: `left`, `right`, `center` | Default, チェックボックス選択, タイトル固定, セクション, 空状態, 新規追加行, セル型バリエーション, 実用例（注文管理）, 入力系セル一覧, ソートヘッダー, D&D並び替え |
+| Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger | `@/components/foundations/dialog` | — | Default, 確認ダイアログ, フォーム入力 |
+| Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription | `@/components/foundations/drawer` | — | Default, カート追加クイックビュー, お届け日選択 |
+| DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent | `@/components/foundations/dropdown-menu` | — | Default, グループ付き, 注文アクション例 |
+| Field, FieldLabel, FieldSet, FieldLegend, FieldGroup, FieldDescription, FieldError, FieldSeparator | `@/components/foundations/field` | — | フォーム一式, ラベル付き区切り, Field / FieldLabel（1フィールドの箱） |
+| FileInput | `@/components/foundations/file-input` | — | Default, 複数選択 + accept, 無効, maxSize 超過エラー, FormField 連携 |
+| Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField | `@/components/foundations/form` | — | RHF register / reset 統合, DeliveryAddressForm, ReviewForm, ContactForm, RHF: register() + 保存済みの初期値, RHF: Controller + 保存済みの初期値 |
+| HoverCard, HoverCardTrigger, HoverCardContent | `@/components/foundations/hover-card` | — | Default, DeliveryInfo, RatingDetail |
+| IconBadge | `@/components/foundations/icon-badge` | **size**: `md`, `ml`, `lg` | md（44px）, ml（48px）, lg（72px）, サイズ比較, Card 内（間隔=Card の gap-4）, リスト見出し（md） |
+| Input | `@/components/foundations/input` | — | Default, WithLabel, Email, Password, Tel, Search, WithIcon, Disabled, Invalid（エラー）, Textarea, フォーム例（配送先）, 文字数カウンタ |
+| Label | `@/components/foundations/label` | — | Default, 必須ラベル, ヘルプテキスト付き, 登録フォームパターン, エラーパターン |
+| Menubar, MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent | `@/components/foundations/menubar` | — | Default, WithOptions |
+| NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport | `@/components/foundations/navigation-menu` | — | Default, WithoutViewport |
+| Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis | `@/components/foundations/pagination` | — | Default, 省略付き, 表示窓を自動計算, 最初のページ, 商品一覧ページ例 |
+| Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverHeader, PopoverTitle, PopoverDescription | `@/components/foundations/popover` | — | Default, DeliveryDatePicker, AllergyInfo |
+| Progress | `@/components/foundations/progress` | — | Default, 送料無料まで, 送料無料達成 |
+| RadioGroup, RadioGroupItem | `@/components/foundations/radio-group` | — | Default, 説明付き, 選択済み, 無効状態, エラーパターン, 補足説明なし, 配送方法選択例, チップ型（choice chip）, チップ型（制御・無効）, チップ型（エラー）, 支払い方法（クレカ入力済）, 支払い方法（クレカ未入力） |
+| ResponsiveDialog, ResponsiveDialogTrigger, ResponsiveDialogContent, ResponsiveDialogHeader, ResponsiveDialogFooter, ResponsiveDialogTitle, ResponsiveDialogDescription, ResponsiveDialogClose | `@/components/foundations/responsive-dialog` | — | 確認ダイアログ, フォーム入力, お知らせ（閉じるのみ） |
+| ScrollArea, ScrollBar | `@/components/foundations/scroll-area` | — | Default, HorizontalTagScroll, OrderHistoryList |
+| Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue | `@/components/foundations/select` | — | Default, ラベル付き, グループ分け, サイズ比較, 注文フォーム例, エラーパターン, 横並びパターン（氏名・住所）, Input と並置（高さが揃う） |
+| Separator | `@/components/foundations/separator` | — | Default（水平）, 垂直, 注文確認ページ例 |
+| Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription | `@/components/foundations/sheet` | — | Default, モバイルメニュー, 商品フィルター, スライド方向 |
+| Skeleton | `@/components/foundations/skeleton` | — | Default, 円形（アバター用）, 商品カードスケルトン, 商品グリッドスケルトン, レビュースケルトン, 商品詳細ページスケルトン |
+| SkipLink | `@/components/foundations/skip-link` | — | Default, CustomTarget |
+| Slider | `@/components/foundations/slider` | — | Default, PriceRangeFilter, ServingSizeSelector, RatingFilter |
+| SocialIcon | `@/components/foundations/social-icon` | — | Brand, Mono |
+| Toaster | `@/components/foundations/sonner` | — | Default, AddToCart, FavoriteAdded, StockError, OrderProcessing |
+| Spinner | `@/components/foundations/spinner` | — | Default, Small, Large, InlineWithText, FullPage |
+| Switch | `@/components/foundations/switch` | — | Default, ON 状態, 無効, サイズ比較, ブロック型, 通知設定例（リスト型） |
+| Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption | `@/components/foundations/table` | — | Default, フッター付き, 商品比較例, カート注文サマリー |
+| Tabs, TabsList, TabsTrigger, TabsContent | `@/components/foundations/tabs` | **variant**: `underbar`, `segment`<br>**scrollable**: `true` | Default（Underbar）, タブ数バリエーション, 横スクロール（多数タブ）, PC モード（文字幅ベース）, Segment（ピル型）, Segment 3択 |
+| Textarea | `@/components/foundations/textarea` | — | Default, 無効, メッセージカード入力例, エラーパターン, レビュー投稿例, 文字数カウンタ |
+| ToggleGroup, ToggleGroupItem | `@/components/foundations/toggle-group` | **width**: `fit`, `full`<br>**variant**: `default`, `outline`<br>**size**: `default`, `sm`, `lg`<br>**variant**: `default`, `outline`<br>**size**: `default`, `sm`, `lg` | Default, 複数選択, サイズ, アイコン付き, アイコンのみ, 無効 |
+| Toggle | `@/components/foundations/toggle` | **variant**: `default`, `outline`<br>**size**: `default`, `sm`, `lg` | Default, TextFormatting, FavoriteToggle, Outline, Sizes |
+| Tooltip, TooltipTrigger, TooltipContent, TooltipProvider | `@/components/foundations/tooltip` | — | Default, 表示位置, アイコンボタン例 |
+
+---
+
+## Primitives Components (src/components/primitives/)
+
+| Component | Import | Variants | Stories |
+|-----------|--------|----------|---------|
+| AdminHeader | `@/components/primitives/admin-header` | — | — |
+| AdminSideNav | `@/components/primitives/admin-side-nav` | — | — |
+| BannerCarousel | `@/components/primitives/banner-carousel` | — | Default, SmallBanners, LargeBanners |
+| BottomTabBar | `@/components/primitives/bottom-tab-bar` | — | Default（ホーム）, アクティブ状態, バッジ付き, バッジオーバーフロー（99+）, バナー付き, 記念日アクティブ |
+| BulkActionBar | `@/components/primitives/bulk-action-bar` | — | — |
+| CategoryScroll | `@/components/primitives/category-scroll` | — | Default, CircleThumbnails |
+| CategoryShortcuts | `@/components/primitives/category-shortcuts` | — | Default, 選択あり, インタラクティブ（onClick）, 商品一覧ページでの使用例 |
+| ChatComposer | `@/components/primitives/chat-composer` | — | 基本, 添付あり, ⌘Enter 送信, 送信中, 無効化, 文字数カウンタ |
+| Chip | `@/components/primitives/chip` | **variant**: `filled`, `accent`<br>**size**: `sm`, `md`, `lg`, `tile`<br>**shape**: `pill`, `square` | Default, 人気キーワード, 全バリアント, States（hover / disabled）, サイズ比較, フィルター選択, 削除可能（選択済みフィルター）, 検索画面での使用例 |
+| CoachMark | `@/components/primitives/coach-mark` | — | オンボーディング, 全方向, オンボーディング各方向 |
+| Combobox | `@/components/primitives/combobox` | — | Default |
+| Container | `@/components/primitives/container` | — | Default（page / default gutter）, サイズ比較, gutter 比較 |
+| ContentCarousel | `@/components/primitives/content-carousel` | — | ヒーローバナー, 自動再生（5秒）, peek表示, 多列カード（PC 3枚）, 1枚のみ |
+| DatePicker, DateTimePicker | `@/components/primitives/date-picker` | — | 日付ピッカー, 初期値あり, 選択範囲を制限, 特定日を無効化, FormField 連携, 無効化, クリア可能（任意項目） |
+| EmptyState | `@/components/primitives/empty-state` | — | お気に入り商品（空）, カート（空）, ブックマーク（空）, 検索結果なし, 汎用（説明のみ） |
+| ErrorState, NotFoundIllustration | `@/components/primitives/error-state` | — | ネットワークエラー, サーバーエラー, ページが見つからない, タイムアウト, 404（notFound variant）, 404（文言上書き）, イラスト単体 |
+| FilterBar | `@/components/primitives/filter-bar` | — | SP, SP（選択済み）, PC, 地域フィルター, もっと絞り込む |
+| Footer | `@/components/primitives/footer` | — | Default, 最小構成, SNSリンク付き, 決済方法付き |
+| FormField | `@/components/primitives/form-field` | — | — |
+| FunnelShell | `@/components/primitives/funnel-shell` | — | 注文内容の確認（ご購入手続き） |
+| Header | `@/components/primitives/header` | — | ロゴ＋アクション, ロゴ＋未ログイン, ロゴ＋グローバルナビ＋検索スロット（PC）, ロゴセンター（決済・申し込み用）, 戻る＋タイトル, 戻る＋検索バー, 戻る＋右側アクション, カスタムロゴ |
+| ImageCarousel | `@/components/primitives/image-carousel` | — | バナーカルーセル, 横長バナー, 正方形（商品画像）, OGP比率, 自動再生（3秒）, PC幅（ビューポート切替で確認）, トップページ ヒーローバナー |
+| ImageGallery | `@/components/primitives/image-gallery` | — | ドット付き, サムネイル付き, バナー（16:9）, PC商品詳細, 単一画像 |
+| ImageInput | `@/components/primitives/image-input` | **aspect**: `square`, `landscape`<br>**size**: `sm`, `md`, `lg` | 基本, 保存済み画像あり, 表示サイズ, FormField 連携, 検証エラー, クリア不可, 無効化 |
+| ImageUploader | `@/components/primitives/image-uploader` | — | — |
+| KebabMenu | `@/components/primitives/kebab-menu` | — | — |
+| ListItem | `@/components/primitives/list-item` | — | デフォルト（矢印）, キャプション付き, アイコン付き, テキスト値, バッジ付き, トグル, 矢印なし, 選択状態, メニューリスト（複数行）, アイコン付きメニュー, インタラクティブ（hover / focus） |
+| MenuDrawer | `@/components/primitives/menu-drawer` | — | デフォルト（最小構成）, ログイン済 (ユーザー名表示), 未ログイン (ログインボタン表示), サムネイル付きカテゴリ, バナー付き, 全部入り (大規模アプリ向け), ログインリンク非表示 |
+| MultiSelect | `@/components/primitives/multi-select` | — | Default |
+| NotificationBadge | `@/components/primitives/notification-badge` | **color**: `red`, `green`<br>**size**: `sm`, `md` | Default, ドットバッジ, 数値バッジ, カラーバリエーション, ヘッダーでの使用例, 非表示状態 |
+| NotificationList | `@/components/primitives/notification-list` | — | デフォルト, 横並び（管理画面向け）, 空の状態 |
+| NumberInput, QuantitySelector | `@/components/primitives/number-input` | — | Default, コンパクト型（sm）, サイズ比較, 最小・最大値, 無効状態, エラー状態, ゴミ箱アイコン, ゴミ箱＋削除確認ダイアログ, 直接入力パターン, 商品詳細での使用例, カート内での使用例, 価格・在庫入力（管理画面） |
+| PriceDisplay | `@/components/primitives/price-display` | — | Default, セール価格, サイズ比較, セール × サイズ, 税込ラベルなし, 高額商品, 価格レンジ |
+| ProgressSteps | `@/components/primitives/progress-steps` | — | ステップ1（カート）, ステップ2（注文内容）, ステップ3（確認）, ステップ4（完了）, 全ステップ一覧, 会員登録フロー |
+| SearchBar | `@/components/primitives/search-bar` | — | Default, Small（ヘッダー向け）, カスタムプレースホルダー |
+| SearchPanel | `@/components/primitives/search-panel` | — | — |
+| SectionHeader | `@/components/primitives/section-header` | — | Default, サブタイトル付き, リンクなし, カスタムラベル, カルーセルナビ付き, ナビのみ, ナビ（先頭位置）, アクションボタン付き, サブタイトル + アクション, サイズ一覧, キャプション付きサイズ比較, align=, LPヒーロー（SP 3xl / PC 5xl）, align=, start / center 比較 |
+| SectionNav | `@/components/primitives/section-nav` | — | Vertical, Horizontal |
+| Section | `@/components/primitives/section` | — | 推奨: Section + Container, 背景画像 + scrim, 背景バリアント, 縦 spacing バリアント, 配下 Card のサーフェス伝播, ランディング見出し |
+| ShareButtons | `@/components/primitives/share-buttons` | — | Default, コピーフィードバック |
+| SideNav | `@/components/primitives/side-nav` | — | Default, WithGroupLabels, MypageExample, PrefixMatch |
+| SocialLoginButton | `@/components/primitives/social-login-button` | — | LINE, フルサイズ一覧, アイコンのみ |
+| StandardPageShell | `@/components/primitives/standard-page-shell` | — | 検索結果ページ |
+| StatusCountTabs | `@/components/primitives/status-count-tabs` | — | — |
+| StickyActionBar | `@/components/primitives/sticky-action-bar` | — | SingleButton, TwoButtons, WithPrice |
+| SubNav | `@/components/primitives/sub-nav` | — | テキスト（本番準拠）, チップ型, アクティブなし |
+| Tag | `@/components/primitives/tag` | **variant**: `default`, `caution`, `sale`, `warning`, `info`, `info-fill`, `success`, `accent`, `timesale`, `berry`, `coupon`<br>**size**: `sm`, `md` | Default, 全バリアント一覧, サイズ比較, アイコン付き, 配送方法タグ, 商品カード内の例 |
+| Timeline | `@/components/primitives/timeline` | — | Default, カスタムマーカー |
+| WorkspaceShell | `@/components/primitives/workspace-shell` | — | 集中編集ワークスペース, ヘッダー中央寄せ（headerLayout=center）, 1カラム集中編集 |
+
+---
+
+## EC Components (src/components/ec/)
+
+| Component | Import | Variants | Stories |
+|-----------|--------|----------|---------|
+| MissingComponent, AdminShell | `@/components/ec/admin-shell` | — | 管理画面の骨格, 他ブランドでの再利用（brand / sidebarHeader 差し替え）, 長いレールラベル |
+| AnniversaryCard | `@/components/ec/anniversary-card` | — | — |
+| CakeLogo | `@/components/ec/cake-logo` | — | Default, カラー, ヘッダー配置例 |
+| ChartControls | `@/components/ec/chart-controls` | — | Default, WithPreviousPeriod, Interactive, InCard |
+| CountdownTimer | `@/components/ec/countdown-timer` | — | 開始前, 開催中, 終了後, 全バリエーション |
+| CouponCard | `@/components/ec/coupon-card` | — | 縦型 / 獲得可能, 縦型 / 獲得済み, 縦型 / 獲得不可, 縦型 / 画像なし, SP横長 / 獲得可能, SP横長 / 獲得済み, SP横長 / お店限定クーポン一覧, 縦型 / 一覧 |
+| DeliveryCalendar | `@/components/ec/delivery-calendar` | — | デフォルト, 日付選択あり, 3月 |
+| MypageShell | `@/components/ec/mypage-shell` | — | ブックマークした商品, 他ブランドでの再利用（logo / navItems 差し替え） |
+| OrderSection | `@/components/ec/order-section` | — | 入力済み, 未入力, エラー, 購入確認画面 |
+| OrderSummary | `@/components/ec/order-summary` | — | カート合計, チェックアウト合計, クーポン適用時, 合計のみ |
+| PaymentMethodDisplay, CreditCardIcon | `@/components/ec/payment-method` | — | 登録済み, 未登録, 期限切れ, 対応ブランド一覧, カードブランドアイコン |
+| ProductCard, BookmarkRibbonIcon | `@/components/ec/product-card` | — | ストロベリーショートケーキ 5号（15cm）, お気に入りボタン付き, タグ付き, ランキング, 配送日表示, 規格・仕様キャプション, 横向き, グリッドレイアウト（標準コンテナクエリ）, 割引バッジ, カートボタン付き, ショップ名リンク付き, 最小構成 |
+| ProductCarousel | `@/components/ec/product-carousel` | — | Default, WithRanking, LargeCards, WithSectionImage, WithDescription, WithCartButton |
+| ProductCTA | `@/components/ec/product-cta` | — | カートに追加, タイムセール中, 完売, 全バリエーション |
+| ProductDetailBar | `@/components/ec/product-detail-bar` | — | — |
+| ProductDetailSidebar | `@/components/ec/product-detail-sidebar` | — | フルセット（未作成ハイライト）, 最小構成, クーポンなし, ブックマーク済み |
+| ProductListItem | `@/components/ec/product-list-item` | — | デフォルト, 規格・仕様キャプション, 小サイズ, レビュー画面, 注文履歴, レビュー付き, 広告掲載, 一覧表示, レビュー画面一覧, カート, カート（小計付き）, カート一覧 |
+| ProductOption, OptionQuantity, OptionSelect, OptionText, OptionImageUpload | `@/components/ec/product-option` | — | 数量選択, プルダウン選択, テキスト入力, チェックボックス, 画像アップロード, 全オプション一覧 |
+| RatingStars, SparkleIcon | `@/components/ec/rating-stars` | — | Default, サイズ比較, 評価値バリエーション, 件数なし, アイコンのみ, 大量レビュー |
+| ReviewCard | `@/components/ec/review-card` | — | リスト（SP）, リスト（いいね済み）, カード（商品付き）, カード（商品なし）, PC, 画像なし, インタラクティブ |
+| ReviewForm | `@/components/ec/review-form` | — | デフォルト, 商品ヘッダーなし, 入力済み, 送信中, キャンセルなし |
+| ReviewSummary, ReviewItem | `@/components/ec/review-summary` | — | レビュー集計, 簡易集計, レビュー一覧 |
+| ShopCard | `@/components/ec/shop-card` | — | デフォルト, コンパクト, ルビ付き, グリッド表示 |
+| StatCard | `@/components/ec/stat-card` | — | — |
+
+---
+
+## よくある間違い
+
+| やっていたこと（禁止） | 正しい書き方 |
+|---|---|
+| `function SectionHeader()` を story 内で定義 | `import { SectionHeader } from '@/components/primitives/section-header'` |
+| `function FieldRow()` を定義してラベル+入力表示 | `import { FormField } from '@/components/primitives/form-field'` |
+| `<div className="rounded-xl bg-[var(--Surface-Primary)] border p-4">` | `<Card><CardContent className="p-4">` |
+| `<button className="...">` でボタンを作成 | `<Button variant="..." size="...">` |
+| `function StarRating()` を定義 | `import { RatingStars } from '@/components/ec/rating-stars'` |
+| `function CartSummaryTable()` を定義 | `import { OrderSummary } from '@/components/ec/order-summary'` |
+| 数量変更の +/- ボタンを raw button で実装 | `import { QuantitySelector } from '@/components/primitives/quantity-selector'` |
+| 配送切替を `ToggleGroup` で実装 | `<Tabs variant="segment">` で Segment（ピル型）タブを使う |

package/templates/AGENTS.md

@@ -13,10 +13,12 @@ Codex（および他の AI エージェント）は UI 作業を始める前に
 |---------|------|
 | `node_modules/@cakejp/design-system/CLAUDE.md` | DS 利用ガイド・禁止パターン |
 | `node_modules/@cakejp/design-system/contracts/components.json` | 全コンポーネントの定義・バリアント |
+| `node_modules/@cakejp/design-system/src/components/COMPONENT_LOOKUP.md` | 125コンポーネントの軽量な早見表 |
 | `node_modules/@cakejp/design-system/contracts/rules.json` | 禁止パターン・アクセシビリティ要件 |
 | `node_modules/@cakejp/design-system/tokens.json` | カラー・余白・角丸・影・タイポ |
 
 > DS 側のルール更新は `npm update @cakejp/design-system` で自動反映されます。このファイルは書き換え不要。
+> 旧exportの残存は `@cakejp/design-system/eslint/deprecated` の `no-deprecated` ルールで継続検出できます。
 
 ## ❌ 書く前に必ず確認するパターン