@cakejp/design-system 0.9.0 → 0.10.0

package/dist/types/components/ec/{admin-layout.d.ts → admin-shell.d.ts}

@@ -1,5 +1,5 @@
 /**
- * AdminLayout — 管理画面の共通レイアウト
+ * AdminShell — 管理画面の共通レイアウト
  *
  * 本番の shop_layout.ctp を参考に、Header + SideNav + Main Content の構造を再現。
  * 汎用の枠は primitives（AdminSideNav / AdminHeader）に切り出し、
@@ -17,7 +17,7 @@ export declare function MissingComponent({ name, children, className, }: {
     children: React.ReactNode;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export interface AdminLayoutProps {
+export interface AdminShellProps {
     children: React.ReactNode;
     /** 現在アクティブなナビアイテム */
     activeNav?: string;
@@ -34,5 +34,13 @@ export interface AdminLayoutProps {
     navItems?: AdminNavItem[];
     /** ヘッダー右側のアクション slot（既定=通知ベル＋プロフィール） */
     headerActions?: React.ReactNode;
+    /**
+     * 戻る導線のクリックハンドラ。渡されたときのみ、main 内のパンくずより上に戻るボタンを描画する。
+     * 編集系ページの戻る導線はパンくずより上に置く（シェルが位置を保証する）。
+     * 子コンテンツ内に戻るリンクを手書きしないこと。未指定なら何も出ない。
+     */
+    onBack?: () => void;
+    /** 戻るボタンのラベル（既定="戻る"） */
+    backLabel?: string;
 }
-export declare function AdminLayout({ children, activeNav, title, breadcrumbs, shopName, navItems, headerActions, }: AdminLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function AdminShell({ children, activeNav, title, breadcrumbs, shopName, navItems, headerActions, onBack, backLabel, }: AdminShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/ec/mypage-shell.d.ts

@@ -16,8 +16,16 @@
  * ❌ マイページトップ (Dashboard) — メインカラムに白背景を持たず、セクションごとにカード化
  *
  * 上記の例外は意図的な別パターンなのでこのシェルを使わない。
+ *
+ * ## 事業横断での再利用
+ *
+ * 骨格（ヘッダー＋2カラム＋BottomTabBar）は事業横断で再利用できる。
+ * ジョブボード等の他事業では `menuGroups` / `breadcrumbs` / `bottomNavItems` / `headerActions`
+ * を差し替えて骨格を再利用する。既定値は Cake.jp EC のマイページメニュー。
  */
 import React from "react";
+import { type HeaderAction } from "../../components/primitives/header";
+import { type SideNavGroup } from "../../components/primitives/side-nav";
 import { type BottomTabBarItem } from "../../components/primitives/bottom-tab-bar";
 export interface MypageShellBreadcrumb {
     label: string;
@@ -34,8 +42,18 @@ export interface MypageShellProps {
     breadcrumbs?: MypageShellBreadcrumb[];
     /** BottomTabBar items（省略時はデフォルト。isActive 等を渡したい場合はこちら） */
     bottomNavItems?: BottomTabBarItem[];
+    /**
+     * PC サイドバーのメニューグループ（既定=Cake.jp EC のマイページメニュー）。
+     * ジョブボード等の他事業では差し替えて骨格を再利用する。
+     */
+    menuGroups?: SideNavGroup[];
+    /**
+     * PC ヘッダー右側のアクション（既定=検索／マイページ／カート）。
+     * 他事業では差し替えて骨格を再利用する。
+     */
+    headerActions?: HeaderAction[];
     /** SP の戻るボタン押下時のハンドラ（Header variant="back" に委譲） */
     onBack?: () => void;
 }
-declare function MypageShell({ title, activeMenu, children, breadcrumbs, bottomNavItems, onBack, }: MypageShellProps): import("react/jsx-runtime").JSX.Element;
+declare function MypageShell({ title, activeMenu, children, breadcrumbs, bottomNavItems, menuGroups, headerActions, onBack, }: MypageShellProps): import("react/jsx-runtime").JSX.Element;
 export { MypageShell };

package/dist/types/components/foundations/data-table.d.ts

@@ -33,10 +33,11 @@ declare function DataTableCheckboxCell({ className, checked, onCheckedChange, in
     indeterminate?: boolean;
     "aria-label"?: string;
 }): import("react/jsx-runtime").JSX.Element;
-declare function DataTableActionCell({ className, actions, ...props }: Omit<React.ComponentProps<"td">, "children" | "width" | "align"> & {
+declare function DataTableActionCell({ className, actions, onClick, ...props }: Omit<React.ComponentProps<"td">, "children" | "width" | "align"> & {
     actions: Array<{
         label: string;
-        onClick?: () => void;
+        /** メニュー項目選択時。Radix DropdownMenuItem から MouseEvent が渡る */
+        onClick?: (event: React.MouseEvent<HTMLElement>) => void;
         destructive?: boolean;
         separator?: boolean;
     }>;

package/dist/types/components/primitives/admin-header.d.ts

@@ -10,7 +10,9 @@ export interface AdminHeaderProps {
 /**
  * 管理画面向け固定ヘッダー
  *
- * 上端に fixed 配置される横バー。左に SP ハンバーガー＋ブランド、右にアクション slot を持つ。
+ * 上端に **全幅** で fixed 配置される横バー（z-40）。左に SP ハンバーガー＋ブランド、
+ * 右にアクション slot を持つ。PC ではこのヘッダーの下端（top-16）から `AdminSideNav`
+ * のレール（z-30）が始まる＝ヘッダーが最前面・全幅で、レールはヘッダー帯に重ならない。
  * 「{shopName}管理」のような文言合成は行わない（利用側が `brand` に組み立てて渡す）。
  *
  * ### インポート

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

@@ -39,6 +39,8 @@ export interface ChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
  * - 売り切れタイル: `<Chip shape="square" size="tile" soldOut>5号</Chip>`
  * - カウント付き: `<Chip selected count={156}>すべて</Chip>`
  * - ステータスフィルター: Chip + count でステータス別件数タブを構成
+ *
+ * removable 時は本体（`data-slot="chip-trigger"`）と削除ボタンが兄弟の2タブストップ構造（ルートは `span[data-slot="chip"]`）。
  */
 declare function Chip({ className, variant, size, shape, href, selected, soldOut, removable, onRemove, count, children, ...props }: ChipProps): import("react/jsx-runtime").JSX.Element;
 export { Chip, chipVariants };

package/dist/types/components/primitives/funnel-shell.d.ts

@@ -6,11 +6,23 @@ export interface FunnelStep {
     label: string;
 }
 export interface FunnelShellProps {
-    /** ファネルのタイトル（集中ヘッダーのタイトル。例: 「ご購入手続き」） */
-    title: string;
-    /** 戻る導線のクリックハンドラ。離脱確認は利用側が onBack 内で行う想定 */
+    /**
+     * ヘッダーのロゴ（`CakeLogo` 等）。**基本形はこちら**。
+     * 渡すとヘッダーを `Header variant="logo-center"`（中央ロゴのみ）で描画する。
+     * ライブ本番の購入導線（/carts_v2/ = cart_layout.ctp の cartHeader）に準拠し、
+     * 戻る・タイトルを持たず離脱導線をロゴのみに絞る。`logo` と `title` は
+     * どちらか一方を渡す（`logo` が優先）。
+     */
+    logo?: React.ReactNode;
+    /**
+     * ファネルのタイトル（集中ヘッダーのタイトル。例: 「ご購入手続き」）。
+     * `logo` 未指定時の**代替形**（`Header variant="back"` の中央タイトル）。
+     * 多段申込などタイトル・戻るが要るファネル向け。`logo` 使用時は不要。
+     */
+    title?: string;
+    /** 戻る導線のクリックハンドラ（title 使用時）。離脱確認は利用側が onBack 内で行う想定 */
     onBack?: () => void;
-    /** 戻るボタンのラベル */
+    /** 戻るボタンのラベル（title 使用時） */
     backLabel?: string;
     /**
      * 進捗インジケータのステップ定義（任意）。
@@ -27,7 +39,7 @@ export interface FunnelShellProps {
     /**
      * 下部固定アクションの slot（StickyActionBar 等を受ける）。
      * 渡された場合、本文が隠れないための下余白はシェルが管理する
-     * （EcPageShell の bottomTab と同じ思想。ページ側で pb を書かない）。
+     * （StandardPageShell の bottomTab と同じ思想。ページ側で pb を書かない）。
      */
     bottomAction?: React.ReactNode;
     /** ルート要素の追加クラス */
@@ -39,14 +51,35 @@ export interface FunnelShellProps {
  * カート → お届け先 → 支払い → 確認 のような一直線の購入フローに集中させる骨格。
  * グローバルナビ・BottomTabBar・パンくずを構造的に持たない（離脱を誘う導線を置けなくする）。
  *
+ * ## なぜ購入導線は中央ロゴのヘッダーなのか（理由）
+ *
+ * 購入導線は **戻り・離脱をしづらくして途中離脱を抑制する** ため、グロナビ・戻る・
+ * タイトルを持たない中央ロゴのヘッダーを基本形にする。根拠は2つ:
+ *
+ * 1. **DS の Header の既定用途** — `Header` の docstring が
+ *    `variant="logo-center": ロゴ中央配置（決済・申し込みページ用）` と規定している
+ *    （src/components/primitives/header.tsx の `variant` prop）。決済・申込ページ向けの
+ *    バリアントを購入導線でそのまま使う。
+ * 2. **ライブ本番の購入導線ヘッダー** — `www-test-htdocs/app/views/layouts/cart_layout.ctp`
+ *    の cartHeader は中央ロゴのみで、ロゴクリックのリンク先も `/cart/` と thanks に限定
+ *    （＝カート／完了以外へは飛ばさず、離脱導線を最小化している）。本シェルはこの実挙動に
+ *    準拠する。
+ *
  * 設計上の約束:
- * - ヘッダーは既存 `Header`（variant="back"）を使う。左上=戻る導線、中央=タイトル。
+ * - ヘッダーは既存 `Header` を使う。
+ *   - **基本形＝中央ロゴ**: `logo` を渡すと `Header variant="logo-center"`（中央ロゴのみ）で
+ *     描画する。ライブ本番の購入導線（cart_layout.ctp の cartHeader）準拠で、離脱導線は
+ *     ロゴのみ（戻る・タイトルを持たない）＝上記のとおり途中離脱の抑制が目的。
+ *   - **代替形＝back+title**: `logo` を渡さず `title` を渡すと `Header variant="back"`
+ *     （左上=戻る・中央=タイトル）で描画する。多段申込などタイトル・戻るが要るファネル向け。
+ *   - `logo` と `title` はどちらか一方を渡す（`logo` が優先）。両方無い場合はヘッダーを描画しない。
  * - 進捗インジケータ（`steps` / `activeStep`）は完了=Brand 色・現在=強調・未来=Low-Emphasis
- *   の点＋ラベルで表す。SP ではラベルを省略し点のみにする簡易レスポンシブ。
+ *   で表す。各ステップはドット（上）＋ラベル（下）の縦積みで、コネクタ線はドット中心の
+ *   高さで隣ステップ中心まで引く。ラベルは SP でも省略しない。
  * - `bottomAction` を渡すと本文の下余白はシェルが管理する（二重がけ／付け忘れの構造的防止）。
  *
- * 管理画面の集中編集は `WorkspaceLayout`（EC 購入導線＝本コンポーネント）。
+ * 管理画面の集中編集は `WorkspaceShell`（EC 購入導線＝本コンポーネント）。
  * 判断基準は contracts/screen-patterns.json（focused-workspace）を参照。
  */
-declare function FunnelShell({ title, onBack, backLabel, steps, activeStep, children, bottomAction, className, }: FunnelShellProps): import("react/jsx-runtime").JSX.Element;
+declare function FunnelShell({ logo, title, onBack, backLabel, steps, activeStep, children, bottomAction, className, }: FunnelShellProps): import("react/jsx-runtime").JSX.Element;
 export { FunnelShell };

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

@@ -29,7 +29,7 @@ export interface SectionNavProps extends React.HTMLAttributes<HTMLElement> {
  * - チェブロン・矢印を**付けない**。「別ページへ遷移する」印象を与えず、
  *   同一画面内の位置移動であることを見た目で示す（aria-current="location"）。
  * - 固有幅・背景・境界を持たない（`w-full`）。パネル化・幅決定はシェル／利用側の責務。
- *   （SideNav の `w-64` 固定が WorkspaceLayout で幅ミスマッチを起こした反省）
+ *   （SideNav の `w-64` 固定が WorkspaceShell で幅ミスマッチを起こした反省）
  * - IntersectionObserver は内包しない。`activeKey` を利用側が渡す。
  *
  * ### インポート

package/dist/types/components/primitives/{ec-page-shell.d.ts → standard-page-shell.d.ts}

@@ -1,5 +1,5 @@
 import * as React from "react";
-export interface EcPageShellProps {
+export interface StandardPageShellProps {
     /**
      * ページ上端に固定するヘッダー。通常は DS の `Header`（variant="logo" / "back" 等）を渡す。
      * 未指定時はヘッダーなし（枠だけ）。
@@ -23,25 +23,29 @@ export interface EcPageShellProps {
     className?: string;
 }
 /**
- * EcPageShell — EC 標準ページ（standard-page-view / standard-page-edit）の骨格。
+ * StandardPageShell — 消費者向け標準ページ（standard-page-view / standard-page-edit）の骨格。
  *
  * `contracts/composition.json` の pageSkeletons（mobile / desktop）を構造的に保証する
  * 実装体。`min-h-dvh flex flex-col` の全高コンテナに、上端ヘッダー・伸縮する main・
  * 下部固定 BottomTabBar（SP のみ）・フッターを積む。
  *
+ * 名前はプロダクト・ドメインに依存しない（旧名 `EcPageShell` は deprecated alias として残置）。
+ * 骨格自体に EC 固有の要素は無く、Cake.jp の EC ページも求人検索（jobboard）の
+ * 「検索と結果の表示」のような消費者向けページも、同じこのシェルで組む。
+ *
  * 設計上の約束（あくまで「枠」— ページ固有の中身は焼き込まない）:
- * - Cake.jp のロゴ・タブ項目・ナビ項目・文言を **一切内蔵しない**。それらは
+ * - プロダクトのロゴ・タブ項目・ナビ項目・文言を **一切内蔵しない**。それらは
  *   利用側が `header` / `bottomTab` に組み立てて渡す（ec 層が Cake.jp 既定値を束ねる役割）。
  * - `bottomTab` を渡すと main に BottomTabBar 分の下余白をシェルが付与する
  *   （pb の付け忘れ／二重がけを構造的に防ぐ）。ページ側で pb-20 を書かない。
  * - 左右 padding は持たない。中身は Section（全幅背景帯）＋ Container（中央寄せ・左右余白）で組む。
  *
  * 使い分け:
- * - 管理画面のシェルは `AdminLayout`。
- * - 複数情報をまたぐ集中編集は `WorkspaceLayout`。
+ * - 管理画面のシェルは `AdminShell`。
+ * - 複数情報をまたぐ集中編集は `WorkspaceShell`。
  * - マイページ配下の固有ページは `MypageShell`。
  *
  * 判断基準は contracts/composition.json（pageSkeletons）/ contracts/screen-patterns.json を参照。
  */
-declare function EcPageShell({ header, bottomTab, footer, children, className, }: EcPageShellProps): import("react/jsx-runtime").JSX.Element;
-export { EcPageShell };
+declare function StandardPageShell({ header, bottomTab, footer, children, className, }: StandardPageShellProps): import("react/jsx-runtime").JSX.Element;
+export { StandardPageShell };

package/dist/types/components/primitives/{workspace-layout.d.ts → workspace-shell.d.ts}

@@ -1,5 +1,5 @@
 import * as React from "react";
-export interface WorkspaceLayoutProps {
+export interface WorkspaceShellProps {
     /** 編集対象名（編集ヘッダーのタイトル） */
     title: string;
     /** 戻る導線のクリックハンドラ。未保存確認は利用側が onBack 内で行う想定 */
@@ -16,15 +16,25 @@ export interface WorkspaceLayoutProps {
      * 編集内のセクションナビ／ステップナビ（任意）。
      * PC（@md+）ではコンテンツ左のサイドに、SP では非表示にする。
      * 通常は `SectionNav`（ページ内アンカー移動専用）を渡す。ページ間遷移用の `SideNav` は流用しない。
+     *
+     * 注意: セクション数が少ない編集では、ページ遷移に見える左レールを置くより
+     * `asidePanel`（右メタパネル）だけを使う構成（Shopify 型）を推奨する。
      */
     sectionNav?: React.ReactNode;
+    /**
+     * コンテンツ右のメタ情報／上位アクションパネル（任意）。
+     * 公開状態・スケジュール・プレビュー等「編集そのものではない付帯情報と操作」を集約する。
+     * PC（@md+）では右に sticky 表示、SP ではメイン本体の下に縦積み。
+     * ページ内アンカーではないため、左レールのような「別ページ風」の誤認を生まない。
+     */
+    asidePanel?: React.ReactNode;
     /** 編集コンテンツ本体 */
     children: React.ReactNode;
     /** ルート要素の追加クラス */
     className?: string;
 }
 /**
- * WorkspaceLayout — Focused Workspace（全画面集中編集）のシェル。
+ * WorkspaceShell — Focused Workspace（全画面集中編集）のシェル。
  *
  * 複数情報をまたぐ複雑な編集に集中させるための骨格。
  * グローバルナビ・パンくずを構造的に持たない（集中を妨げる導線を置けなくする）。
@@ -34,9 +44,9 @@ export interface WorkspaceLayoutProps {
  *   右上=`primaryAction`（ワークスペース全体の上位アクションがある場合のみ）。
  * - `sectionNav` は編集内ナビのみ。グロナビは置かない。
  * - `sectionNav` は Surface-Secondary から浮いた独立パネルとして、シェル側で角丸パネルにラップされる。
- * - 標準的な編集は `AdminLayout`（Standard Page（Edit）／旧 Form Page）。複雑・集中編集・没入執筆のみ本コンポーネント。
+ * - 標準的な編集は `AdminShell`（Standard Page（Edit）／旧 Form Page）。複雑・集中編集・没入執筆のみ本コンポーネント。
  *
  * 判断基準は contracts/screen-patterns.json / guidelines/foundations/screen-patterns.md を参照。
  */
-declare function WorkspaceLayout({ title, onBack, backLabel, primaryAction, sectionNav, children, className, }: WorkspaceLayoutProps): import("react/jsx-runtime").JSX.Element;
-export { WorkspaceLayout };
+declare function WorkspaceShell({ title, onBack, backLabel, primaryAction, sectionNav, asidePanel, children, className, }: WorkspaceShellProps): import("react/jsx-runtime").JSX.Element;
+export { WorkspaceShell };

package/dist/types/index.d.ts

@@ -62,8 +62,16 @@ export { CategoryScroll } from "./components/primitives/category-scroll";
 export type { CategoryScrollProps, CategoryItem } from "./components/primitives/category-scroll";
 export { Chip, chipVariants } from "./components/primitives/chip";
 export type { ChipProps } from "./components/primitives/chip";
-export { EcPageShell } from "./components/primitives/ec-page-shell";
-export type { EcPageShellProps } from "./components/primitives/ec-page-shell";
+export { StandardPageShell } from "./components/primitives/standard-page-shell";
+export type { StandardPageShellProps } from "./components/primitives/standard-page-shell";
+/**
+ * @deprecated 旧名。`StandardPageShell` を使うこと。
+ * この骨格は EC 専用ではなく、求人検索など消費者向けの標準ページ全般で使うため中立名に改称した。
+ * 次のメジャーで削除する。
+ */
+export { StandardPageShell as EcPageShell } from "./components/primitives/standard-page-shell";
+/** @deprecated 旧名。`StandardPageShellProps` を使うこと。次のメジャーで削除する。 */
+export type { StandardPageShellProps as EcPageShellProps } from "./components/primitives/standard-page-shell";
 export { EmptyState } from "./components/primitives/empty-state";
 export { ErrorState } from "./components/primitives/error-state";
 export { FilterBar } from "./components/primitives/filter-bar";
@@ -97,9 +105,26 @@ export type { SideNavProps, SideNavGroup, SideNavItem } from "./components/primi
 export { SocialLoginButton } from "./components/primitives/social-login-button";
 export { StatusCountTabs } from "./components/primitives/status-count-tabs";
 export { Tag, tagVariants } from "./components/primitives/tag";
-export { WorkspaceLayout } from "./components/primitives/workspace-layout";
-export type { WorkspaceLayoutProps } from "./components/primitives/workspace-layout";
-export { AdminLayout, MissingComponent } from "./components/ec/admin-layout";
+export { WorkspaceShell } from "./components/primitives/workspace-shell";
+export type { WorkspaceShellProps } from "./components/primitives/workspace-shell";
+/**
+ * @deprecated 旧名。`WorkspaceShell` を使うこと。
+ * `kind:"shell"` の一級概念・Shells セクションに合わせ、接尾辞を Shell に統一した。
+ * 次のメジャーで削除する。
+ */
+export { WorkspaceShell as WorkspaceLayout } from "./components/primitives/workspace-shell";
+/** @deprecated 旧名。`WorkspaceShellProps` を使うこと。次のメジャーで削除する。 */
+export type { WorkspaceShellProps as WorkspaceLayoutProps } from "./components/primitives/workspace-shell";
+export { AdminShell, MissingComponent } from "./components/ec/admin-shell";
+export type { AdminShellProps } from "./components/ec/admin-shell";
+/**
+ * @deprecated 旧名。`AdminShell` を使うこと。
+ * `kind:"shell"` の一級概念・Shells セクションに合わせ、接尾辞を Shell に統一した。
+ * 次のメジャーで削除する。
+ */
+export { AdminShell as AdminLayout } from "./components/ec/admin-shell";
+/** @deprecated 旧名。`AdminShellProps` を使うこと。次のメジャーで削除する。 */
+export type { AdminShellProps as AdminLayoutProps } from "./components/ec/admin-shell";
 export { AnniversaryCard } from "./components/ec/anniversary-card";
 export { CakeLogo } from "./components/ec/cake-logo";
 export { ChartControls } from "./components/ec/chart-controls";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cakejp/design-system",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "type": "module",
   "description": "Cake.jp Design System — UI コンポーネント・カラートークン・タイポグラフィ",
   "license": "UNLICENSED",
@@ -35,6 +35,7 @@
     "CLAUDE.md",
     "CLAUDE_PRODUCTION.md",
     "MIGRATION.md",
+    "UPDATING.md",
     "bin",
     "contracts",
     "dist",
@@ -87,9 +88,10 @@
     "lint:reuse": "bash scripts/check-story-reuse.sh",
     "lint:border": "node scripts/check-border-color.mjs",
     "lint:docs": "bash scripts/check-docs-drift.sh",
+    "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 && 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",
+    "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",
     "test": "vitest run --config vitest.config.ts"
   },
   "dependencies": {

package/src/preset.css

@@ -32,6 +32,22 @@
 /* --- Dark mode variant --- */
 @custom-variant dark (&:is(.dark *));
 
+/* --- Container query breakpoints ---
+   md / lg は本番（cakejp.css）の「切替段」に合わせる。xl は役割が違い、
+   DS が定める「コンテンツ上限段」（本番に対応する切替段は無い）。
+   Tailwind v4 既定の --container-md は 28rem(448px) で、本番の SP/PC 境界
+   （max-width:767px / min-width:768px）と大きくズレる。DS 内の @md: は
+   「SP/PC の切り替え」の意図で使われているため 768px に再定義する。
+   @lg は本番の PC 中段（min-width:960px。既存の @[960px] 群と同じ意図）。
+   @xl は本番に対応する切替段が無い DS 独自の「コンテンツ上限段」
+   （ページコンテナの標準上限。1280px 以上では原則レイアウト変形を追加しない）。 */
+@theme {
+  /* 正本の値は tokens.json（breakpoints）にも記載。変更時は両方を更新する。 */
+  --container-md: 48rem; /* 768px — SP/PC 境界（切替段。本番と一致） */
+  --container-lg: 60rem; /* 960px — PC 中段（切替段。本番と一致） */
+  --container-xl: 80rem; /* 1280px — コンテンツ上限段（DS 定義。本番の切替段ではない） */
+}
+
 /* --- Theme: Tailwind integration --- */
 @theme inline {
   /* Radius */

package/tokens.json

@@ -108,6 +108,13 @@
     }
   },
 
+  "breakpoints": {
+    "comment": "役割は二層。(1) 切替段=md / lg の2つだけ（値は本番 cakejp.css の境界に一致させた正本。レイアウトの変形はこの2段でのみ行う）。(2) 上限段=xl（1280。「切替段」ではなく DS が定めるコンテンツ幅の上限段。本番に 1280 の切替段は無い＝1025/1441 はある）。DS 内部はコンテナクエリ @md: / @lg: / @xl:（preset.css の --container-md / --container-lg / --container-xl）で参照し、生 CSS ではこの px 値をメディアクエリに直書きする（CSS 変数はメディアクエリに使えないため、値の配布は本トークンが担う）。独自のブレイクポイント値を発明しない",
+    "md": { "px": 768, "rem": "48rem", "container": "--container-md", "role": "切替段", "usage": "SP/PC 境界。767px 以下=SP / 768px 以上=PC。本番 cakejp.css の max-width:767px / min-width:768px と一致" },
+    "lg": { "px": 960, "rem": "60rem", "container": "--container-lg", "role": "切替段", "usage": "PC 中段。本番 cakejp.css の min-width:960px 段と一致" },
+    "xl": { "px": 1280, "rem": "80rem", "container": "--container-xl", "role": "上限段", "usage": "コンテンツ上限段（切替段ではない）。ページコンテナの標準上限で、1280px 以上では原則レイアウト変形を追加しない。本番 cakejp.css に 1280 の切替段は無い（1025 / 1441 はある）——DS が定める標準上限。実例: MypageShell の PC グリッド max-w-[1280px]" }
+  },
+
   "touchTarget": {
     "button-cta":    { "min": "40px", "recommended": "48px" },
     "icon-button":   { "min": "40px", "recommended": "44px" },