@cakejp/design-system 0.12.0 → 0.14.0

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/src/preset-standalone.css

@@ -405,6 +405,7 @@
  */
 
 /* Heading */
+.typo-heading-5xl { font-size: 40px; line-height: 1.35; letter-spacing: 0.04em; font-weight: 700; }
 .typo-heading-4xl { font-size: 32px; line-height: 1.4; letter-spacing: 0.04em; font-weight: 700; }
 .typo-heading-3xl { font-size: 28px; line-height: 1.5; letter-spacing: 0.04em; font-weight: 700; }
 .typo-heading-2xl { font-size: 24px; line-height: 1.5; letter-spacing: 0.04em; font-weight: 700; }
@@ -424,3 +425,18 @@
 .typo-label-md { font-size: 14px; line-height: 1.5; letter-spacing: 0.04em; font-weight: 700; }
 .typo-label-sm { font-size: 12px; line-height: 1.5;  font-weight: 500; }
 .typo-label-xs { font-size: 10px; line-height: 1.5;  font-weight: 500; }
+
+/* --- Touch target utility ---
+ * Tailwind を使わない consumer でも preset と同じ44px操作領域を利用できる。 */
+.tap-target {
+  position: relative;
+}
+.tap-target::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: max(100%, 2.75rem);
+  height: max(100%, 2.75rem);
+  transform: translate(-50%, -50%);
+}

package/src/preset.css

@@ -18,6 +18,7 @@
  *   - Tailwind 標準色 → Cake.jp マッピング（bg-red-600 等）
  *   - シャドウ・角丸トークン
  *   - アニメーションユーティリティ
+ *   - 見た目を変えず44pxの操作領域を確保する tap-target ユーティリティ
  * ============================================ */
 
 /* --- Layer 1: Primitive Colors --- */
@@ -302,6 +303,22 @@
   animation: slide-in-left 200ms ease-out;
 }
 
+/* --- Touch target utility ---
+ * 見た目が44px未満の小型操作部品に付け、透明な疑似要素で実効操作領域だけを拡張する。
+ * 隣接ターゲットと重なる密度では使わず、親レイアウト側の gap も確保する。 */
+.tap-target {
+  position: relative;
+}
+.tap-target::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: max(100%, 2.75rem);
+  height: max(100%, 2.75rem);
+  transform: translate(-50%, -50%);
+}
+
 /* --- Base layer --- */
 @layer base {
   * {

package/src/styles/typography.css

@@ -32,6 +32,13 @@
 
 /* ─── Heading ─── */
 
+@utility typo-heading-5xl {
+  font-size: 2.5rem;         /* 40px */
+  line-height: 1.35;         /* 54px */
+  letter-spacing: 0.04em;
+  font-weight: 700;
+}
+
 @utility typo-heading-4xl {
   font-size: 2rem;           /* 32px */
   line-height: 1.4;          /* 44.8px */

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` ルールで継続検出できます。
 
 ## ❌ 書く前に必ず確認するパターン
 
@@ -41,6 +43,8 @@ DS に該当パターンが無い場合のみカスタム実装を許可。そ
 3. それでも無ければ、手元に台帳を作らず **flashpark/cake-design-system に issue を立てる**。
 4. やむを得ずローカル実装する場合は、「DS に X が追加されたら削除」の条件コメントを必ず添える。
 
+**意図的にローカル実装を残すとき（check-duplicates の抑制）**: 対象 export の直前のコメント行（または行末コメント）に `// cakejp-ds-allow-duplicate: <理由>` を書くと、その 1 件だけ検出から外れる。**理由が空なら抑制されない**（形骸化防止）。抑制した件数と理由はサマリに出るので、`--strict` を CI に入れたまま運用できる。
+
 ## 使用方法
 
 ### CSS のセットアップ（重要）

package/templates/CLAUDE.md

@@ -13,12 +13,14 @@ 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/screen-patterns.json` | 画面パターン判断基準（CRUD・編集/作成/削除UIの選択） |
 | `node_modules/@cakejp/design-system/contracts/composition.json` | ページ骨格・余白リズム・視覚階層の組み方 |
 | `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` ルールで継続検出できます。
 
 ## ❌ 書く前に必ず確認するパターン
 
@@ -43,6 +45,8 @@ DS に該当パターンが無い場合のみカスタム実装を許可。そ
 3. それでも無ければ、手元に台帳を作らず **flashpark/cake-design-system に issue を立てる**。
 4. やむを得ずローカル実装する場合は、「DS に X が追加されたら削除」の条件コメントを必ず添える。
 
+**意図的にローカル実装を残すとき（check-duplicates の抑制）**: 対象 export の直前のコメント行（または行末コメント）に `// cakejp-ds-allow-duplicate: <理由>` を書くと、その 1 件だけ検出から外れる。**理由が空なら抑制されない**（形骸化防止）。抑制した件数と理由はサマリに出るので、`--strict` を CI に入れたまま運用できる。
+
 ## 使用方法
 
 ### CSS のセットアップ（重要）