@cakejp/design-system 0.9.0 → 0.11.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,19 @@
  * ❌ マイページトップ (Dashboard) — メインカラムに白背景を持たず、セクションごとにカード化
  *
  * 上記の例外は意図的な別パターンなのでこのシェルを使わない。
+ *
+ * ## 事業横断での再利用
+ *
+ * 骨格（ヘッダー＋2カラム＋BottomTabBar）は事業横断で再利用できる。
+ * ジョブボード・他ブランドの consumer では `logo` / `navItems` / `menuGroups` /
+ * `breadcrumbs` / `bottomNavItems` / `headerActions` を差し替えて骨格を再利用する。
+ * 既定値は Cake.jp EC（ロゴ＝CakeLogo、メニュー＝マイページメニュー）。
+ * `logo` / `navItems` を渡せば PC ヘッダーのブランドを差し替えられ、
+ * 「マイページ配下だけ Cake.jp ロゴに割れる」問題を避けられる。
  */
 import React from "react";
+import { type HeaderAction, type HeaderNavItem } from "../../components/primitives/header";
+import { type SideNavGroup, type SideNavItem } from "../../components/primitives/side-nav";
 import { type BottomTabBarItem } from "../../components/primitives/bottom-tab-bar";
 export interface MypageShellBreadcrumb {
     label: string;
@@ -26,16 +37,50 @@ export interface MypageShellBreadcrumb {
 export interface MypageShellProps {
     /** ページタイトル（SP の h1 + PC の main h1 + 末尾パンくず に使用） */
     title: string;
-    /** SideNav の activeMenu に渡すキー */
-    activeMenu: string;
+    /** SideNav の activeMenu に渡すキー（完全一致）。`currentPath` / `isActiveMenuItem` 使用時は省略可。 */
+    activeMenu?: string;
+    /**
+     * 現在の URL パス。渡すと SideNav が `href` と照合してアクティブ項目を自動判定する
+     * （`activeMenu` の手動指定が不要になる）。既定の照合は完全一致（`activeMatch="prefix"` で配下ページ全体を対象に）。
+     */
+    currentPath?: string;
+    /**
+     * `currentPath` と SideNav 各項目 `href` の照合方法（既定 `"exact"`）。
+     * `"prefix"` にすると詳細・配下ページ（例: `/mypage/orders/123/`）でも一覧項目（`/mypage/orders/`）がアクティブになる。
+     */
+    activeMatch?: "exact" | "prefix";
+    /** SideNav のアクティブ判定を上書きする述語（最優先）。consumer 固有の URL 集約ロジックを注入する。 */
+    isActiveMenuItem?: (item: SideNavItem) => boolean;
     /** コンテンツ */
     children: React.ReactNode;
     /** パンくず（省略時はデフォルト: ホーム > 山田 太郎 さまのマイページ > {title}） */
     breadcrumbs?: MypageShellBreadcrumb[];
     /** BottomTabBar items（省略時はデフォルト。isActive 等を渡したい場合はこちら） */
     bottomNavItems?: BottomTabBarItem[];
+    /**
+     * PC サイドバーのメニューグループ（既定=Cake.jp EC のマイページメニュー）。
+     * ジョブボード等の他事業では差し替えて骨格を再利用する。
+     */
+    menuGroups?: SideNavGroup[];
+    /**
+     * PC ヘッダー右側のアクション（既定=検索／マイページ／カート）。
+     * 他事業では差し替えて骨格を再利用する。
+     */
+    headerActions?: HeaderAction[];
+    /**
+     * PC ヘッダーのロゴ（既定=`CakeLogo`）。
+     * 他ブランドの consumer は自社ロゴを渡してマイページのブランド割れを防ぐ。
+     * ※ SP は `Header variant="back"`（戻るボタン）でロゴを表示しないため、この prop は PC ヘッダーにのみ作用する。
+     */
+    logo?: React.ReactNode;
+    /**
+     * PC ヘッダーのグローバルナビ（既定=なし）。
+     * 他ブランドの consumer は自社ナビ（例: 商品を探す／ご利用ガイド／よくある質問）を渡して骨格を再利用する。
+     * SP では非表示（`Header` の仕様）。
+     */
+    navItems?: HeaderNavItem[];
     /** 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, currentPath, activeMatch, isActiveMenuItem, children, breadcrumbs, bottomNavItems, menuGroups, headerActions, logo, navItems, 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/side-nav.d.ts

@@ -18,8 +18,26 @@ export interface SideNavGroup {
     items: SideNavItem[];
 }
 export interface SideNavProps extends React.HTMLAttributes<HTMLElement> {
-    /** 現在アクティブなメニューの key */
+    /** 現在アクティブなメニューの key（完全一致）。`currentPath` / `isActive` 未指定時の既定判定。 */
     activeMenu?: string;
+    /**
+     * 現在の URL パス。指定すると各項目の `href` と照合してアクティブ項目を自動判定する
+     * （`activeMenu` より優先）。詳細ページや配下ページで `activeMenu` を手動指定する必要がなくなる。
+     */
+    currentPath?: string;
+    /**
+     * `currentPath` と `href` の照合方法（既定 `"exact"`）。
+     * - `"exact"`: `href === currentPath`
+     * - `"prefix"`: `currentPath` が `href` 配下（前方一致）。1 項目が配下ページ全体でアクティブになる
+     *   （例: 「注文履歴」`/mypage/orders/` が `/mypage/orders/123/` でもアクティブ）。
+     *   複数項目が一致した場合は**最長 href の 1 項目のみ**アクティブにし、親子の二重アクティブを防ぐ。
+     */
+    activeMatch?: "exact" | "prefix";
+    /**
+     * アクティブ判定を完全に上書きする述語（最優先）。
+     * consumer 固有の URL 集約ロジック（複数 URL を 1 項目へ束ねる等）を注入する。
+     */
+    isActive?: (item: SideNavItem) => boolean;
     /** メニューグループ（必須） */
     groups: SideNavGroup[];
     /** aria-label */
@@ -55,8 +73,11 @@ export interface SideNavProps extends React.HTMLAttributes<HTMLElement> {
  * | Prop | 型 | デフォルト | 説明 |
  * |------|-----|-----------|------|
  * | groups | SideNavGroup[] | — | メニューグループ（必須） |
- * | activeMenu | string | — | アクティブなメニュー項目の key |
+ * | activeMenu | string | — | アクティブなメニュー項目の key（完全一致・後方互換） |
+ * | currentPath | string | — | 現在 URL。href と照合して自動判定（activeMenu より優先） |
+ * | activeMatch | "exact" \| "prefix" | "exact" | currentPath の照合方法。prefix は配下ページ全体でアクティブ |
+ * | isActive | (item) => boolean | — | アクティブ判定を上書きする述語（最優先） |
  * | ariaLabel | string | "サイドメニュー" | aria-label |
  */
-declare function SideNav({ activeMenu, groups, ariaLabel, className, ...props }: SideNavProps): import("react/jsx-runtime").JSX.Element;
+declare function SideNav({ activeMenu, currentPath, activeMatch, isActive, groups, ariaLabel, className, ...props }: SideNavProps): import("react/jsx-runtime").JSX.Element;
 export { SideNav };

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.11.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,60 +88,43 @@
     "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": {
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "tailwind-merge": "^3.5.0"
+    "cmdk": "^1.0.0",
+    "next-themes": "^0.4.0",
+    "react-day-picker": "^9.0.0",
+    "react-hook-form": "^7.0.0",
+    "sonner": "^2.0.0",
+    "tailwind-merge": "^3.5.0",
+    "vaul": "^1.0.0"
   },
   "peerDependencies": {
     "@hookform/resolvers": "^5.0.0",
-    "cmdk": "^1.0.0",
     "date-fns": "^4.0.0",
     "iconsax-reactjs": "^0.0.8",
     "lucide-react": ">=0.400.0",
-    "next-themes": "^0.4.0",
     "radix-ui": "^1.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-day-picker": "^9.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "react-hook-form": "^7.0.0",
-    "sonner": "^2.0.0",
     "tailwindcss": "^4.0.0",
-    "vaul": "^1.0.0",
     "zod": "^4.0.0"
   },
   "peerDependenciesMeta": {
     "@hookform/resolvers": {
       "optional": true
     },
-    "react-hook-form": {
-      "optional": true
-    },
     "zod": {
       "optional": true
     },
-    "react-day-picker": {
-      "optional": true
-    },
     "date-fns": {
       "optional": true
-    },
-    "cmdk": {
-      "optional": true
-    },
-    "next-themes": {
-      "optional": true
-    },
-    "vaul": {
-      "optional": true
-    },
-    "sonner": {
-      "optional": true
     }
   },
   "devDependencies": {

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/templates/AGENTS.md

@@ -36,18 +36,45 @@ DS に該当パターンが無い場合のみカスタム実装を許可。そ
 
 ### CSS のセットアップ（重要）
 
-DS のプリビルド CSS（`dist/index.css`）を**必ず**プロジェクトのエントリ CSS で
-`@import` すること。これにより consumer の Tailwind 設定に依存せず、DS と同じ
-見た目が保証される。
+#### ✅ 推奨（consumer が Tailwind v4 を使う場合）: `@source` 単一ビルド方式
+
+consumer のエントリ CSS で Tailwind を読み込み、`preset`（トークン・`typo-*`・
+コンテナクエリ段・dark variant）を足したうえで、DS の className を **consumer と
+同じ Tailwind ビルド**でスキャン・生成させる。
+
+```css
+/* globals.css / app.css など。@source のパスは この CSS ファイルからの相対で
+   node_modules/@cakejp/design-system/dist/index.js を指す */
+@import "tailwindcss";
+@import "@cakejp/design-system/preset";                          /* トークン・typo-*・コンテナ段・dark variant */
+@source "../node_modules/@cakejp/design-system/dist/index.js";   /* DS の className を consumer と同一ビルドで生成 */
+```
+
+**なぜこれが推奨か:** ユーティリティのビルドが 1 つに統一されるため、Tailwind の
+「基底ユーティリティ→バリアント」の並び順が保証される。consumer が `.hidden` /
+`.border-transparent` 等 DS と同名のユーティリティを 1 箇所でも使っても、DS の
+コンテナクエリ・データ属性バリアント（`@lg:block`・
+`group-data-[state=active]:border-…` 等）が同一 `@layer utilities` 内で正しく後勝ち
+する。
+
+> `@source` のパスは CSS ファイルからの相対。深さが違う場合は `../` の数を調整して
+> 必ず `node_modules/@cakejp/design-system/dist/index.js` を指すこと。Tailwind v4 は
+> 既定で `node_modules` をスキャンしないため、この明示 `@source` が要（かなめ）。
+
+#### プリビルド CSS 方式（`dist/index.css`）: **consumer が Tailwind を使わない場合のみ**
 
 ```css
-/* globals.css / app.css など */
 @import "@cakejp/design-system/dist/index.css"; /* DS のコンポーネントスタイル・トークン・preflight */
-@import "tailwindcss";                          /* consumer 自身の utility */
 ```
 
-> ❌ `@source` ディレクティブで DS を再ビルドする方式は非推奨。consumer の
-> Tailwind 設定次第で出力がズレるリスクがある（トークン値の差・preflight の差等）。
+> ⚠️ **consumer が Tailwind v4 を併用する構成でこの方式を使ってはいけない。**
+> DS のプリビルド CSS と consumer の Tailwind は**独立した 2 つのビルド**で、同名
+> ユーティリティ（`.hidden` 等）を別々に同じ `@layer utilities` へ二重出力する。
+> 後段（consumer）の基底ルールが前段（DS）のバリアントルールを宣言順で打ち消し、
+> **DS のバリアントが効かなくなる**。実害例: `Header` / `Footer` / `MenuDrawer` が
+> デスクトップ幅でも永久にモバイル表示になる（consumer の `.hidden` が DS の
+> `@lg:block` に後勝ちする）。import 順を入れ替えても解決しない。**Tailwind 併用時は
+> 上の `@source` 方式を使うこと。**
 
 ### コンポーネントの使用