@cakejp/design-system 0.9.0 → 0.11.0

package/contracts/components.json

@@ -3,7 +3,7 @@
     "name": "Cake.jp Design System — Component Contracts",
     "version": "0.1.0",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
-    "kind": "kind:\"shell\" は複数ページで再利用されるレイアウト枠（AdminLayout / WorkspaceLayout / MypageShell 等）。無印は部品コンポーネント。固有ページを組むときは該当 shell から始める。src/components/pages/ 配下のストーリーは特定ページ専用・非配布のため contracts の対象外。",
+    "kind": "kind:\"shell\" は複数ページで再利用されるレイアウト枠（AdminShell / WorkspaceShell / MypageShell 等）。無印は部品コンポーネント。固有ページを組むときは該当 shell から始める。src/components/pages/ 配下のストーリーは特定ページ専用・非配布のため contracts の対象外。",
     "counts": {
       "foundations": 47,
       "primitives": 42,
@@ -149,7 +149,8 @@
       "name": "DataTable",
       "path": "src/components/foundations/data-table.tsx",
       "rules": [
-        "管理画面のテーブルはui/tableでなくこちらを使う。ソート・選択行・アクションメニュー対応"
+        "管理画面のテーブルはui/tableでなくこちらを使う。ソート・選択行・アクションメニュー対応",
+        "ActionCellのメニュー操作は行のonClickへ伝播しない（本体でstopPropagation済み）。行クリック選択との併用時も利用側ガードは不要"
       ]
     },
     {
@@ -621,33 +622,34 @@
         "ページ内セクション移動（アンカー／目次）専用。href=\"#section-id\" のページ内スクロールに使う",
         "ページ間遷移に使わない → SideNav を使う",
         "チェブロン・矢印を足さない（遷移アフォーダンスを持たせない。同一画面内の位置移動に見せる）",
-        "WorkspaceLayout の sectionNav にはこれを使う（SideNav を流用しない）",
+        "WorkspaceShell の sectionNav にはこれを使う（SideNav を流用しない）",
         "固有幅・背景・境界を持たない（w-full）。パネル化・幅決定はシェル／利用側の責務"
       ]
     },
     {
-      "name": "EcPageShell",
-      "path": "src/components/primitives/ec-page-shell.tsx",
+      "name": "StandardPageShell",
+      "path": "src/components/primitives/standard-page-shell.tsx",
       "kind": "shell",
       "variants": [],
       "rules": [
-        "EC 標準ページ（Standard Page（View / Edit））の骨格。composition.json pageSkeletons（mobile / desktop）の実装体。min-h-dvh flex flex-col の全高コンテナに header / main / bottomTab / footer を積む",
-        "あくまで枠。Cake.jp のロゴ・タブ項目・ナビ項目・文言を焼き込まない。header / bottomTab は利用側（ec 層）が組み立てて渡す",
+        "消費者向け標準ページ（Standard Page（View / Edit））の骨格。composition.json pageSkeletons（mobile / desktop）の実装体。min-h-dvh flex flex-col の全高コンテナに header / main / bottomTab / footer を積む",
+        "名前はプロダクト・ドメインに依存しない。EC ページも求人検索のような消費者向けページも同じシェルで組む（旧名 EcPageShell は deprecated alias）",
+        "あくまで枠。プロダクトのロゴ・タブ項目・ナビ項目・文言を焼き込まない。header / bottomTab は利用側（ec 層）が組み立てて渡す",
         "bottomTab を渡すと main の下余白（pb-20 相当）はシェルが管理する。ページ側で pb-20 を書かない（付け忘れ／二重がけの構造的防止）",
         "左右 padding は持たない（Container の責務）。中身は Section（全幅背景帯）＋ Container（中央寄せ・左右余白）で組む",
-        "管理画面は AdminLayout、複数情報をまたぐ集中編集は WorkspaceLayout、マイページ配下は MypageShell を使う"
+        "管理画面は AdminShell、複数情報をまたぐ集中編集は WorkspaceShell、マイページ配下は MypageShell を使う"
       ]
     },
     {
-      "name": "WorkspaceLayout",
-      "path": "src/components/primitives/workspace-layout.tsx",
+      "name": "WorkspaceShell",
+      "path": "src/components/primitives/workspace-shell.tsx",
       "kind": "shell",
       "variants": [],
       "rules": [
         "Focused Workspace（全画面集中編集）のシェル。編集ヘッダー（Header variant=back）+ 任意のセクションナビ + 編集本体で構成",
         "グローバルナビ・パンくずを持たない（構造的に置けない）。集中を妨げる導線は出さない",
         "primaryActionはワークスペース全体の上位アクション（公開申請・承認依頼等）がある場合のみ。セクション／行単位の操作はコンテンツ内に置く",
-        "標準の編集はAdminLayoutのStandard Page（Edit）（旧Form Page）。複雑・複数情報をまたぐ集中編集・没入執筆のみWorkspaceLayoutを使う",
+        "標準の編集はAdminShellのStandard Page（Edit）（旧Form Page）。複雑・複数情報をまたぐ集中編集・没入執筆のみWorkspaceShellを使う",
         "sectionNavは編集内ナビ（アンカー／ステップ）のみ。PCでサイド表示・SPで非表示"
       ]
     },
@@ -657,11 +659,12 @@
       "kind": "shell",
       "variants": [],
       "rules": [
-        "EC 購入導線等のファネル用集中モード（Full Page）のシェル。集中ヘッダー（Header variant=back）＋進捗インジケータ（steps/activeStep）＋ステップ本体＋任意の bottomAction で構成。min-h-dvh flex flex-col の全高コンテナ",
+        "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 の責務）。管理画面の複雑な集中編集は WorkspaceLayout を使う（EC 購入導線＝FunnelShell）"
+        "左右 padding は持たない（Container の責務）。管理画面の複雑な集中編集は WorkspaceShell を使う（EC 購入導線＝FunnelShell）"
       ]
     },
     {
@@ -674,7 +677,7 @@
       "category": "navigation",
       "rules": [
         "管理画面向けサイドナビの汎用枠。PC は左端固定アイコンレール（ホバーでサブメニュー）、SP は制御ドロワー（サブメニューはアコーディオン）",
-        "項目データ（メニュー定義・文言）は全て items prop で受ける。特定事業のメニューを部品側に焼き込まない（Cake.jp 既定は AdminLayout が持つ）",
+        "項目データ（メニュー定義・文言）は全て items prop で受ける。特定事業のメニューを部品側に焼き込まない（Cake.jp 既定は AdminShell が持つ）",
         "SP ドロワー開閉は open / onOpenChange で制御する（内部 state を持たない）",
         "icon は ReactNode か描画コンテキスト（active / placement）で出し分ける関数を渡す"
       ]
@@ -691,13 +694,16 @@
   ],
   "ec": [
     {
-      "name": "AdminLayout",
-      "path": "src/components/ec/admin-layout.tsx",
+      "name": "AdminShell",
+      "path": "src/components/ec/admin-shell.tsx",
       "kind": "shell",
       "rules": [
         "管理画面のレイアウトシェル。枠は primitives の AdminSideNav / AdminHeader を組み込む",
-        "Cake.jp 管理メニュー8項目＋サブメニュー・通知ベル・プロフィール・『{shopName}管理』を既定値として内蔵する（ドメイン特化層）",
-        "navItems で既定メニューを差し替え可、headerActions でヘッダー右アクションを差し替え可"
+        "Cake.jp 管理メニュー8項目＋サブメニュー・通知ベル・プロフィール・『{shopName}管理』を既定値として同梱する（ec 層）",
+        "navItems で既定メニューを差し替え可、headerActions でヘッダー右アクションを差し替え可",
+        "戻る導線（onBack）はパンくずの上に置く。onBack を渡すとシェルが main 内・パンくずより上に戻るボタンを描画する（backLabel で文言変更・既定『戻る』）。子コンテンツ内に戻るリンクを手書きしない",
+        "タイトル直下の上位アクション（AI商品作成・PDF出力等）は h1 と同じ左端に左寄せする。右端フロートにしない",
+        "既定値は props で差し替え可能で、骨格（Header + SideNav + Main）自体は他事業（ジョブボードの管理画面等）でも再利用できる"
       ]
     },
     {
@@ -715,7 +721,8 @@
       "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 で現在ページを強調する",
+        "サイドナビは既定で ec/_mypage-menu-data の mypageMenuGroups を使用。activeMenu で現在ページを強調する",
+        "既定値は props で差し替え可能（menuGroups / breadcrumbs / bottomNavItems / headerActions）で、骨格（ヘッダー＋2カラム＋BottomTabBar）自体は他事業（ジョブボードのマイページ等）でも再利用できる",
         "breadcrumbs 省略時は「ホーム > {ユーザー}さまのマイページ > {title}」を自動生成する",
         "マイページトップ（Dashboard）はメインカラムを白背景で持たずセクションごとにカード化する別パターンなので、この shell を使わない"
       ]

package/contracts/composition.json

@@ -12,7 +12,7 @@
     "mobile": {
       "requiredComponents": ["Header", "BottomTabBar"],
       "optionalComponents": ["StickyActionBar", "CategoryScroll", "CategoryShortcuts"],
-      "implementation": "EcPageShell（primitives, kind:\"shell\"）がこの骨格の実装体。header に Header・bottomTab に BottomTabBar を渡す。bottomTab を渡すと main の下余白（pb-20 相当）をシェルが管理するので、ページ側で pb-20 を書かない。手組みの独自シェルを作らない。",
+      "implementation": "StandardPageShell（primitives, kind:\"shell\"）がこの骨格の実装体。header に Header・bottomTab に BottomTabBar を渡す。bottomTab を渡すと main の下余白（pb-20 相当）をシェルが管理するので、ページ側で pb-20 を書かない。手組みの独自シェルを作らない。",
       "structure": [
         "ルート: div.flex.min-h-dvh.flex-col（縦フレックスの全高コンテナ。背景は bg-[var(--Surface-Primary)] を明示）",
         "上部固定: Header（title / onBack。旧称 TopAppBar）",
@@ -30,7 +30,7 @@
     "desktop": {
       "requiredComponents": ["Container"],
       "optionalComponents": ["Section", "SectionHeader"],
-      "implementation": "EcPageShell（primitives, kind:\"shell\"）が mobile と共通の実装体。PC では bottomTab（BottomTabBar）が消え下余白も外れる。左右 padding は Container・全幅背景帯は Section が持ち、シェルは持たない。手組みの独自シェルを作らない。",
+      "implementation": "StandardPageShell（primitives, kind:\"shell\"）が mobile と共通の実装体。PC では bottomTab（BottomTabBar）が消え下余白も外れる。左右 padding は Container・全幅背景帯は Section が持ち、シェルは持たない。手組みの独自シェルを作らない。",
       "structure": [
         "ルート: div.flex.min-h-screen（横フレックス。サイドバー＋本文）",
         "ナビ: aside（サイドバーまたは上部ナビ。border-r border-[var(--Border-Medium-Emphasis)] で仕切る）",
@@ -44,15 +44,15 @@
       ]
     },
     "admin": {
-      "requiredComponents": ["AdminLayout", "AdminSideNav", "AdminHeader"],
+      "requiredComponents": ["AdminShell", "AdminSideNav", "AdminHeader"],
       "optionalComponents": ["SectionHeader", "DataTable", "Section", "Container"],
       "structure": [
-        "ルート: AdminLayout（管理画面の専用シェル。サイドナビ AdminSideNav・ヘッダー AdminHeader を内包）",
-        "サイドナビ・ヘッダーは AdminLayout 経由で組み込まれる（AdminSideNav / AdminHeader を直接手組みしない）",
-        "本文: AdminLayout の children に space-y-6 のコンテナを置き、ページタイトル（typo-heading-2xl）＋管理コンテンツを並べる"
+        "ルート: AdminShell（管理画面の専用シェル。サイドナビ AdminSideNav・ヘッダー AdminHeader を内包）",
+        "サイドナビ・ヘッダーは AdminShell 経由で組み込まれる（AdminSideNav / AdminHeader を直接手組みしない）",
+        "本文: AdminShell の children に space-y-6 のコンテナを置き、ページタイトル（typo-heading-2xl）＋管理コンテンツを並べる"
       ],
       "rules": [
-        "管理画面のシェルは AdminLayout を使い、手組みしない",
+        "管理画面のシェルは AdminShell を使い、手組みしない",
         "管理画面の表は DataTable を使う（生の table 禁止）",
         "ページ直下のセクション間は space-y-6 相当（管理画面の縦リズム）"
       ]
@@ -73,18 +73,37 @@
         "グローバルナビ・BottomTabBar・パンくずを置かない（離脱を誘う導線を出さず購入に集中させる）",
         "進捗を表示する（steps / activeStep でユーザーの現在地を示す）",
         "下部 CTA（StickyActionBar）は bottomAction に渡す。本文の下余白はシェルが管理するのでページ側で pb を書かない",
-        "管理画面の複雑な集中編集は WorkspaceLayout を使う（EC 購入導線＝FunnelShell）"
+        "管理画面の複雑な集中編集は WorkspaceShell を使う（EC 購入導線＝FunnelShell）"
       ]
     }
   },
+  "breakpoints": {
+    "description": "役割は二層。切替段=md / lg の2段だけで、ページのレイアウト変形はこの2段で考える（独自のブレイクポイント値を発明しない）。上限段=xl（1280）は「切替段」ではなく DS が定めるコンテンツ幅の上限段（ページコンテナの標準上限）で、1280px 以上では原則レイアウト変形を追加しない。",
+    "sourceOfTruth": "値の正本は tokens.json の breakpoints。実装参照は preset.css の @theme（コンテナクエリ変数 --container-md / --container-lg / --container-xl）。",
+    "scale": [
+      { "token": "md", "px": 768, "container": "--container-md", "role": "切替段", "meaning": "SP/PC 境界。767px 以下=SP / 768px 以上=PC。本番 cakejp.css の max-width:767px / min-width:768px と一致" },
+      { "token": "lg", "px": 960, "container": "--container-lg", "role": "切替段", "meaning": "PC 中段。本番 cakejp.css の min-width:960px 段と一致" },
+      { "token": "xl", "px": 1280, "container": "--container-xl", "role": "上限段", "meaning": "コンテンツ上限段（切替段ではない）。ページコンテナの標準上限で、1280px 以上では原則レイアウト変形を追加しない。本番 cakejp.css に 1280 の切替段は無い——DS が定める標準上限。実例: MypageShell の PC グリッド max-w-[1280px]" }
+    ],
+    "rules": [
+      "DS 内部はコンテナクエリ @md: / @lg: を SP-first（モバイル既定→上書き）で使う（例: flex-col @md:flex-row）",
+      "生 CSS の消費者は 767 / 768 / 960 の px 値をメディアクエリに直書きする（CSS 変数はメディアクエリに使えないため）",
+      "任意値（@[520px] 等）はコンポーネント都合の例外。ページ設計では md / lg を使う",
+      "xl=1280 は切替段ではなく上限段。レイアウトの変形（カラム追加・並べ替え等）は md / lg の2段でのみ行い、xl はページコンテナの最大幅（max-w-[1280px] 等）として使う。1280px 以上で新たな変形を追加しない",
+      "コンテンツの @md: / @lg: はビューポートではなくシェルが main に提供する実効幅コンテナ（@container）基準で解決される。サイドバー等を差し引いた実際の描画幅で応答する（例: MypageShell の main は上限1280−サイド256−gap で最大約950px＝@lg には到達しない。PC で3列にしたいグリッドは @md: を使う）",
+      "シェル自身の変形（レール表示・BottomTabBar 出没・2カラム化・グリッド split）はシェルのルートコンテナ＝ビューポート基準のままにする。シェルごとの変形段の割当は guidelines/composition/shells.md の割当表が正本（StandardPageShell: header nav・BottomTabBar=md / AdminShell: レール=md / MypageShell: 2カラム=md / WorkspaceShell: 2カラム=lg / FunnelShell: サマリ横並び=md〔本番準拠〕）"
+    ]
+  },
   "productGrid": {
-    "description": "商品グリッドのブレークポイント別列数と gap。ProductCard を並べる際の標準。",
+    "description": "ProductCard を並べる標準グリッド。ビューポートではなくシェルが提供する実効幅コンテナで変形する。md / lg の値は tokens.json の breakpoints が正本。520px は ProductCard の最小幅を守るためのコンポーネント固有の例外であり、ページ全体のブレイクポイントではない。",
     "breakpoints": [
-      { "viewport": "mobile", "width": "< 640px", "columns": 2, "gap": "gap-3", "tailwind": "grid-cols-2 gap-3" },
-      { "viewport": "tablet", "width": "640–1024px", "columns": 3, "gap": "gap-4", "tailwind": "sm:grid-cols-3 sm:gap-4" },
-      { "viewport": "desktop", "width": "> 1024px", "columns": 4, "gap": "gap-4", "tailwind": "lg:grid-cols-4" }
+      { "containerWidth": "< 520px", "columns": 2, "gap": "gap-4", "tailwind": "grid-cols-2 gap-4" },
+      { "containerWidth": "520–767px", "columns": 3, "gap": "gap-4", "tailwind": "@[520px]:grid-cols-3" },
+      { "containerWidth": "768–959px", "columns": 4, "gap": "gap-4", "tailwind": "@md:grid-cols-4", "token": "breakpoints.md" },
+      { "containerWidth": "960px+", "columns": 5, "gap": "gap-4", "tailwind": "@lg:grid-cols-5", "token": "breakpoints.lg" }
     ],
-    "example": "grid grid-cols-2 gap-3 sm:grid-cols-3 sm:gap-4 lg:grid-cols-4",
+    "container": "w-full @container",
+    "example": "grid grid-cols-2 gap-4 @[520px]:grid-cols-3 @md:grid-cols-4 @lg:grid-cols-5",
     "component": "ProductCard"
   },
   "spacingRhythm": {

package/contracts/rules.json

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

package/contracts/screen-patterns.json

@@ -5,7 +5,7 @@
     "description": "CRUD 機能でどの画面パターンを使うかの機械可読な判断基準。5パターンの定義・CRUD 対応・決定木・編集UIの観点比較を構造化する。人間向けの解説は guidelines/foundations/screen-patterns.md。",
     "source": "GitHub issue #37 CRUDの画面設計の型化と基本パターンの整備",
     "relatedContract": "本契約はページ種別の選択（何を使うか）を担う。選んだ後の骨格の組み方（外枠構造・余白リズム・視覚階層）は contracts/composition.json を参照する。",
-    "shellComponents": "各パターンの dsComponents に挙がるレイアウトシェル（AdminLayout / WorkspaceLayout / MypageShell 等）の実装一覧は contracts/components.json の kind:\"shell\" を参照する。",
+    "shellComponents": "各パターンの dsComponents に挙がるレイアウトシェル（AdminShell / WorkspaceShell / MypageShell 等）の実装一覧は contracts/components.json の kind:\"shell\" を参照する。",
     "disclaimer": "本契約は正解を1つに固定するものではない。最適なパターンは案件ごとに変わり、集中させたい度合いのグラデーション・IA設計・API制約（1回保存か段階保存か・楽観ロック・URL直リンク要件等）に依存する。decisionTree は候補を1つに絞るための共通言語であり、絞った後にIA/API制約で調整してよい（理由を残すこと）。",
     "model": {
       "description": "画面パターンは2軸で整理する。第1軸=シェル（通常シェル Standard を保つか / 集中モード Focused か / オーバーレイか）、第2軸=態様（見る / 変更して保存・確定する）。",
@@ -23,8 +23,8 @@
       "group": "standard-page",
       "aliases": ["通常ページ", "Standard Page"],
       "purpose": "閲覧・一覧・詳細の表示（Read）。見る・探す・一覧するのが主目的。グロナビ/サイドナビを保つ通常シェル。",
-      "dsComponents": ["AdminLayout", "EcPageShell", "DataTable", "Section", "Container", "SectionHeader"],
-      "dsComponentsNote": "シェルは文脈で選ぶ: 管理画面＝AdminLayout（サイドナビ＋ヘッダー内包）/ EC 消費者側＝EcPageShell（Header＋BottomTabBar を SP 下部固定で受ける最頻出の骨格）/ マイページ配下＝MypageShell。中身は Section（全幅背景帯）＋ Container（中央寄せ・左右余白）で組む。",
+      "dsComponents": ["AdminShell", "StandardPageShell", "DataTable", "Section", "Container", "SectionHeader"],
+      "dsComponentsNote": "シェルは文脈で選ぶ: 管理画面＝AdminShell（サイドナビ＋ヘッダー内包）/ 消費者向け（EC・求人検索など）＝StandardPageShell（Header＋BottomTabBar を SP 下部固定で受ける最頻出の骨格。旧名 EcPageShell）/ マイページ配下＝MypageShell。中身は Section（全幅背景帯）＋ Container（中央寄せ・左右余白）で組む。",
       "navigation": {
         "globalNav": "あり",
         "breadcrumb": "あり",
@@ -46,8 +46,8 @@
       "group": "standard-page",
       "aliases": ["通常ページ＋保存", "Form Page", "form-page"],
       "purpose": "通常シェル（グロナビ/サイドナビ）を保ったまま内容を変更し保存/確定する画面全般。フォームに限らない（管理フォーム編集・カートの数量変更＋購入手続きへ・記事の軽い編集）。既存管理画面ではこれがスタンダード。",
-      "dsComponents": ["AdminLayout", "EcPageShell", "Form", "Section", "Container", "SectionHeader"],
-      "dsComponentsNote": "シェルは文脈で選ぶ: 管理画面のフォーム編集＝AdminLayout / EC 消費者側の編集（カートの数量変更＋確定 等）＝EcPageShell（下部 CTA 主体なら bottomTab の代わりに StickyActionBar を渡す）/ マイページ配下＝MypageShell。",
+      "dsComponents": ["AdminShell", "StandardPageShell", "Form", "Section", "Container", "SectionHeader"],
+      "dsComponentsNote": "シェルは文脈で選ぶ: 管理画面のフォーム編集＝AdminShell / 消費者向けの編集（カートの数量変更＋確定 等）＝StandardPageShell（下部 CTA 主体なら bottomTab の代わりに StickyActionBar を渡す）/ マイページ配下＝MypageShell。",
       "navigation": {
         "globalNav": "あり",
         "breadcrumb": "あり",
@@ -76,8 +76,8 @@
       "name": "Focused Workspace",
       "aliases": ["Full Page", "編集ワークスペース", "集中モード"],
       "purpose": "複数情報をまたぐ複雑な編集に集中する。グロナビを外し編集に専念させる。",
-      "dsComponents": ["WorkspaceLayout", "FunnelShell", "SectionNav", "ResponsiveDialog"],
-      "dsComponentsNote": "実装は用途で 2 つのシェルを使い分ける。管理の複雑編集（複数情報を横断・編集に集中）＝WorkspaceLayout（グロナビ非表示・編集ヘッダーを内包）。EC 購入導線（カート→お届け先→支払い→確認 の一直線ファネル）＝FunnelShell（グロナビ・BottomTabBar・パンくずなし・進捗インジケータ＋下部 CTA を内包）。どちらも手組みの独自レイアウトを作らない。編集内のセクションナビには SectionNav（ページ内アンカー移動専用。SideNav を流用しない）を渡す。編集内の作成・編集ダイアログには ResponsiveDialog / AlertDialog を併用する。",
+      "dsComponents": ["WorkspaceShell", "FunnelShell", "SectionNav", "ResponsiveDialog"],
+      "dsComponentsNote": "実装は用途で 2 つのシェルを使い分ける。管理の複雑編集（複数情報を横断・編集に集中）＝WorkspaceShell（グロナビ非表示・編集ヘッダーを内包）。EC 購入導線（カート→お届け先→支払い→確認 の一直線ファネル）＝FunnelShell（グロナビ・BottomTabBar・パンくずなし・進捗インジケータ＋下部 CTA を内包）。どちらも手組みの独自レイアウトを作らない。編集内のセクションナビには SectionNav（ページ内アンカー移動専用。SideNav を流用しない）を渡す。編集内の作成・編集ダイアログには ResponsiveDialog / AlertDialog を併用する。",
       "navigation": {
         "globalNav": "なし（編集内のセクションナビ＝アンカー／ステップは可）",
         "breadcrumb": "原則なし（戻る導線で代替）",