@cakejp/design-system 0.13.0 → 0.14.0

package/contracts/components.json

@@ -1,16 +1,17 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Component Contracts",
-    "version": "0.1.0",
+    "version": "0.14.0",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "kind": "kind:\"shell\" は複数ページで再利用されるレイアウト枠（AdminShell / WorkspaceShell / MypageShell 等）。無印は部品コンポーネント。固有ページを組むときは該当 shell から始める。src/components/pages/ 配下のストーリーは特定ページ専用・非配布のため contracts の対象外。",
+    "naming": "コンポーネント名は**用途ではなく機能**で付ける。用途名（QuantitySelector = カート数量）にすると、同じ機能を別の文脈で探した人が見つけられず二重実装が生まれる（実例: 用途名だったため NumberInput が別途作られ、意匠の違うステッパーが 2 つになった）。「〜Selector」「〜Picker」等の用途接尾辞を付ける前に、その部品が何をするものかで名前が付けられないかを先に検討する。既存名を機能名へ変える場合は deprecatedAliases に旧名を残す。",
     "exportNaming": "name は原則そのまま @cakejp/design-system から import できる export 名。例外は機械可読に印を付ける — exported:false=name は実装ファイル/グループ名で import できない（実 export は subcomponents 側。例: CheckboxCard → CheckboxCardGroup / CheckboxCardItem）、exportedAs=別名で export される（例: FormField → CakeFormField）、deprecatedAliases=互換のため残す旧 export 名（新規利用禁止）。この対応は __tests__/contracts-export-integrity.test.ts が src/index.ts と突き合わせて固定し、bin/check-duplicates.mjs の照合対象もこの規約に従う。",
     "formBinding": "react-hook-form との繋ぎ方。formBinding:\"register\"=ネイティブ form control に props/ref を透過するので {...register(\"name\")} を直接 spread できる（Input / Textarea）。formBinding:\"controller\"=Radix ベースで ref が <button> 等に着地する、または値が Date/File など非文字列のため Controller の field.value / field.onChange に繋ぐ。formBinding:\"layout\"=値を持たないレイアウト部品でバインド対象ではない（Field / Form / FormField / ProductOption）。formBinding:\"none\"=値は扱うが単一フィールドのバインド対象ではない自己完結フォーム・複合ウィジェット（DataTable / SearchBar / ReviewForm）。この切り分けは __tests__/react-hook-form-integration.test.tsx が実挙動で固定する（issue #151 / #152）。",
     "counts": {
-      "foundations": 50,
-      "primitives": 47,
+      "foundations": 51,
+      "primitives": 49,
       "ec": 24,
-      "total": 121,
+      "total": 124,
       "note": "counts は各ティアの実装ファイル数（scripts/check-drift.sh が src/components/<tier>/*.tsx と突き合わせる）。subcomponents / deprecatedAliases は含まない。"
     }
   },
@@ -19,13 +20,6 @@
       "name": "Accordion",
       "path": "src/components/foundations/accordion.tsx"
     },
-    {
-      "name": "AlertDialog",
-      "path": "src/components/foundations/alert-dialog.tsx",
-      "rules": [
-        "破壊的操作の確認に使用。削除ボタン押下後に必ず挟む"
-      ]
-    },
     {
       "name": "Alert",
       "path": "src/components/foundations/alert.tsx",
@@ -47,6 +41,18 @@
         "inline variant（inline-info/inline-caution/inline-warning）も同じ prop-based API に対応（#109）。フォーム内・セクション内の軽量な補足情報用。アイコンは20pxで自動選択"
       ]
     },
+    {
+      "name": "AlertDialog",
+      "path": "src/components/foundations/alert-dialog.tsx",
+      "sizes": [
+        "default",
+        "sm"
+      ],
+      "rules": [
+        "破壊的操作の確認に使用。削除ボタン押下後に必ず挟む",
+        "幅上限は default=480px / sm=320px。SP では画面端から上下左右 40px の余白を保つ（コンポーネントが持つので consumer 側で margin を足さない）"
+      ]
+    },
     {
       "name": "AspectRatio",
       "path": "src/components/foundations/aspect-ratio.tsx",
@@ -107,7 +113,7 @@
       ],
       "rules": [
         "<button>を直接使わない。必ずButtonコンポーネントを使う",
-  "高さは size='default'=44px（h-11） / xs=24px / sm=32px / lg=48px / xl=56px / hero=min 56px。default はフォーム入力コントロール（Input / SelectTrigger default / DatePicker trigger）と同じ 44px なので、入力行にボタンを並置しても揃う",
+        "高さは size='default'=44px（h-11） / xs=24px / sm=32px / lg=48px / xl=56px / hero=min 56px。default はフォーム入力コントロール（Input / SelectTrigger default / DatePicker trigger）と同じ 44px なので、入力行にボタンを並置しても揃う",
         "⚠️ variant='secondary' はブランドアクセント意匠（Surface-Accent-Primary-Light地+Brand-Cake-Orange文字）。Material/Bootstrap/shadcn の secondary（グレー・控えめ）とは別物なので、他DSの感覚で選ばない",
         "「戻る」「キャンセル」「閉じる」「スキップ」「あとで」等の後退・中立アクションは variant='tertiary'（Surface-Tertiary地+Text-High-Emphasis文字のニュートラルなグレー）を使う。主CTAの隣に置く2番目のボタンでも、役割が後退なら secondary ではなく tertiary",
         "variant='secondary' を使うのは、主CTAと別方向の“前進”を促す副CTAのとき（例: 主='購入する' に対し 副='サンプルを見る'）",
@@ -145,6 +151,14 @@
         "DSのSectionを使わない自前のグレー地では、親要素に className='[--card-surface:var(--Surface-Primary)]' を宣言すれば配下Cardが白になる（darkにも配慮するなら dark:[--card-surface:var(--Surface-Secondary)] を併記）。1枚だけ地に馴染ませたいときは className='bg-card' で上書きする"
       ]
     },
+    {
+      "name": "Checkbox",
+      "path": "src/components/foundations/checkbox.tsx",
+      "formBinding": "controller",
+      "accessibility": [
+        "必ずLabelと紐付ける"
+      ]
+    },
     {
       "name": "CheckboxCard",
       "path": "src/components/foundations/checkbox-card.tsx",
@@ -163,14 +177,6 @@
         "CheckboxGroupItem"
       ]
     },
-    {
-      "name": "Checkbox",
-      "path": "src/components/foundations/checkbox.tsx",
-      "formBinding": "controller",
-      "accessibility": [
-        "必ずLabelと紐付ける"
-      ]
-    },
     {
       "name": "Collapsible",
       "path": "src/components/foundations/collapsible.tsx",
@@ -240,6 +246,23 @@
         "見出しは FieldLegend、グループ横断の区切りは FieldSeparator を使う"
       ]
     },
+    {
+      "name": "FileInput",
+      "path": "src/components/foundations/file-input.tsx",
+      "formBinding": "controller",
+      "accessibility": [
+        "idをLabel/FormFieldのhtmlForと揃えて紐付ける",
+        "ネイティブ<input type='file'>をvisually-hiddenで内包しキーボード・SR操作可能",
+        "エラー表示はaria-describedbyでFieldErrorと接続"
+      ],
+      "rules": [
+        "<input type='file'>を直接書かない。汎用の添付（PDF/CSV/画像混在）はFileInputを使う",
+        "画像1枚の入力（プレビュー+形式/サイズ検証+値のバインド）はImageInputを使う",
+        "複数枚の画像を並べて管理するグリッドはImageUploaderを使う",
+        "複数選択時（multiple）は選択済みを「n件選択」で集約表示",
+        "maxSize（バイト）超過ファイルは受理せずonErrorを呼ぶ"
+      ]
+    },
     {
       "name": "Form",
       "path": "src/components/foundations/form.tsx",
@@ -348,23 +371,6 @@
         "variant='chip'=ラベルを内包したChoice Chip意匠の排他選択（タグ選択・絞り込み等）。ラジオ丸は描画せず、Chip本体と同じchipVariantsを再利用して選択状態をaccent意匠（静止=薄オレンジ/hover=ベタ塗り）で示す。description/expandedContentは持たない。Radixのキーボード操作・a11yは維持"
       ]
     },
-    {
-      "name": "FileInput",
-      "path": "src/components/foundations/file-input.tsx",
-      "formBinding": "controller",
-      "accessibility": [
-        "idをLabel/FormFieldのhtmlForと揃えて紐付ける",
-        "ネイティブ<input type='file'>をvisually-hiddenで内包しキーボード・SR操作可能",
-        "エラー表示はaria-describedbyでFieldErrorと接続"
-      ],
-      "rules": [
-        "<input type='file'>を直接書かない。汎用の添付（PDF/CSV/画像混在）はFileInputを使う",
-        "画像1枚の入力（プレビュー+形式/サイズ検証+値のバインド）はImageInputを使う",
-        "複数枚の画像を並べて管理するグリッドはImageUploaderを使う",
-        "複数選択時（multiple）は選択済みを「n件選択」で集約表示",
-        "maxSize（バイト）超過ファイルは受理せずonErrorを呼ぶ"
-      ]
-    },
     {
       "name": "ResponsiveDialog",
       "path": "src/components/foundations/responsive-dialog.tsx",
@@ -429,11 +435,18 @@
       "formBinding": "controller"
     },
     {
-      "name": "Toaster",
-      "path": "src/components/foundations/sonner.tsx",
+      "name": "SocialIcon",
+      "path": "src/components/foundations/social-icon.tsx",
+      "props": [
+        "platform",
+        "tone?: brand | mono",
+        "size?: number"
+      ],
       "rules": [
-        "トースト内にアクションリンクを入れない。左ボーダーではなく背景色全体で状態を表現",
-        "アプリのルートに <Toaster /> を1つ置き、表示は toast()（sonner の再 export）で呼ぶ"
+        "SNS・外部サービスのロゴSVGは手書きせずSocialIconへ集約する",
+        "ブランド色はThird-Partyトークンを使う",
+        "ブランド色の地（LINEの緑・Appleの黒）に載せるときはtone=\"mono\"を指定する。brandのままだとアイコンが地と同色になって消える",
+        "サイズはsize（px）で指定する。classNameのsize-*はinline styleに負ける"
       ]
     },
     {
@@ -477,11 +490,11 @@
       ]
     },
     {
-      "name": "ToggleGroup",
-      "path": "src/components/foundations/toggle-group.tsx",
-      "formBinding": "controller",
+      "name": "Toaster",
+      "path": "src/components/foundations/sonner.tsx",
       "rules": [
-        "水平パディングはコンポーネント内に入れない。親が管理する"
+        "トースト内にアクションリンクを入れない。左ボーダーではなく背景色全体で状態を表現",
+        "アプリのルートに <Toaster /> を1つ置き、表示は toast()（sonner の再 export）で呼ぶ"
       ]
     },
     {
@@ -489,6 +502,14 @@
       "path": "src/components/foundations/toggle.tsx",
       "formBinding": "controller"
     },
+    {
+      "name": "ToggleGroup",
+      "path": "src/components/foundations/toggle-group.tsx",
+      "formBinding": "controller",
+      "rules": [
+        "水平パディングはコンポーネント内に入れない。親が管理する"
+      ]
+    },
     {
       "name": "Tooltip",
       "path": "src/components/foundations/tooltip.tsx",
@@ -499,37 +520,30 @@
   ],
   "primitives": [
     {
-      "name": "CoachMark",
-      "path": "src/components/primitives/coach-mark.tsx"
-    },
-    {
-      "name": "BannerCarousel",
-      "path": "src/components/primitives/banner-carousel.tsx"
-    },
-    {
-      "name": "ContentCarousel",
-      "path": "src/components/primitives/content-carousel.tsx",
-      "features": [
-        "scroll-snap",
-        "dots",
-        "arrows",
-        "autoPlay",
-        "itemsPerView"
-      ],
+      "name": "AdminHeader",
+      "path": "src/components/primitives/admin-header.tsx",
       "rules": [
-        "ReactNode スライド対応（slides: ReactNode[]）。テキスト主体のヒーローバナー用",
-        "itemsPerView=2|3|4 で PC の複数カード表示に対応。SP は1枚表示を維持し、EC 商品以外の求人・記事カード等にも使う",
-        "画像だけのバナーは ImageCarousel を使う",
-        "矢印・ドットの意匠は ImageCarousel と同一"
+        "管理画面向けの上端固定ヘッダーの汎用枠。左に SP ハンバーガー＋brand、右に actions slot",
+        "文言合成（『{shopName}管理』等）はしない。brand / actions を利用側が組み立てて渡す",
+        "onMenuClick 省略時はハンバーガー非表示"
       ]
     },
     {
-      "name": "StickyActionBar",
-      "path": "src/components/primitives/sticky-action-bar.tsx",
+      "name": "AdminSideNav",
+      "path": "src/components/primitives/admin-side-nav.tsx",
+      "category": "navigation",
       "rules": [
-        "モバイル固定フッターCTA"
+        "管理画面向けサイドナビの汎用枠。PC は左端固定アイコンレール（ホバーでサブメニュー）、SP は制御ドロワー（サブメニューはアコーディオン）",
+        "項目データ（メニュー定義・文言）は全て items prop で受ける。特定事業のメニューを部品側に焼き込まない（Cake.jp 既定は AdminShell が持つ）",
+        "PC レールのラベルは max-w-12 + typo-label-xs + 中央揃えを本体が所有する。5文字超も語のまとまりで折り返せるため、consumer が data-slot セレクタで内部上書きしない",
+        "SP ドロワー開閉は open / onOpenChange で制御する（内部 state を持たない）",
+        "icon は ReactNode か描画コンテキスト（active / placement）で出し分ける関数を渡す"
       ]
     },
+    {
+      "name": "BannerCarousel",
+      "path": "src/components/primitives/banner-carousel.tsx"
+    },
     {
       "name": "BottomTabBar",
       "path": "src/components/primitives/bottom-tab-bar.tsx",
@@ -544,14 +558,14 @@
         "テーブル選択時の一括操作バー。div手書き禁止"
       ]
     },
-    {
-      "name": "CategoryShortcuts",
-      "path": "src/components/primitives/category-shortcuts.tsx"
-    },
     {
       "name": "CategoryScroll",
       "path": "src/components/primitives/category-scroll.tsx"
     },
+    {
+      "name": "CategoryShortcuts",
+      "path": "src/components/primitives/category-shortcuts.tsx"
+    },
     {
       "name": "ChatComposer",
       "path": "src/components/primitives/chat-composer.tsx",
@@ -597,6 +611,58 @@
         "Tagと違い押せる・削除できる"
       ]
     },
+    {
+      "name": "CoachMark",
+      "path": "src/components/primitives/coach-mark.tsx"
+    },
+    {
+      "name": "Combobox",
+      "path": "src/components/primitives/combobox.tsx",
+      "formBinding": "controller",
+      "props": [
+        "options: ComboboxOption[]",
+        "value?: string",
+        "onValueChange?: (value: string) => void",
+        "id?: string",
+        "aria-invalid?: boolean",
+        "aria-describedby?: string"
+      ],
+      "rules": [
+        "検索が必要な単一選択に使う。少数候補はSelectまたはRadioGroupを使う",
+        "Popover + Command の検索・キーボード操作を内包する",
+        "制御コンポーネント。value と onValueChange を必ず渡す（非制御では選択が反映されない）",
+        "FormField と繋ぐときは id を FieldLabel の htmlFor と揃え、エラーは aria-invalid / aria-describedby で FieldError に接続する"
+      ]
+    },
+    {
+      "name": "Container",
+      "path": "src/components/primitives/container.tsx",
+      "variants": [
+        "size: page | narrow | wide | fluid",
+        "gutter: default | tight | none"
+      ],
+      "rules": [
+        "ページ最大幅と左右paddingの唯一の担い手。これを使う親(Section等)は自身で左右paddingを持たない（二重がけ防止）",
+        "縦余白・背景色は持たない（Sectionの責務）"
+      ]
+    },
+    {
+      "name": "ContentCarousel",
+      "path": "src/components/primitives/content-carousel.tsx",
+      "features": [
+        "scroll-snap",
+        "dots",
+        "arrows",
+        "autoPlay",
+        "itemsPerView"
+      ],
+      "rules": [
+        "ReactNode スライド対応（slides: ReactNode[]）。テキスト主体のヒーローバナー用",
+        "itemsPerView=2|3|4 で PC の複数カード表示に対応。SP は1枚表示を維持し、EC 商品以外の求人・記事カード等にも使う",
+        "画像だけのバナーは ImageCarousel を使う",
+        "矢印・ドットの意匠は ImageCarousel と同一"
+      ]
+    },
     {
       "name": "DatePicker",
       "path": "src/components/primitives/date-picker.tsx",
@@ -667,6 +733,38 @@
         "npm 経由では CakeFormField として import する（foundations/form.tsx の FormField と名前が衝突するため別名で export）"
       ]
     },
+    {
+      "name": "FunnelShell",
+      "path": "src/components/primitives/funnel-shell.tsx",
+      "kind": "shell",
+      "variants": [],
+      "rules": [
+        "EC 購入導線等のファネル用集中モード（Full Page）のシェル。集中ヘッダー＋進捗インジケータ（steps/activeStep）＋ステップ本体＋任意の bottomAction で構成。min-h-dvh flex flex-col の全高コンテナ",
+        "ヘッダーの基本形は中央ロゴ（logo prop → Header variant=logo-center）。ライブ本番の購入導線（cart_layout.ctp の cartHeader）準拠で離脱導線をロゴのみに絞る。狙いは戻り・離脱をしづらくして途中離脱を抑制すること（＝Header の logo-center は決済・申込ページ用の既定バリアント、本番 cartHeader もロゴクリックが /cart/・thanks に限定）。title+back（Header variant=back）は多段申込等でタイトル・戻るが要る場合の代替形。logo と title はどちらか一方を渡す（logo 優先）",
+        "あくまで枠。ステップ定義（名前・数）・文言・商品データを焼き込まない。steps / activeStep は利用側（ドメイン）が渡す",
+        "グローバルナビ・BottomTabBar・パンくずを持たない（構造的に置けない）。離脱を誘う導線を出さず購入に集中させる",
+        "bottomAction（StickyActionBar 等）を渡すと本文の下余白はシェルが管理する。ページ側で pb を書かない（付け忘れ／二重がけの構造的防止）",
+        "左右 padding は持たない（Container の責務）。管理画面の複雑な集中編集は WorkspaceShell を使う（EC 購入導線＝FunnelShell）",
+        "地がSurface-Secondaryなので、シェルが配下Cardのサーフェス文脈（--card-surface: Surface-Primary）を宣言する → Cardはsurface未指定のまま白で地から浮く（#150）。darkは据え置き",
+        "a11y: DOM 先頭に SkipLink を標準内蔵し <main id> を制御できる（mainId 既定 main-content）。sr-only で視覚無影響。skipLink={false} で無効化"
+      ]
+    },
+    {
+      "name": "Header",
+      "path": "src/components/primitives/header.tsx",
+      "variants": [
+        "logo",
+        "logo-center",
+        "back",
+        "back-search"
+      ],
+      "rules": [
+        "variant=\"logo\" の PC 行（@[768px]+）では searchSlot で navItems と actions の間に常設検索を inline 配置できる（flex-1 max-w-[400px] で伸縮）。navItems 無し＋searchSlot だけでも PC 行を描画する",
+        "SP 行に searchSlot は出さない。SP の常設検索は従来どおり bottomSlot で運用する",
+        "bottomSlot はヘッダー下段の全幅スロット（ProductDetailBar 等）。PC 常設検索の置き場に使わない（PC 二段ヘッダーになる）",
+        "actions（HeaderAction）はカート・マイページ等の本来リンクである導線には href を指定する。href 指定時は Button asChild + <a> で描画され、中クリック/新規タブ・リンクコピーが効く。onClick と併用可（両方付与される）"
+      ]
+    },
     {
       "name": "ImageCarousel",
       "path": "src/components/primitives/image-carousel.tsx",
@@ -756,8 +854,23 @@
       "path": "src/components/primitives/menu-drawer.tsx"
     },
     {
-      "name": "SubNav",
-      "path": "src/components/primitives/sub-nav.tsx"
+      "name": "MultiSelect",
+      "path": "src/components/primitives/multi-select.tsx",
+      "formBinding": "controller",
+      "props": [
+        "options: MultiSelectOption[]",
+        "value?: string[]",
+        "onValueChange?: (value: string[]) => void",
+        "id?: string",
+        "aria-invalid?: boolean",
+        "aria-describedby?: string"
+      ],
+      "rules": [
+        "3件以上を複数選択させる、または候補が多い場合に使う。少数候補はCheckboxGroupを使う",
+        "選択済みは削除可能なChipで表示する",
+        "制御コンポーネント。value と onValueChange を必ず渡す（非制御では選択が反映されない）",
+        "FormField と繋ぐときは id を FieldLabel の htmlFor と揃え、エラーは aria-invalid / aria-describedby で FieldError に接続する"
+      ]
     },
     {
       "name": "NotificationBadge",
@@ -791,27 +904,45 @@
       "path": "src/components/primitives/progress-steps.tsx"
     },
     {
-      "name": "Timeline",
-      "path": "src/components/primitives/timeline.tsx",
-      "features": [
-        "vertical",
-        "custom-marker",
-        "connector"
-      ],
-      "rules": [
-        "本文付きの縦タイムラインに使う。現在位置を示す横型インジケータは ProgressSteps を使う",
-        "marker 省略時は連番。IconBadge 等の ReactNode を渡せる",
-        "コネクター線は Timeline が所有するため consumer が ::before / ::after で手組みしない"
-      ]
-    },
-    {
-      "name": "QuantitySelector",
-      "path": "src/components/primitives/quantity-selector.tsx",
+      "name": "NumberInput",
+      "path": "src/components/primitives/number-input.tsx",
       "formBinding": "controller",
+      "deprecatedAliases": [
+        "QuantitySelector"
+      ],
       "features": [
         "increment",
         "decrement",
-        "trash-icon"
+        "trash-icon",
+        "number-format"
+      ],
+      "sizes": [
+        "sm",
+        "md"
+      ],
+      "props": [
+        "value?: number",
+        "defaultValue?: number",
+        "onChange?: (value: number) => void",
+        "min?: number",
+        "max?: number",
+        "step?: number",
+        "size?: sm | md",
+        "editable?: boolean",
+        "error?: boolean",
+        "showTrash?: boolean",
+        "onDelete?: () => void",
+        "formatOptions?: Intl.NumberFormatOptions",
+        "locale?: string",
+        "inputId?: string"
+      ],
+      "rules": [
+        "DSの数値入力はすべてこれを使う。生の input type=\"number\" は使わない（カート数量・価格・在庫・ポイント等すべて）",
+        "意匠は Figma DS の Adjust 準拠。sm=コンパクト型（カート内）/ md=サークル型（商品詳細・管理画面）。この2つ以外の見た目を新規に作らない",
+        "カート数量では min=1 が標準（0 にしない — 削除は showTrash + onDelete で行う）",
+        "既定は min=1 / max=99 とカート数量向け。価格・在庫など汎用の数値入力では min / max / step を必ず明示する",
+        "桁区切り・通貨表示は formatOptions を渡す（編集中は素の数値になる）。JPY の全角￥は半角¥に正規化される",
+        "旧名 QuantitySelector は用途名だったため機能名に改名した。旧名は deprecated alias として残るが新規利用は不可"
       ]
     },
     {
@@ -827,18 +958,6 @@
         "flex"
       ]
     },
-    {
-      "name": "Container",
-      "path": "src/components/primitives/container.tsx",
-      "variants": [
-        "size: page | narrow | wide | fluid",
-        "gutter: default | tight | none"
-      ],
-      "rules": [
-        "ページ最大幅と左右paddingの唯一の担い手。これを使う親(Section等)は自身で左右paddingを持たない（二重がけ防止）",
-        "縦余白・背景色は持たない（Sectionの責務）"
-      ]
-    },
     {
       "name": "Section",
       "path": "src/components/primitives/section.tsx",
@@ -872,38 +991,6 @@
         "3xl（28px）は通常ページの主見出しにも使う。4xl/5xlはLP・マーケティング系ヒーロー専用で、size=\"3xl\" に desktopSize=\"4xl\" または desktopSize=\"5xl\" を加えてPC時だけ拡大する"
       ]
     },
-    {
-      "name": "ShareButtons",
-      "path": "src/components/primitives/share-buttons.tsx"
-    },
-    {
-      "name": "SocialLoginButton",
-      "path": "src/components/primitives/social-login-button.tsx"
-    },
-    {
-      "name": "StatusCountTabs",
-      "path": "src/components/primitives/status-count-tabs.tsx",
-      "rules": [
-        "ToggleGroup+Badge手書き禁止。Chip count propを使う",
-        "activeIndex は初期値だけでなく、マウント後の外部変更にも表示が追従する"
-      ]
-    },
-    {
-      "name": "Tag",
-      "path": "src/components/primitives/tag.tsx",
-      "rules": [
-        "表示専用。onClickを付けない（押せるものはChip）"
-      ]
-    },
-    {
-      "name": "SideNav",
-      "path": "src/components/primitives/side-nav.tsx",
-      "category": "navigation",
-      "rules": [
-        "ページ間遷移（別 URL へのナビゲーション）に使う。チェブロン付きで「別ページへ移動する」アフォーダンスを持つ",
-        "ページ内アンカー移動（href=\"#...\"）に流用しない → SectionNav を使う（見た目と挙動の不一致を防ぐ）"
-      ]
-    },
     {
       "name": "SectionNav",
       "path": "src/components/primitives/section-nav.tsx",
@@ -923,6 +1010,23 @@
         "IntersectionObserver は内包しない。activeKey は利用側が制御する（AnchorNav の新設は却下、本コンポーネントの variant で担う）"
       ]
     },
+    {
+      "name": "ShareButtons",
+      "path": "src/components/primitives/share-buttons.tsx"
+    },
+    {
+      "name": "SideNav",
+      "path": "src/components/primitives/side-nav.tsx",
+      "category": "navigation",
+      "rules": [
+        "ページ間遷移（別 URL へのナビゲーション）に使う。チェブロン付きで「別ページへ移動する」アフォーダンスを持つ",
+        "ページ内アンカー移動（href=\"#...\"）に流用しない → SectionNav を使う（見た目と挙動の不一致を防ぐ）"
+      ]
+    },
+    {
+      "name": "SocialLoginButton",
+      "path": "src/components/primitives/social-login-button.tsx"
+    },
     {
       "name": "StandardPageShell",
       "path": "src/components/primitives/standard-page-shell.tsx",
@@ -941,6 +1045,46 @@
         "a11y: DOM 先頭に SkipLink を標準内蔵し <main id> を制御できる（mainId 既定 main-content、SkipLink の飛び先と一致）。sr-only で視覚無影響。skipLink={false} で無効化。ページ側で手組みしない"
       ]
     },
+    {
+      "name": "StatusCountTabs",
+      "path": "src/components/primitives/status-count-tabs.tsx",
+      "rules": [
+        "ToggleGroup+Badge手書き禁止。Chip count propを使う",
+        "activeIndex は初期値だけでなく、マウント後の外部変更にも表示が追従する"
+      ]
+    },
+    {
+      "name": "StickyActionBar",
+      "path": "src/components/primitives/sticky-action-bar.tsx",
+      "rules": [
+        "モバイル固定フッターCTA"
+      ]
+    },
+    {
+      "name": "SubNav",
+      "path": "src/components/primitives/sub-nav.tsx"
+    },
+    {
+      "name": "Tag",
+      "path": "src/components/primitives/tag.tsx",
+      "rules": [
+        "表示専用。onClickを付けない（押せるものはChip）"
+      ]
+    },
+    {
+      "name": "Timeline",
+      "path": "src/components/primitives/timeline.tsx",
+      "features": [
+        "vertical",
+        "custom-marker",
+        "connector"
+      ],
+      "rules": [
+        "本文付きの縦タイムラインに使う。現在位置を示す横型インジケータは ProgressSteps を使う",
+        "marker 省略時は連番。IconBadge 等の ReactNode を渡せる",
+        "コネクター線は Timeline が所有するため consumer が ::before / ::after で手組みしない"
+      ]
+    },
     {
       "name": "WorkspaceShell",
       "path": "src/components/primitives/workspace-shell.tsx",
@@ -962,59 +1106,6 @@
         "地がSurface-Secondaryなので、シェルが配下Cardのサーフェス文脈（--card-surface: Surface-Primary）を宣言する → Cardはsurface未指定のまま白で地から浮く（#150）。darkは据え置き",
         "a11y: DOM 先頭に SkipLink を標準内蔵し <main id> を制御できる（mainId 既定 main-content）。sr-only で視覚無影響。skipLink={false} で無効化"
       ]
-    },
-    {
-      "name": "FunnelShell",
-      "path": "src/components/primitives/funnel-shell.tsx",
-      "kind": "shell",
-      "variants": [],
-      "rules": [
-        "EC 購入導線等のファネル用集中モード（Full Page）のシェル。集中ヘッダー＋進捗インジケータ（steps/activeStep）＋ステップ本体＋任意の bottomAction で構成。min-h-dvh flex flex-col の全高コンテナ",
-        "ヘッダーの基本形は中央ロゴ（logo prop → Header variant=logo-center）。ライブ本番の購入導線（cart_layout.ctp の cartHeader）準拠で離脱導線をロゴのみに絞る。狙いは戻り・離脱をしづらくして途中離脱を抑制すること（＝Header の logo-center は決済・申込ページ用の既定バリアント、本番 cartHeader もロゴクリックが /cart/・thanks に限定）。title+back（Header variant=back）は多段申込等でタイトル・戻るが要る場合の代替形。logo と title はどちらか一方を渡す（logo 優先）",
-        "あくまで枠。ステップ定義（名前・数）・文言・商品データを焼き込まない。steps / activeStep は利用側（ドメイン）が渡す",
-        "グローバルナビ・BottomTabBar・パンくずを持たない（構造的に置けない）。離脱を誘う導線を出さず購入に集中させる",
-        "bottomAction（StickyActionBar 等）を渡すと本文の下余白はシェルが管理する。ページ側で pb を書かない（付け忘れ／二重がけの構造的防止）",
-        "左右 padding は持たない（Container の責務）。管理画面の複雑な集中編集は WorkspaceShell を使う（EC 購入導線＝FunnelShell）",
-        "地がSurface-Secondaryなので、シェルが配下Cardのサーフェス文脈（--card-surface: Surface-Primary）を宣言する → Cardはsurface未指定のまま白で地から浮く（#150）。darkは据え置き",
-        "a11y: DOM 先頭に SkipLink を標準内蔵し <main id> を制御できる（mainId 既定 main-content）。sr-only で視覚無影響。skipLink={false} で無効化"
-      ]
-    },
-    {
-      "name": "Header",
-      "path": "src/components/primitives/header.tsx",
-      "variants": [
-        "logo",
-        "logo-center",
-        "back",
-        "back-search"
-      ],
-      "rules": [
-        "variant=\"logo\" の PC 行（@[768px]+）では searchSlot で navItems と actions の間に常設検索を inline 配置できる（flex-1 max-w-[400px] で伸縮）。navItems 無し＋searchSlot だけでも PC 行を描画する",
-        "SP 行に searchSlot は出さない。SP の常設検索は従来どおり bottomSlot で運用する",
-        "bottomSlot はヘッダー下段の全幅スロット（ProductDetailBar 等）。PC 常設検索の置き場に使わない（PC 二段ヘッダーになる）",
-        "actions（HeaderAction）はカート・マイページ等の本来リンクである導線には href を指定する。href 指定時は Button asChild + <a> で描画され、中クリック/新規タブ・リンクコピーが効く。onClick と併用可（両方付与される）"
-      ]
-    },
-    {
-      "name": "AdminSideNav",
-      "path": "src/components/primitives/admin-side-nav.tsx",
-      "category": "navigation",
-      "rules": [
-        "管理画面向けサイドナビの汎用枠。PC は左端固定アイコンレール（ホバーでサブメニュー）、SP は制御ドロワー（サブメニューはアコーディオン）",
-        "項目データ（メニュー定義・文言）は全て items prop で受ける。特定事業のメニューを部品側に焼き込まない（Cake.jp 既定は AdminShell が持つ）",
-        "PC レールのラベルは max-w-12 + typo-label-xs + 中央揃えを本体が所有する。5文字超も語のまとまりで折り返せるため、consumer が data-slot セレクタで内部上書きしない",
-        "SP ドロワー開閉は open / onOpenChange で制御する（内部 state を持たない）",
-        "icon は ReactNode か描画コンテキスト（active / placement）で出し分ける関数を渡す"
-      ]
-    },
-    {
-      "name": "AdminHeader",
-      "path": "src/components/primitives/admin-header.tsx",
-      "rules": [
-        "管理画面向けの上端固定ヘッダーの汎用枠。左に SP ハンバーガー＋brand、右に actions slot",
-        "文言合成（『{shopName}管理』等）はしない。brand / actions を利用側が組み立てて渡す",
-        "onMenuClick 省略時はハンバーガー非表示"
-      ]
     }
   ],
   "ec": [
@@ -1041,28 +1132,6 @@
         "地がSurface-Secondaryなので、シェルが配下Cardのサーフェス文脈（--card-surface: Surface-Primary）を宣言する → Cardはsurface未指定のまま白で地から浮く（#150）。darkは据え置き"
       ]
     },
-    {
-      "name": "MypageShell",
-      "path": "src/components/ec/mypage-shell.tsx",
-      "kind": "shell",
-      "variants": [],
-      "features": [
-        "sp-header-back",
-        "pc-logo-header",
-        "pc-breadcrumb",
-        "pc-2column-sidenav",
-        "sp-bottom-tab-bar"
-      ],
-      "rules": [
-        "マイページ配下の固有ページ（注文履歴 / ポイント / クーポン / 会員情報 / お届け先 / ブックマーク / 口コミ / 記念日 等）はこの shell で組む",
-        "本番の mypage_layout.ctp + menu.ctp 準拠。SP は Header(variant=back)+h1+コンテンツ+BottomTabBar、PC は Header(variant=logo)+Breadcrumb+2カラム（SideNav 256px + main）",
-        "サイドナビは既定で ec/_mypage-menu-data の mypageMenuGroups を使用。activeMenu で現在ページを強調する",
-        "既定値は props で差し替え可能（menuGroups / breadcrumbs / bottomNavItems / headerActions）で、骨格（ヘッダー＋2カラム＋BottomTabBar）自体は他事業（ジョブボードのマイページ等）でも再利用できる",
-        "breadcrumbs 省略時は「ホーム > {ユーザー}さまのマイページ > {title}」を自動生成する",
-        "マイページトップ（Dashboard）はメインカラムを白背景で持たずセクションごとにカード化する別パターンなので、この shell を使わない",
-        "a11y: DOM 先頭に SkipLink を標準内蔵し <main id> を制御できる（mainId 既定 main-content）。sr-only で視覚無影響。skipLink={false} で無効化"
-      ]
-    },
     {
       "name": "AnniversaryCard",
       "path": "src/components/ec/anniversary-card.tsx"
@@ -1096,6 +1165,28 @@
       "name": "DeliveryCalendar",
       "path": "src/components/ec/delivery-calendar.tsx"
     },
+    {
+      "name": "MypageShell",
+      "path": "src/components/ec/mypage-shell.tsx",
+      "kind": "shell",
+      "variants": [],
+      "features": [
+        "sp-header-back",
+        "pc-logo-header",
+        "pc-breadcrumb",
+        "pc-2column-sidenav",
+        "sp-bottom-tab-bar"
+      ],
+      "rules": [
+        "マイページ配下の固有ページ（注文履歴 / ポイント / クーポン / 会員情報 / お届け先 / ブックマーク / 口コミ / 記念日 等）はこの shell で組む",
+        "本番の mypage_layout.ctp + menu.ctp 準拠。SP は Header(variant=back)+h1+コンテンツ+BottomTabBar、PC は Header(variant=logo)+Breadcrumb+2カラム（SideNav 256px + main）",
+        "サイドナビは既定で ec/_mypage-menu-data の mypageMenuGroups を使用。activeMenu で現在ページを強調する",
+        "既定値は props で差し替え可能（menuGroups / breadcrumbs / bottomNavItems / headerActions）で、骨格（ヘッダー＋2カラム＋BottomTabBar）自体は他事業（ジョブボードのマイページ等）でも再利用できる",
+        "breadcrumbs 省略時は「ホーム > {ユーザー}さまのマイページ > {title}」を自動生成する",
+        "マイページトップ（Dashboard）はメインカラムを白背景で持たずセクションごとにカード化する別パターンなので、この shell を使わない",
+        "a11y: DOM 先頭に SkipLink を標準内蔵し <main id> を制御できる（mainId 既定 main-content）。sr-only で視覚無影響。skipLink={false} で無効化"
+      ]
+    },
     {
       "name": "OrderSection",
       "path": "src/components/ec/order-section.tsx",
@@ -1157,6 +1248,16 @@
       "name": "ProductDetailSidebar",
       "path": "src/components/ec/product-detail-sidebar.tsx"
     },
+    {
+      "name": "ProductListItem",
+      "path": "src/components/ec/product-list-item.tsx",
+      "category": "display",
+      "rules": [
+        "カート/注文履歴/レビュー variant を持つ商品リスト行",
+        "captionは規格・仕様の短い自由記述（例: \"1kg / 冷蔵\"）。価格表示の直下にtypo-body-xs / Text-Medium-Emphasisで表示。tags（配送方法等のenum variant）とは別物",
+        "subtotal/subtotalLabel（既定\"小計\"）はcart variant専用。数量セレクタ行の右側（収まらなければ下に折り返し）に¥{カンマ区切り}で表示。BtoB/法人ECのロット購入等、商品ごとの単価×数量の内訳を明示したい場合に使う"
+      ]
+    },
     {
       "name": "ProductOption",
       "path": "src/components/ec/product-option.tsx",
@@ -1234,16 +1335,6 @@
     {
       "name": "StatCard",
       "path": "src/components/ec/stat-card.tsx"
-    },
-    {
-      "name": "ProductListItem",
-      "path": "src/components/ec/product-list-item.tsx",
-      "category": "display",
-      "rules": [
-        "カート/注文履歴/レビュー variant を持つ商品リスト行",
-        "captionは規格・仕様の短い自由記述（例: \"1kg / 冷蔵\"）。価格表示の直下にtypo-body-xs / Text-Medium-Emphasisで表示。tags（配送方法等のenum variant）とは別物",
-        "subtotal/subtotalLabel（既定\"小計\"）はcart variant専用。数量セレクタ行の右側（収まらなければ下に折り返し）に¥{カンマ区切り}で表示。BtoB/法人ECのロット購入等、商品ごとの単価×数量の内訳を明示したい場合に使う"
-      ]
     }
   ]
 }