@cakejp/design-system 0.7.0 → 0.9.0

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

@@ -2,6 +2,8 @@
  * AdminLayout — 管理画面の共通レイアウト
  *
  * 本番の 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
@@ -9,6 +11,7 @@
  * - 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;
@@ -27,5 +30,9 @@ export interface AdminLayoutProps {
     }[];
     /** ショップ名 */
     shopName?: string;
+    /** サイドナビ項目（既定=Cake.jp 管理メニュー。利用側で差し替え可） */
+    navItems?: AdminNavItem[];
+    /** ヘッダー右側のアクション slot（既定=通知ベル＋プロフィール） */
+    headerActions?: React.ReactNode;
 }
-export declare function AdminLayout({ children, activeNav, title, breadcrumbs, shopName, }: AdminLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function AdminLayout({ children, activeNav, title, breadcrumbs, shopName, navItems, headerActions, }: AdminLayoutProps): import("react/jsx-runtime").JSX.Element;

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

@@ -18,7 +18,7 @@
  * 上記の例外は意図的な別パターンなのでこのシェルを使わない。
  */
 import React from "react";
-import { type BottomTabBarItem } from "../../../components/primitives/bottom-tab-bar";
+import { type BottomTabBarItem } from "../../components/primitives/bottom-tab-bar";
 export interface MypageShellBreadcrumb {
     label: string;
     href?: string;

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

@@ -0,0 +1,29 @@
+import * as React from "react";
+export interface AdminHeaderProps {
+    /** ヘッダー左側に表示するブランド／タイトル（文言合成は利用側の責務） */
+    brand?: React.ReactNode;
+    /** SP ハンバーガー押下ハンドラ（省略時はハンバーガー非表示） */
+    onMenuClick?: () => void;
+    /** ヘッダー右側のアクション slot（通知ベル・プロフィール等） */
+    actions?: React.ReactNode;
+}
+/**
+ * 管理画面向け固定ヘッダー
+ *
+ * 上端に fixed 配置される横バー。左に SP ハンバーガー＋ブランド、右にアクション slot を持つ。
+ * 「{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/ec-page-shell.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+export interface EcPageShellProps {
+    /**
+     * ページ上端に固定するヘッダー。通常は 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;
+}
+/**
+ * EcPageShell — EC 標準ページ（standard-page-view / standard-page-edit）の骨格。
+ *
+ * `contracts/composition.json` の pageSkeletons（mobile / desktop）を構造的に保証する
+ * 実装体。`min-h-dvh flex flex-col` の全高コンテナに、上端ヘッダー・伸縮する main・
+ * 下部固定 BottomTabBar（SP のみ）・フッターを積む。
+ *
+ * 設計上の約束（あくまで「枠」— ページ固有の中身は焼き込まない）:
+ * - Cake.jp のロゴ・タブ項目・ナビ項目・文言を **一切内蔵しない**。それらは
+ *   利用側が `header` / `bottomTab` に組み立てて渡す（ec 層が Cake.jp 既定値を束ねる役割）。
+ * - `bottomTab` を渡すと main に BottomTabBar 分の下余白をシェルが付与する
+ *   （pb の付け忘れ／二重がけを構造的に防ぐ）。ページ側で pb-20 を書かない。
+ * - 左右 padding は持たない。中身は Section（全幅背景帯）＋ Container（中央寄せ・左右余白）で組む。
+ *
+ * 使い分け:
+ * - 管理画面のシェルは `AdminLayout`。
+ * - 複数情報をまたぐ集中編集は `WorkspaceLayout`。
+ * - マイページ配下の固有ページは `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 };

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,52 @@
+import * as React from "react";
+export interface FunnelStep {
+    /** ステップ識別子（activeStep との照合に使う） */
+    key: string;
+    /** 表示ラベル */
+    label: string;
+}
+export interface FunnelShellProps {
+    /** ファネルのタイトル（集中ヘッダーのタイトル。例: 「ご購入手続き」） */
+    title: string;
+    /** 戻る導線のクリックハンドラ。離脱確認は利用側が onBack 内で行う想定 */
+    onBack?: () => void;
+    /** 戻るボタンのラベル */
+    backLabel?: string;
+    /**
+     * 進捗インジケータのステップ定義（任意）。
+     * ステップ名・数はドメインの責務なので利用側が渡す（シェルに焼き込まない）。
+     */
+    steps?: FunnelStep[];
+    /** 現在のステップ（steps[].key と照合）。未指定 or 不一致時はインジケータをハイライトしない */
+    activeStep?: string;
+    /**
+     * 各ステップのコンテンツ本体。
+     * 左右 padding は Container の責務なのでシェルは持たない。
+     */
+    children: React.ReactNode;
+    /**
+     * 下部固定アクションの slot（StickyActionBar 等を受ける）。
+     * 渡された場合、本文が隠れないための下余白はシェルが管理する
+     * （EcPageShell の bottomTab と同じ思想。ページ側で pb を書かない）。
+     */
+    bottomAction?: React.ReactNode;
+    /** ルート要素の追加クラス */
+    className?: string;
+}
+/**
+ * FunnelShell — EC 購入導線等のファネル用集中モード（Full Page）のシェル。
+ *
+ * カート → お届け先 → 支払い → 確認 のような一直線の購入フローに集中させる骨格。
+ * グローバルナビ・BottomTabBar・パンくずを構造的に持たない（離脱を誘う導線を置けなくする）。
+ *
+ * 設計上の約束:
+ * - ヘッダーは既存 `Header`（variant="back"）を使う。左上=戻る導線、中央=タイトル。
+ * - 進捗インジケータ（`steps` / `activeStep`）は完了=Brand 色・現在=強調・未来=Low-Emphasis
+ *   の点＋ラベルで表す。SP ではラベルを省略し点のみにする簡易レスポンシブ。
+ * - `bottomAction` を渡すと本文の下余白はシェルが管理する（二重がけ／付け忘れの構造的防止）。
+ *
+ * 管理画面の集中編集は `WorkspaceLayout`（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;
+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` 固定が WorkspaceLayout で幅ミスマッチを起こした反省）
+ * - 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/workspace-layout.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+export interface WorkspaceLayoutProps {
+    /** 編集対象名（編集ヘッダーのタイトル） */
+    title: string;
+    /** 戻る導線のクリックハンドラ。未保存確認は利用側が onBack 内で行う想定 */
+    onBack?: () => void;
+    /** 戻るボタンのラベル */
+    backLabel?: string;
+    /**
+     * 右上のワークスペース全体の上位アクション（例: 「公開申請」ボタン）。
+     * 任意 prop = 「ある場合のみ設置する」ルールの表現。
+     * セクション／行単位の操作はここに置かず、対象コンテンツの近くに置く。
+     */
+    primaryAction?: React.ReactNode;
+    /**
+     * 編集内のセクションナビ／ステップナビ（任意）。
+     * PC（@md+）ではコンテンツ左のサイドに、SP では非表示にする。
+     * 通常は `SectionNav`（ページ内アンカー移動専用）を渡す。ページ間遷移用の `SideNav` は流用しない。
+     */
+    sectionNav?: React.ReactNode;
+    /** 編集コンテンツ本体 */
+    children: React.ReactNode;
+    /** ルート要素の追加クラス */
+    className?: string;
+}
+/**
+ * WorkspaceLayout — Focused Workspace（全画面集中編集）のシェル。
+ *
+ * 複数情報をまたぐ複雑な編集に集中させるための骨格。
+ * グローバルナビ・パンくずを構造的に持たない（集中を妨げる導線を置けなくする）。
+ *
+ * 設計上の約束:
+ * - ヘッダーは既存 `Header`（variant="back"）を使う。左上=戻る導線、
+ *   右上=`primaryAction`（ワークスペース全体の上位アクションがある場合のみ）。
+ * - `sectionNav` は編集内ナビのみ。グロナビは置かない。
+ * - `sectionNav` は Surface-Secondary から浮いた独立パネルとして、シェル側で角丸パネルにラップされる。
+ * - 標準的な編集は `AdminLayout`（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 };

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,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 { 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 +89,20 @@ 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 { WorkspaceLayout } from "./components/primitives/workspace-layout";
+export type { WorkspaceLayoutProps } from "./components/primitives/workspace-layout";
 export { AdminLayout, MissingComponent } from "./components/ec/admin-layout";
 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 +121,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.9.0",
   "type": "module",
   "description": "Cake.jp Design System — UI コンポーネント・カラートークン・タイポグラフィ",
   "license": "UNLICENSED",
@@ -86,9 +86,10 @@
     "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",
     "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 && 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/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` | カラー・余白・角丸・影・タイポ |