@cakejp/design-system 0.7.0 → 0.10.0

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

@@ -0,0 +1,46 @@
+/**
+ * AdminShell — 管理画面の共通レイアウト
+ *
+ * 本番の shop_layout.ctp を参考に、Header + SideNav + Main Content の構造を再現。
+ * 汎用の枠は primitives（AdminSideNav / AdminHeader）に切り出し、
+ * Cake.jp 管理メニュー等のドメイン既定値はこの ec レイヤーで束ねる。
+ * 参照元:
+ * - admin-test-htdocs/app/views/layouts/shop_layout.ctp
+ * - admin-test-htdocs/app/views/elements/shop_layout/header.ctp
+ * - admin-test-htdocs/app/views/elements/shop_layout/side_menu.ctp
+ * - CSS: admin_shops/layout/nav_layout.css
+ */
+import * as React from "react";
+import { type AdminNavItem } from "../../components/primitives/admin-side-nav";
+export declare function MissingComponent({ name, children, className, }: {
+    name: string;
+    children: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export interface AdminShellProps {
+    children: React.ReactNode;
+    /** 現在アクティブなナビアイテム */
+    activeNav?: string;
+    /** ページタイトル（ヘッダー表示用） */
+    title?: string;
+    /** パンくず */
+    breadcrumbs?: {
+        label: string;
+        href?: string;
+    }[];
+    /** ショップ名 */
+    shopName?: string;
+    /** サイドナビ項目（既定=Cake.jp 管理メニュー。利用側で差し替え可） */
+    navItems?: AdminNavItem[];
+    /** ヘッダー右側のアクション slot（既定=通知ベル＋プロフィール） */
+    headerActions?: React.ReactNode;
+    /**
+     * 戻る導線のクリックハンドラ。渡されたときのみ、main 内のパンくずより上に戻るボタンを描画する。
+     * 編集系ページの戻る導線はパンくずより上に置く（シェルが位置を保証する）。
+     * 子コンテンツ内に戻るリンクを手書きしないこと。未指定なら何も出ない。
+     */
+    onBack?: () => void;
+    /** 戻るボタンのラベル（既定="戻る"） */
+    backLabel?: string;
+}
+export declare function AdminShell({ children, activeNav, title, breadcrumbs, shopName, navItems, headerActions, onBack, backLabel, }: AdminShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/{pages/cake/_mypage-shell.d.ts → ec/mypage-shell.d.ts}

@@ -16,9 +16,17 @@
  * ❌ マイページトップ (Dashboard) — メインカラムに白背景を持たず、セクションごとにカード化
  *
  * 上記の例外は意図的な別パターンなのでこのシェルを使わない。
+ *
+ * ## 事業横断での再利用
+ *
+ * 骨格（ヘッダー＋2カラム＋BottomTabBar）は事業横断で再利用できる。
+ * ジョブボード等の他事業では `menuGroups` / `breadcrumbs` / `bottomNavItems` / `headerActions`
+ * を差し替えて骨格を再利用する。既定値は Cake.jp EC のマイページメニュー。
  */
 import React from "react";
-import { type BottomTabBarItem } from "../../../components/primitives/bottom-tab-bar";
+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;
     href?: 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

@@ -0,0 +1,31 @@
+import * as React from "react";
+export interface AdminHeaderProps {
+    /** ヘッダー左側に表示するブランド／タイトル（文言合成は利用側の責務） */
+    brand?: React.ReactNode;
+    /** SP ハンバーガー押下ハンドラ（省略時はハンバーガー非表示） */
+    onMenuClick?: () => void;
+    /** ヘッダー右側のアクション slot（通知ベル・プロフィール等） */
+    actions?: React.ReactNode;
+}
+/**
+ * 管理画面向け固定ヘッダー
+ *
+ * 上端に **全幅** で fixed 配置される横バー（z-40）。左に SP ハンバーガー＋ブランド、
+ * 右にアクション slot を持つ。PC ではこのヘッダーの下端（top-16）から `AdminSideNav`
+ * のレール（z-30）が始まる＝ヘッダーが最前面・全幅で、レールはヘッダー帯に重ならない。
+ * 「{shopName}管理」のような文言合成は行わない（利用側が `brand` に組み立てて渡す）。
+ *
+ * ### インポート
+ * ```tsx
+ * import { AdminHeader } from '../../components/primitives/admin-header'
+ * ```
+ *
+ * ### Props
+ * | Prop | 型 | デフォルト | 説明 |
+ * |------|-----|-----------|------|
+ * | brand | ReactNode | — | 左側のブランド／タイトル |
+ * | onMenuClick | () => void | — | SP ハンバーガー押下ハンドラ（省略で非表示） |
+ * | actions | ReactNode | — | 右側アクション slot |
+ */
+declare function AdminHeader({ brand, onMenuClick, actions }: AdminHeaderProps): import("react/jsx-runtime").JSX.Element;
+export { AdminHeader };

package/dist/types/components/primitives/admin-side-nav.d.ts

@@ -0,0 +1,67 @@
+import * as React from "react";
+export interface AdminNavSubItem {
+    /** サブメニューのラベル */
+    label: string;
+    /** リンク先 URL */
+    href: string;
+}
+/** アイコン描画時のコンテキスト（レール=PC 縦レール / drawer=SP ドロワー） */
+export interface AdminNavIconContext {
+    /** この項目が現在アクティブか */
+    active: boolean;
+    /** 描画される場所 */
+    placement: "rail" | "drawer";
+}
+export interface AdminNavItem {
+    /** アクティブ判定・React key に使う一意なキー */
+    key: string;
+    /** メニューラベル */
+    label: string;
+    /**
+     * アイコン。ReactNode を直接渡すか、描画コンテキスト
+     * （active / placement）に応じて出し分ける関数を渡す。
+     */
+    icon?: React.ReactNode | ((ctx: AdminNavIconContext) => React.ReactNode);
+    /** リンク先 URL（サブメニューを持たない項目用） */
+    href?: string;
+    /** ホバー / アコーディオンで展開するサブメニュー */
+    subMenus?: AdminNavSubItem[];
+}
+export interface AdminSideNavProps {
+    /** メニュー項目（必須・全て props で受ける。固有メニューを部品側に焼き込まない） */
+    items: AdminNavItem[];
+    /** 現在アクティブな項目の key */
+    activeKey?: string;
+    /** ドロワー（SP）のヘッダーに表示するタイトル */
+    drawerTitle?: React.ReactNode;
+    /** モバイルドロワーの開閉状態（制御コンポーネント） */
+    open?: boolean;
+    /** モバイルドロワーの開閉要求ハンドラ */
+    onOpenChange?: (open: boolean) => void;
+    /** nav の aria-label */
+    ariaLabel?: string;
+}
+/**
+ * 管理画面向けサイドナビゲーション
+ *
+ * PC は左端固定の縦型アイコンレール（ホバーでサブメニューをポップアップ）、
+ * SP は制御された左スライドドロワー（サブメニューはアコーディオン）で表示する。
+ * メニュー定義・文言・データは全て `items` prop で受け取り、部品側には焼き込まない。
+ *
+ * ### インポート
+ * ```tsx
+ * import { AdminSideNav } from '../../components/primitives/admin-side-nav'
+ * ```
+ *
+ * ### Props
+ * | Prop | 型 | デフォルト | 説明 |
+ * |------|-----|-----------|------|
+ * | items | AdminNavItem[] | — | メニュー項目（必須） |
+ * | activeKey | string | — | アクティブ項目の key |
+ * | drawerTitle | ReactNode | — | SP ドロワーヘッダーのタイトル |
+ * | open | boolean | false | SP ドロワーの開閉状態 |
+ * | onOpenChange | (open) => void | — | 開閉要求ハンドラ |
+ * | ariaLabel | string | "管理メニュー" | nav の aria-label |
+ */
+declare function AdminSideNav({ items, activeKey, drawerTitle, open, onOpenChange, ariaLabel, }: AdminSideNavProps): import("react/jsx-runtime").JSX.Element;
+export { AdminSideNav };

package/dist/types/components/primitives/category-scroll.d.ts

@@ -66,5 +66,5 @@ export interface CategoryScrollProps {
  * - thumbnailShape="circle" + thumbnailSize="sm" でクイックアクセスアイコン風に
  * - 横スクロールは scrollbar-hide でスクロールバー非表示
  */
-declare function CategoryScroll({ title, moreHref, headerSize, items, thumbnailSize, thumbnailShape, layout, gridRows, gridCols, pcGridCols, className, }: CategoryScrollProps): import("react/jsx-runtime").JSX.Element;
+declare function CategoryScroll({ title, moreHref, headerSize, items, thumbnailSize, thumbnailShape, layout, gridRows, pcGridCols, className, }: CategoryScrollProps): import("react/jsx-runtime").JSX.Element;
 export { CategoryScroll };

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/filter-bar.d.ts

@@ -52,5 +52,5 @@ export interface FilterBarProps extends React.HTMLAttributes<HTMLDivElement> {
  * - SP では並び替えは結果行の右側にソートボタンとして表示（本番同様）
  * - PC では並び替えは select 風ドロップダウンとして表示（本番 m_sort_pc 同様）
  */
-declare function FilterBar({ filters, resultCount, sortLabel, onSortClick, onMoreFilters, onBack, activeFilterCount, variant, className, ...props }: FilterBarProps): import("react/jsx-runtime").JSX.Element;
+declare function FilterBar({ filters, resultCount, sortLabel, onSortClick, onMoreFilters, onBack, activeFilterCount, className, variant, ...props }: FilterBarProps): import("react/jsx-runtime").JSX.Element;
 export { FilterBar };

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

@@ -0,0 +1,85 @@
+import * as React from "react";
+export interface FunnelStep {
+    /** ステップ識別子（activeStep との照合に使う） */
+    key: string;
+    /** 表示ラベル */
+    label: string;
+}
+export interface FunnelShellProps {
+    /**
+     * ヘッダーのロゴ（`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;
+    /**
+     * 進捗インジケータのステップ定義（任意）。
+     * ステップ名・数はドメインの責務なので利用側が渡す（シェルに焼き込まない）。
+     */
+    steps?: FunnelStep[];
+    /** 現在のステップ（steps[].key と照合）。未指定 or 不一致時はインジケータをハイライトしない */
+    activeStep?: string;
+    /**
+     * 各ステップのコンテンツ本体。
+     * 左右 padding は Container の責務なのでシェルは持たない。
+     */
+    children: React.ReactNode;
+    /**
+     * 下部固定アクションの slot（StickyActionBar 等を受ける）。
+     * 渡された場合、本文が隠れないための下余白はシェルが管理する
+     * （StandardPageShell の bottomTab と同じ思想。ページ側で pb を書かない）。
+     */
+    bottomAction?: React.ReactNode;
+    /** ルート要素の追加クラス */
+    className?: string;
+}
+/**
+ * FunnelShell — EC 購入導線等のファネル用集中モード（Full Page）のシェル。
+ *
+ * カート → お届け先 → 支払い → 確認 のような一直線の購入フローに集中させる骨格。
+ * グローバルナビ・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` を使う。
+ *   - **基本形＝中央ロゴ**: `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 でも省略しない。
+ * - `bottomAction` を渡すと本文の下余白はシェルが管理する（二重がけ／付け忘れの構造的防止）。
+ *
+ * 管理画面の集中編集は `WorkspaceShell`（EC 購入導線＝本コンポーネント）。
+ * 判断基準は contracts/screen-patterns.json（focused-workspace）を参照。
+ */
+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

@@ -0,0 +1,60 @@
+import * as React from "react";
+export interface SectionNavItem {
+    /** アクティブ判定・onItemClick 用キー */
+    key: string;
+    /** メニューラベル */
+    label: string;
+    /** リンク先アンカー（`#section-id` 形式を想定） */
+    href: string;
+    /** Lucide / iconsax アイコン等の ReactNode（任意） */
+    icon?: React.ReactNode;
+}
+export interface SectionNavProps extends React.HTMLAttributes<HTMLElement> {
+    /** 目次項目（アンカー） */
+    items: SectionNavItem[];
+    /** アクティブなセクションの key（利用側が scrollspy 等で制御。本体では監視しない） */
+    activeKey?: string;
+    /** aria-label */
+    ariaLabel?: string;
+    /** 項目クリック時のコールバック（任意） */
+    onItemClick?: (key: string) => void;
+}
+/**
+ * SectionNav — ページ内セクション移動（アンカー／目次）専用ナビ。
+ *
+ * 現在のページの中を移動する TOC（目次）型ナビ。`href="#section-id"` の
+ * ページ内アンカースクロールに使う。**ページ間遷移には使わない（→ `SideNav`）**。
+ *
+ * ### アフォーダンス設計
+ * - チェブロン・矢印を**付けない**。「別ページへ遷移する」印象を与えず、
+ *   同一画面内の位置移動であることを見た目で示す（aria-current="location"）。
+ * - 固有幅・背景・境界を持たない（`w-full`）。パネル化・幅決定はシェル／利用側の責務。
+ *   （SideNav の `w-64` 固定が WorkspaceShell で幅ミスマッチを起こした反省）
+ * - IntersectionObserver は内包しない。`activeKey` を利用側が渡す。
+ *
+ * ### インポート
+ * ```tsx
+ * import { SectionNav } from '../../components/primitives/section-nav'
+ * ```
+ *
+ * ### 使い方
+ * ```tsx
+ * <SectionNav
+ *   activeKey="basic"
+ *   items={[
+ *     { key: "basic", label: "基本情報", href: "#basic", icon: <Cake size={18} /> },
+ *     { key: "price", label: "価格・在庫", href: "#price" },
+ *   ]}
+ * />
+ * ```
+ *
+ * ### Props
+ * | Prop | 型 | デフォルト | 説明 |
+ * |------|-----|-----------|------|
+ * | items | SectionNavItem[] | — | 目次項目（アンカー、必須） |
+ * | activeKey | string | — | アクティブなセクションの key |
+ * | ariaLabel | string | "ページ内セクション" | aria-label |
+ * | onItemClick | (key: string) => void | — | 項目クリック時のコールバック |
+ */
+declare function SectionNav({ items, activeKey, ariaLabel, onItemClick, className, ...props }: SectionNavProps): import("react/jsx-runtime").JSX.Element;
+export { SectionNav };

package/dist/types/components/primitives/standard-page-shell.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+export interface StandardPageShellProps {
+    /**
+     * ページ上端に固定するヘッダー。通常は DS の `Header`（variant="logo" / "back" 等）を渡す。
+     * 未指定時はヘッダーなし（枠だけ）。
+     */
+    header?: React.ReactNode;
+    /**
+     * SP 時のみ表示する下部固定ナビ。通常は DS の `BottomTabBar` を渡す。
+     * `@md:hidden` 相当のレスポンシブ制御は BottomTabBar 側が担う。
+     * これを渡すと main に BottomTabBar 分の下余白（pb-20 相当）をシェルが自動付与する
+     * ＝ **pb-20 の付け忘れ／二重がけを構造的に防ぐ**。ページ側で pb-20 を書かない。
+     */
+    bottomTab?: React.ReactNode;
+    /** ページ最下部のフッター（任意）。 */
+    footer?: React.ReactNode;
+    /**
+     * main コンテンツ。ページ側は Section / Container で組む前提。
+     * シェルは左右 padding を持たない（＝ Container の責務を侵さない）。
+     */
+    children: React.ReactNode;
+    /** ルート要素の追加クラス。 */
+    className?: string;
+}
+/**
+ * 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）の
+ * 「検索と結果の表示」のような消費者向けページも、同じこのシェルで組む。
+ *
+ * 設計上の約束（あくまで「枠」— ページ固有の中身は焼き込まない）:
+ * - プロダクトのロゴ・タブ項目・ナビ項目・文言を **一切内蔵しない**。それらは
+ *   利用側が `header` / `bottomTab` に組み立てて渡す（ec 層が Cake.jp 既定値を束ねる役割）。
+ * - `bottomTab` を渡すと main に BottomTabBar 分の下余白をシェルが付与する
+ *   （pb の付け忘れ／二重がけを構造的に防ぐ）。ページ側で pb-20 を書かない。
+ * - 左右 padding は持たない。中身は Section（全幅背景帯）＋ Container（中央寄せ・左右余白）で組む。
+ *
+ * 使い分け:
+ * - 管理画面のシェルは `AdminShell`。
+ * - 複数情報をまたぐ集中編集は `WorkspaceShell`。
+ * - マイページ配下の固有ページは `MypageShell`。
+ *
+ * 判断基準は contracts/composition.json（pageSkeletons）/ contracts/screen-patterns.json を参照。
+ */
+declare function StandardPageShell({ header, bottomTab, footer, children, className, }: StandardPageShellProps): import("react/jsx-runtime").JSX.Element;
+export { StandardPageShell };

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

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

@@ -30,6 +30,7 @@ export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, Navigat
 export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./components/foundations/pagination";
 export { Popover, PopoverContent, PopoverTrigger } from "./components/foundations/popover";
 export { Progress } from "./components/foundations/progress";
+export { ResponsiveDialog, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogTitle, ResponsiveDialogTrigger, useIsMobile } from "./components/foundations/responsive-dialog";
 export { RadioGroup, RadioGroupItem } from "./components/foundations/radio-group";
 export { ScrollArea, ScrollBar } from "./components/foundations/scroll-area";
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./components/foundations/select";
@@ -46,6 +47,10 @@ export { Toaster } from "./components/foundations/sonner";
 export { Toggle, toggleVariants } from "./components/foundations/toggle";
 export { ToggleGroup, ToggleGroupItem } from "./components/foundations/toggle-group";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/foundations/tooltip";
+export { AdminSideNav } from "./components/primitives/admin-side-nav";
+export type { AdminSideNavProps, AdminNavItem, AdminNavSubItem, AdminNavIconContext } from "./components/primitives/admin-side-nav";
+export { AdminHeader } from "./components/primitives/admin-header";
+export type { AdminHeaderProps } from "./components/primitives/admin-header";
 export { CoachMark } from "./components/primitives/coach-mark";
 export { BannerCarousel } from "./components/primitives/banner-carousel";
 export { StickyActionBar } from "./components/primitives/sticky-action-bar";
@@ -57,11 +62,24 @@ 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 { 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";
 export { Footer } from "./components/primitives/footer";
 export { FormField as CakeFormField } from "./components/primitives/form-field";
+export { FunnelShell } from "./components/primitives/funnel-shell";
+export type { FunnelShellProps, FunnelStep } from "./components/primitives/funnel-shell";
+export { Header } from "./components/primitives/header";
 export { ImageCarousel } from "./components/primitives/image-carousel";
 export { ImageGallery } from "./components/primitives/image-gallery";
 export { ImageUploader } from "./components/primitives/image-uploader";
@@ -79,15 +97,37 @@ export { SearchPanel } from "./components/primitives/search-panel";
 export { Container, containerVariants } from "./components/primitives/container";
 export { Section, sectionVariants } from "./components/primitives/section";
 export { SectionHeader } from "./components/primitives/section-header";
+export { SectionNav } from "./components/primitives/section-nav";
+export type { SectionNavProps, SectionNavItem } from "./components/primitives/section-nav";
 export { ShareButtons } from "./components/primitives/share-buttons";
 export { SideNav } from "./components/primitives/side-nav";
 export type { SideNavProps, SideNavGroup, SideNavItem } from "./components/primitives/side-nav";
 export { SocialLoginButton } from "./components/primitives/social-login-button";
 export { StatusCountTabs } from "./components/primitives/status-count-tabs";
 export { Tag, tagVariants } from "./components/primitives/tag";
-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";
 export { CountdownTimer } from "./components/ec/countdown-timer";
 export { CouponCard } from "./components/ec/coupon-card";
 export { DeliveryCalendar } from "./components/ec/delivery-calendar";
@@ -106,8 +146,7 @@ export { RatingStars, SparkleIcon } from "./components/ec/rating-stars";
 export { ReviewCard } from "./components/ec/review-card";
 export { ReviewForm } from "./components/ec/review-form";
 export { ReviewSummary, ReviewItem } from "./components/ec/review-summary";
+export { MypageShell } from "./components/ec/mypage-shell";
+export type { MypageShellProps, MypageShellBreadcrumb } from "./components/ec/mypage-shell";
 export { ShopCard } from "./components/ec/shop-card";
 export { StatCard } from "./components/ec/stat-card";
-export { Header } from "./components/primitives/header";
-export { MypageShell } from "./components/pages/cake/_mypage-shell";
-export type { MypageShellProps, MypageShellBreadcrumb } from "./components/pages/cake/_mypage-shell";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cakejp/design-system",
-  "version": "0.7.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",
@@ -86,9 +87,11 @@
     "lint:scratch": "bash scripts/lint-scratch.sh",
     "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/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/templates/CLAUDE.md

@@ -13,6 +13,8 @@ Codex（および他の AI エージェント）は UI 作業を始める前に
 |---------|------|
 | `node_modules/@cakejp/design-system/CLAUDE.md` | DS 利用ガイド・禁止パターン |
 | `node_modules/@cakejp/design-system/contracts/components.json` | 全コンポーネントの定義・バリアント |
+| `node_modules/@cakejp/design-system/contracts/screen-patterns.json` | 画面パターン判断基準（CRUD・編集/作成/削除UIの選択） |
+| `node_modules/@cakejp/design-system/contracts/composition.json` | ページ骨格・余白リズム・視覚階層の組み方 |
 | `node_modules/@cakejp/design-system/contracts/rules.json` | 禁止パターン・アクセシビリティ要件 |
 | `node_modules/@cakejp/design-system/tokens.json` | カラー・余白・角丸・影・タイポ |