@cakejp/design-system 0.7.0 → 0.10.0

package/contracts/composition.json

@@ -0,0 +1,154 @@
+{
+  "meta": {
+    "name": "Cake.jp Design System — Composition Contracts",
+    "version": "0.1.0",
+    "description": "ページ骨格・視覚階層・余白リズムの機械可読な正本。画面パターンを選んだ後の「実際の組み方」を規定する。ページの外枠（モバイル/デスクトップ/管理）、商品グリッドの列数、余白の4段リズム、Surface のネスト階層、テキスト階層、CTA の優先順位を構造化する。人間向けの解説は guidelines/composition/layout.md・guidelines/composition/hierarchy.md・guidelines/overview.md。",
+    "source": "guidelines/composition/layout.md, guidelines/composition/hierarchy.md, guidelines/overview.md, guidelines/components/button.md（CTA 密度ルール）を正本化",
+    "roleSeparation": "screen-patterns.json はページ種別（Standard Page / Focused Workspace / ResponsiveDialog / Dialog）を選ぶための契約。composition.json は選んだ後、その骨格をどう組むか（外枠構造・余白リズム・階層）の契約。前者=何を使うか、後者=どう並べるか。",
+    "componentNameNote": "本契約のコンポーネント名は src/index.ts のエクスポート実名。guidelines の一部散文にある解説用の別名（TopAppBar / BottomNavigation / BottomAction 等）は実装上それぞれ Header / BottomTabBar / StickyActionBar に対応する。CategoryScroll・CategoryShortcuts は横スクロール／ショートカット群の実装コンポーネント。"
+  },
+  "pageSkeletons": {
+    "description": "ページの外枠。上から順の構成要素と、外枠に課される構造ルールを規定する。手組みの独自シェルを作らず、実名コンポーネントで組む。",
+    "mobile": {
+      "requiredComponents": ["Header", "BottomTabBar"],
+      "optionalComponents": ["StickyActionBar", "CategoryScroll", "CategoryShortcuts"],
+      "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）",
+        "スクロール領域: main.flex-1.overflow-y-auto（本文セクション群。高さは flex-1 に委ね、ハードコードしない）",
+        "下部固定: BottomTabBar（グローバルナビ。旧称 BottomNavigation）または StickyActionBar（下部 CTA。旧称 BottomAction）"
+      ],
+      "rules": [
+        "全高レイアウトは min-h-dvh を使う（min-h-screen は不可。モバイルのアドレスバー分ずれる）",
+        "スクロール本文は flex-1 で伸縮させる。高さをハードコードしない",
+        "下部に StickyActionBar（固定 CTA）がある場合、main に pb-20 を付けて本文が隠れないようにする",
+        "モバイルの全ページは原則 Header を上端・BottomTabBar を下端に持つ（下部 CTA ページでは BottomTabBar の代わりに StickyActionBar）",
+        "横スクロールリストは flex.overflow-x-auto.gap-3.[-webkit-overflow-scrolling:touch]（カテゴリ横スクロールは CategoryScroll を使う）"
+      ]
+    },
+    "desktop": {
+      "requiredComponents": ["Container"],
+      "optionalComponents": ["Section", "SectionHeader"],
+      "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)] で仕切る）",
+        "本文: main.flex-1（中央寄せ幅は Container、全幅背景帯は Section が持つ）"
+      ],
+      "rules": [
+        "デスクトップの全ページはサイドバーまたは上部ナビを必ず持つ",
+        "本文領域は flex-1 で伸縮させる",
+        "仕切り罫線は色を明示する（border-[var(--Border-Medium-Emphasis)]。幅だけの border は currentColor に化ける）",
+        "左右 padding は Container が所有し、背景は Section が所有する（余白の二重がけを防ぐ）"
+      ]
+    },
+    "admin": {
+      "requiredComponents": ["AdminShell", "AdminSideNav", "AdminHeader"],
+      "optionalComponents": ["SectionHeader", "DataTable", "Section", "Container"],
+      "structure": [
+        "ルート: AdminShell（管理画面の専用シェル。サイドナビ AdminSideNav・ヘッダー AdminHeader を内包）",
+        "サイドナビ・ヘッダーは AdminShell 経由で組み込まれる（AdminSideNav / AdminHeader を直接手組みしない）",
+        "本文: AdminShell の children に space-y-6 のコンテナを置き、ページタイトル（typo-heading-2xl）＋管理コンテンツを並べる"
+      ],
+      "rules": [
+        "管理画面のシェルは AdminShell を使い、手組みしない",
+        "管理画面の表は DataTable を使う（生の table 禁止）",
+        "ページ直下のセクション間は space-y-6 相当（管理画面の縦リズム）"
+      ]
+    },
+    "funnel": {
+      "requiredComponents": ["FunnelShell", "Header"],
+      "optionalComponents": ["Container", "SectionHeader", "StickyActionBar", "FormField"],
+      "implementation": "FunnelShell（primitives, kind:\"shell\"）がこの骨格の実装体。EC 購入導線（カート→お届け先→支払い→確認 の一直線ファネル）に使う集中モード（Full Page）。集中ヘッダー（Header variant=back）は FunnelShell 経由で組み込む。steps / activeStep で進捗インジケータを出し、bottomAction に StickyActionBar 等を渡す。ステップ定義・文言・商品データはシェルに焼き込まず利用側が渡す。手組みの独自シェルを作らない。",
+      "structure": [
+        "ルート: FunnelShell（min-h-dvh flex flex-col の全高コンテナ。集中ヘッダー＋進捗インジケータ＋本体＋下部 CTA を内包）",
+        "上部固定: FunnelShell 内の Header（variant=back。左上=戻る／中央=タイトル）",
+        "進捗: FunnelShell 内の steps インジケータ（完了=Brand 色・現在=強調・未来=Low-Emphasis の点＋ラベル。SP はラベル省略）",
+        "本文: FunnelShell の children（左右 padding は Container・全幅背景帯は Section が持ち、シェルは持たない）",
+        "下部固定: FunnelShell の bottomAction（StickyActionBar 等の CTA）"
+      ],
+      "rules": [
+        "購入導線のシェルは FunnelShell を使い、手組みしない",
+        "グローバルナビ・BottomTabBar・パンくずを置かない（離脱を誘う導線を出さず購入に集中させる）",
+        "進捗を表示する（steps / activeStep でユーザーの現在地を示す）",
+        "下部 CTA（StickyActionBar）は bottomAction に渡す。本文の下余白はシェルが管理するのでページ側で pb を書かない",
+        "管理画面の複雑な集中編集は 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": "ProductCard を並べる標準グリッド。ビューポートではなくシェルが提供する実効幅コンテナで変形する。md / lg の値は tokens.json の breakpoints が正本。520px は ProductCard の最小幅を守るためのコンポーネント固有の例外であり、ページ全体のブレイクポイントではない。",
+    "breakpoints": [
+      { "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" }
+    ],
+    "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": {
+    "description": "一貫した余白が視覚階層を生む。4段のリズムを守る。space-y-* / gap-* いずれでも同値。",
+    "levels": [
+      { "level": "page-sections", "spacing": "space-y-8 / gap-8", "usage": "主要セクション間（ページ内の大きな塊の区切り）" },
+      { "level": "section-content", "spacing": "space-y-4 / gap-4", "usage": "セクション内の要素間" },
+      { "level": "related-items", "spacing": "space-y-2 / gap-2", "usage": "密接に関連する要素間" },
+      { "level": "inline", "spacing": "gap-1 / gap-1.5", "usage": "アイコン＋テキスト、ラベル＋値のインライン" }
+    ]
+  },
+  "cardHierarchy": {
+    "description": "Surface のネストは3層まで。入れ子で背景を一段ずつ落として階層を表現する。",
+    "layers": [
+      { "depth": 1, "token": "--Surface-Primary", "hex": "#FFFFFF", "usage": "メインのコンテンツカード" },
+      { "depth": 2, "token": "--Surface-Secondary", "hex": "#FBF9F8", "usage": "ネストしたセクション・交互行" },
+      { "depth": 3, "token": "--Surface-Tertiary", "hex": "#F4F2F1", "usage": "抑えたコンテナ・無効領域" }
+    ],
+    "rule": "ネストは3層まで。4層目以降は情報設計を見直す。背景は Surface トークンで明示（未指定で親を透かさない）。"
+  },
+  "textHierarchy": {
+    "description": "typo-* とテキスト強調トークンの組み合わせで階層を作るツリー。上ほど強い階層。トークン名は tokens.json の typography.* / semantic.text.* に対応。",
+    "tree": [
+      { "role": "page-title", "typo": "typo-heading-2xl", "color": "--Text-High-Emphasis" },
+      { "role": "section-heading", "typo": "typo-heading-lg", "color": "--Text-High-Emphasis" },
+      { "role": "body", "typo": "typo-body-md", "color": "--Text-High-Emphasis" },
+      { "role": "secondary-text", "typo": "typo-body-md", "color": "--Text-Medium-Emphasis" },
+      { "role": "meta", "typo": "typo-body-sm", "color": "--Text-Low-Emphasis", "usage": "メタ情報・タイムスタンプ" },
+      { "role": "smallest-label", "typo": "typo-label-xs", "color": "--Text-Low-Emphasis" }
+    ],
+    "accentNote": "価格などの最強調は typo-label-lg + --Text-Accent-Primary（オレンジ）。強調は色ではなく typo 系（heading/label）で表現し、font-bold を足さない。"
+  },
+  "ctaHierarchy": {
+    "description": "Button の variant 優先順位。1ビューポート内での CTA 密度を制御する。",
+    "priority": [
+      { "variant": "default", "role": "Primary CTA（オレンジ）", "note": "1ビューポートに1つまで（唯一の主 CTA）" },
+      { "variant": "secondary", "role": "Secondary action" },
+      { "variant": "tertiary", "role": "Tertiary action" },
+      { "variant": "ghost", "role": "Minimal action（メニュー・ツールバー内）" },
+      { "variant": "link", "role": "Inline link" }
+    ],
+    "rules": [
+      "default（オレンジ）の CTA は1ビューポートに1つまで。主アクションを1つに絞る",
+      "複数アクションを並べる時は default を tertiary / ghost と組み合わせる",
+      "モバイルの全幅下部 CTA は size=\"xl\" + w-full（StickyActionBar 内）"
+    ]
+  }
+}

package/contracts/screen-patterns.json

@@ -0,0 +1,224 @@
+{
+  "meta": {
+    "name": "Cake.jp Design System — Screen Patterns Contracts",
+    "version": "0.1.0",
+    "description": "CRUD 機能でどの画面パターンを使うかの機械可読な判断基準。5パターンの定義・CRUD 対応・決定木・編集UIの観点比較を構造化する。人間向けの解説は guidelines/foundations/screen-patterns.md。",
+    "source": "GitHub issue #37 CRUDの画面設計の型化と基本パターンの整備",
+    "relatedContract": "本契約はページ種別の選択（何を使うか）を担う。選んだ後の骨格の組み方（外枠構造・余白リズム・視覚階層）は contracts/composition.json を参照する。",
+    "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軸=態様（見る / 変更して保存・確定する）。",
+      "axes": {
+        "shell": ["standard（グロナビ/サイドナビを保つ通常シェル）", "focused（グロナビを外す集中モード）", "overlay（元画面の上に重ねる）"],
+        "mode": ["view（見る・探す・一覧する）", "edit（内容を変更して保存・確定する）"]
+      },
+      "standardPageNote": "Standard Page は通常シェルの総称（上位分類）で、View（閲覧）と Edit（変更して保存・確定）の2態様を持つ。Edit はフォームに限らず、通常シェルを保ったまま内容を変更し保存/確定する画面全般（管理フォーム編集・カートの数量変更＋購入手続きへ・記事の軽い編集）を含む。"
+    }
+  },
+  "patterns": [
+    {
+      "id": "standard-page-view",
+      "name": "Standard Page（View）",
+      "group": "standard-page",
+      "aliases": ["通常ページ", "Standard Page"],
+      "purpose": "閲覧・一覧・詳細の表示（Read）。見る・探す・一覧するのが主目的。グロナビ/サイドナビを保つ通常シェル。",
+      "dsComponents": ["AdminShell", "StandardPageShell", "DataTable", "Section", "Container", "SectionHeader"],
+      "dsComponentsNote": "シェルは文脈で選ぶ: 管理画面＝AdminShell（サイドナビ＋ヘッダー内包）/ 消費者向け（EC・求人検索など）＝StandardPageShell（Header＋BottomTabBar を SP 下部固定で受ける最頻出の骨格。旧名 EcPageShell）/ マイページ配下＝MypageShell。中身は Section（全幅背景帯）＋ Container（中央寄せ・左右余白）で組む。",
+      "navigation": {
+        "globalNav": "あり",
+        "breadcrumb": "あり",
+        "header": "通常ヘッダー"
+      },
+      "crud": ["Read"],
+      "whenToUse": [
+        "一覧・詳細・ダッシュボードなど閲覧が主目的",
+        "編集の保存が主目的ではない"
+      ],
+      "whenNotToUse": [
+        "通常シェルを保ったまま内容を変更し保存/確定するのが主目的（→ Standard Page（Edit））",
+        "複数情報をまたぐ集中編集（→ Focused Workspace）"
+      ]
+    },
+    {
+      "id": "standard-page-edit",
+      "name": "Standard Page（Edit）",
+      "group": "standard-page",
+      "aliases": ["通常ページ＋保存", "Form Page", "form-page"],
+      "purpose": "通常シェル（グロナビ/サイドナビ）を保ったまま内容を変更し保存/確定する画面全般。フォームに限らない（管理フォーム編集・カートの数量変更＋購入手続きへ・記事の軽い編集）。既存管理画面ではこれがスタンダード。",
+      "dsComponents": ["AdminShell", "StandardPageShell", "Form", "Section", "Container", "SectionHeader"],
+      "dsComponentsNote": "シェルは文脈で選ぶ: 管理画面のフォーム編集＝AdminShell / 消費者向けの編集（カートの数量変更＋確定 等）＝StandardPageShell（下部 CTA 主体なら bottomTab の代わりに StickyActionBar を渡す）/ マイページ配下＝MypageShell。",
+      "navigation": {
+        "globalNav": "あり",
+        "breadcrumb": "あり",
+        "header": "通常ヘッダー"
+      },
+      "crud": ["Update", "Create"],
+      "whenToUse": [
+        "単一エンティティのまとまった項目を1画面で編集・保存する（管理フォーム編集）",
+        "サイドナビ／グロナビのコンテキストを保ったまま内容を変更したい",
+        "その場で編集し確定アクションへ進む（例: カートの数量変更→購入手続きへ）",
+        "通常シェルを保った軽い編集（例: 記事の見出し・本文の軽微な修正）",
+        "1回保存が基本で未保存の途中状態が発生しにくい"
+      ],
+      "whenNotToUse": [
+        "一部の軽い項目だけ・一覧を見たまま素早く終わる（→ ResponsiveDialog）",
+        "複数情報を横断し段階的で時間がかかる・没入して執筆したい（→ Focused Workspace）"
+      ],
+      "examples": [
+        "管理画面の商品編集フォーム（サイドナビを保ったまま保存）",
+        "EC のカート画面（シェル維持・その場で数量変更・購入手続きへ確定）",
+        "記事エディタの軽い編集（通常シェルのまま見出し・本文を直す。没入執筆なら Focused Workspace）"
+      ]
+    },
+    {
+      "id": "focused-workspace",
+      "name": "Focused Workspace",
+      "aliases": ["Full Page", "編集ワークスペース", "集中モード"],
+      "purpose": "複数情報をまたぐ複雑な編集に集中する。グロナビを外し編集に専念させる。",
+      "dsComponents": ["WorkspaceShell", "FunnelShell", "SectionNav", "ResponsiveDialog"],
+      "dsComponentsNote": "実装は用途で 2 つのシェルを使い分ける。管理の複雑編集（複数情報を横断・編集に集中）＝WorkspaceShell（グロナビ非表示・編集ヘッダーを内包）。EC 購入導線（カート→お届け先→支払い→確認 の一直線ファネル）＝FunnelShell（グロナビ・BottomTabBar・パンくずなし・進捗インジケータ＋下部 CTA を内包）。どちらも手組みの独自レイアウトを作らない。編集内のセクションナビには SectionNav（ページ内アンカー移動専用。SideNav を流用しない）を渡す。編集内の作成・編集ダイアログには ResponsiveDialog / AlertDialog を併用する。",
+      "navigation": {
+        "globalNav": "なし（編集内のセクションナビ＝アンカー／ステップは可）",
+        "breadcrumb": "原則なし（戻る導線で代替）",
+        "header": "編集ヘッダー（左上=戻る、右上=ワークスペース全体の上位アクションのみ・ある場合）"
+      },
+      "crud": ["Create", "Update"],
+      "whenToUse": [
+        "複数エンティティ・関連情報をまたぐ編集",
+        "作業時間が長い・段階的（下書き・途中保存・複数ステップ）",
+        "未保存状態が発生しやすくブラウザ更新・戻るの破棄／復元を考慮したい",
+        "URL 共有・直接アクセスが必要",
+        "バリデーションやAPIエラー（409・404・権限・競合）が複雑",
+        "将来的に項目・ステップが増える見込みが大きい"
+      ],
+      "whenNotToUse": [
+        "一部の軽い項目だけの編集（→ ResponsiveDialog）",
+        "通常シェルを保ったまま保存/確定する標準編集（→ Standard Page（Edit））"
+      ],
+      "detailRules": [
+        "グロナビは出さない",
+        "編集内のセクションナビ（アンカー／ステップ）は可",
+        "編集ヘッダー左上=戻る導線",
+        "編集ヘッダー右上=ワークスペース全体の上位アクションのみ（例: 登録申請・公開申請・承認依頼・全体を確定する）。ある場合のみ置く",
+        "セクション／行単位の操作（商品を追加・行を削除・セクション単位の編集・個別項目の保存）はヘッダーでなく対象コンテンツの近くに置く",
+        "パンくずは原則置かず戻る導線で代替する",
+        "離脱・更新・戻るで作業が失われないよう未保存の破棄／復元を設計する",
+        "管理画面限定ではなくEC側にも集中モードは存在し、その場合ヘッダーの上位アクションや戻り先が変わる"
+      ]
+    },
+    {
+      "id": "responsive-dialog",
+      "name": "ResponsiveDialog",
+      "aliases": ["Semi Modal"],
+      "purpose": "軽〜中程度の作成・編集。一覧のコンテキストを維持したまま素早く終える。",
+      "dsComponents": ["ResponsiveDialog"],
+      "dsComponentsNote": "PC=Dialog / SP=Sheet を自動切替。素の Dialog / Sheet を手組みで出し分けない。",
+      "navigation": {
+        "globalNav": "元画面のまま（オーバーレイ表示）",
+        "breadcrumb": "元画面のまま",
+        "header": "ダイアログ／シートのヘッダー"
+      },
+      "crud": ["Create", "Update"],
+      "whenToUse": [
+        "入力項目が少ない一部の軽い項目の作成・編集",
+        "一覧のコンテキストを見たまま作業したい",
+        "その場で短時間に完結する（未保存状態が発生しにくい）",
+        "バリデーション・APIエラーが単純"
+      ],
+      "whenNotToUse": [
+        "複数情報を横断し段階的で時間がかかる（→ Focused Workspace）",
+        "URL 共有・直接アクセス・ブラウザ更新の考慮が必要（→ Focused Workspace）",
+        "破壊的操作の確認（→ AlertDialog）"
+      ]
+    },
+    {
+      "id": "dialog",
+      "name": "Dialog / AlertDialog",
+      "aliases": ["Dialog"],
+      "purpose": "確認・警告・実行確認。操作を一度止めて明示的に確認する。破壊的操作は AlertDialog。",
+      "dsComponents": ["Dialog", "AlertDialog"],
+      "navigation": {
+        "globalNav": "元画面のまま（オーバーレイ表示）",
+        "breadcrumb": "元画面のまま",
+        "header": "ダイアログのヘッダー"
+      },
+      "crud": ["Delete"],
+      "whenToUse": [
+        "削除確認・実行確認・警告",
+        "操作を一度止めて明示的な確認を取りたい",
+        "選択肢を提示して分岐させたい",
+        "破壊的操作（削除・取り消し）の確認は AlertDialog"
+      ],
+      "whenNotToUse": [
+        "フォーム入力（→ ResponsiveDialog）",
+        "破壊的確認なのに素の Dialog で組む（→ AlertDialog）"
+      ]
+    }
+  ],
+  "crudMatrix": [
+    { "operation": "Read", "situation": "閲覧・一覧・詳細", "pattern": "standard-page-view" },
+    { "operation": "Create", "situation": "軽い作成（項目少・一覧文脈維持）", "pattern": "responsive-dialog" },
+    { "operation": "Create", "situation": "複雑な作成（複数情報をまたぐ・段階的）", "pattern": "focused-workspace" },
+    { "operation": "Update", "situation": "標準的な編集（通常シェルを保ったまま保存/確定。管理フォーム編集・カートの数量変更＋確定・記事の軽い編集）", "pattern": "standard-page-edit", "note": "既存仕様のスタンダード" },
+    { "operation": "Update", "situation": "軽い編集（一部の軽い項目・一覧文脈維持）", "pattern": "responsive-dialog" },
+    { "operation": "Update", "situation": "複雑な編集（複数情報を横断・編集に集中）", "pattern": "focused-workspace" },
+    { "operation": "Delete", "situation": "削除確認・警告・実行確認", "pattern": "dialog", "note": "破壊的操作は AlertDialog" }
+  ],
+  "decisionTree": [
+    {
+      "step": 1,
+      "question": "破壊的操作の確認か？（削除・取り消しなど、一度止めて明示的に確認したい）",
+      "yes": "dialog",
+      "yesNote": "AlertDialog を使う",
+      "no": 2
+    },
+    {
+      "step": 2,
+      "question": "確認・警告・実行確認のダイアログか？（破壊的でないが操作を一度止めたい・選択肢を提示したい）",
+      "yes": "dialog",
+      "yesNote": "Dialog を使う",
+      "no": 3
+    },
+    {
+      "step": 3,
+      "question": "閲覧が主目的か？（見る・探す・一覧する。編集の保存が主目的ではない）",
+      "yes": "standard-page-view",
+      "no": 4
+    },
+    {
+      "step": 4,
+      "question": "編集が複数の関連情報・エンティティをまたぐか？（例: 商品＋価格＋配送＋公開設定を横断）",
+      "yes": "focused-workspace",
+      "no": 5
+    },
+    {
+      "step": 5,
+      "question": "下書き・複数ステップの段階的作業、または URL共有・直接アクセス・ブラウザ更新への考慮が必要か？",
+      "yes": "focused-workspace",
+      "no": 6
+    },
+    {
+      "step": 6,
+      "question": "一部の軽い項目だけで、一覧のコンテキストを見たまま素早く終わるか？",
+      "yes": "responsive-dialog",
+      "no": "standard-page-edit",
+      "noNote": "通常シェルを保ったまま保存/確定する既存管理画面の標準形（Standard Page（Edit）。旧称 Form Page。カートの数量変更＋確定・記事の軽い編集もここ）"
+    }
+  ],
+  "editUiSelection": {
+    "description": "ResponsiveDialog vs Standard Page（Edit） vs Focused Workspace の観点別比較。standardPageEdit は旧称 Form Page。多数決ではなく、強い制約（未保存状態・APIエラー・URL共有）が1つでも右に振れたら Focused Workspace を検討する。",
+    "criteria": [
+      { "criterion": "入力項目数", "responsiveDialog": "少ない", "standardPageEdit": "中程度", "focusedWorkspace": "多い" },
+      { "criterion": "編集対象", "responsiveDialog": "一部の軽い項目（参照不要）", "standardPageEdit": "単一エンティティのまとまった項目", "focusedWorkspace": "複数エンティティ・関連情報をまたぐ" },
+      { "criterion": "作業時間", "responsiveDialog": "短い（その場で完結）", "standardPageEdit": "中程度（1画面で完結）", "focusedWorkspace": "長い・段階的" },
+      { "criterion": "一覧コンテキスト", "responsiveDialog": "見たまま作業したい", "standardPageEdit": "通常シェル（サイドナビ／グロナビ）を保って作業", "focusedWorkspace": "不要・むしろ集中したい" },
+      { "criterion": "未保存状態", "responsiveDialog": "発生しにくい（1回保存）", "standardPageEdit": "1回保存が基本", "focusedWorkspace": "発生しやすい（下書き・途中保存・複数ステップ）" },
+      { "criterion": "バリデーション", "responsiveDialog": "単純", "standardPageEdit": "標準", "focusedWorkspace": "複雑（相互依存・条件付き）" },
+      { "criterion": "APIエラー", "responsiveDialog": "単純表示で足りる", "standardPageEdit": "標準表示", "focusedWorkspace": "409・404・権限・競合を丁寧に扱いたい" },
+      { "criterion": "URL共有・直接アクセス", "responsiveDialog": "不要", "standardPageEdit": "ページURLはあるが編集は付随", "focusedWorkspace": "必要（編集画面自体を共有・直リンク）" },
+      { "criterion": "ブラウザ更新・戻る・進む", "responsiveDialog": "考慮不要", "standardPageEdit": "通常想定", "focusedWorkspace": "考慮したい（未保存の破棄／復元）" },
+      { "criterion": "将来拡張", "responsiveDialog": "小さい", "standardPageEdit": "中程度", "focusedWorkspace": "大きい（項目・ステップが増える見込み）" }
+    ]
+  }
+}