ksk-design-system 1.37.4 → 1.38.0

package/AGENTS.md

@@ -16,7 +16,7 @@
 
 ```
 contracts/rules.json                     # 禁止パターン32件・AIアンチパターン10件・a11y要件
-contracts/components.json               # 全110コンポーネントの定義・バリアント・ルール
+contracts/components.json               # 全112コンポーネントの定義・バリアント・ルール
 tokens.json                             # カラー・スペーシング・シャドウトークン
 src/components/COMPONENT_LOOKUP.md      # バリアント・インポートパス一覧（自動生成）
 ```
@@ -90,10 +90,10 @@ Brand色を差し替え（10行）→ Primitive Layer → Semantic Layer → Bri
 | ファイル | 内容 |
 |---------|------|
 | **AGENTS.md**（本ファイル） | 概要・技術スタック・コマンド・クイックスタート |
-| **contracts/components.json** | 全110コンポーネントの構造化定義（バリアント・アクセシビリティ要件） |
+| **contracts/components.json** | 全112コンポーネントの構造化定義（バリアント・アクセシビリティ要件） |
 | **contracts/rules.json** | 禁止パターン32件・AIアンチパターン10件・アクセシビリティ要件 |
 | **tokens.json** | カラー・スペーシング・シャドウトークンの機械可読定義 |
-| **src/components/COMPONENT_LOOKUP.md** | 全110コンポーネントのバリアント・インポートパス（自動生成） |
+| **src/components/COMPONENT_LOOKUP.md** | 全112コンポーネントのバリアント・インポートパス（自動生成） |
 | **DESIGN.md** | AI エージェント向け視覚言語サマリ（トークン＋意図・voice・motion） |
 
 ---
@@ -103,12 +103,12 @@ Brand色を差し替え（10行）→ Primitive Layer → Semantic Layer → Bri
 ```
 src/
 ├── components/
-│   ├── ui/           # 汎用UIコンポーネント 55個
+│   ├── ui/           # 汎用UIコンポーネント 56個
 │   ├── patterns/
 │   │   ├── commerce/ # EC系 11個
 │   │   ├── admin/    # 管理画面系 8個
 │   │   ├── shells/   # レイアウトシェル 3個
-│   │   └── ...       # 汎用パターン 33個
+│   │   └── ...       # 汎用パターン 34個
 │   └── icons/
 ├── styles/
 │   ├── primitive.css  # Layer 1: 原色パレット
@@ -116,7 +116,7 @@ src/
 │   └── typography.css # typo-* ユーティリティ 17クラス
 ├── themes/            # default / orange / green / violet / blue
 ├── preset.css         # 外部プロジェクト向けプリセット
-└── index.ts           # Public API（110コンポーネント）
+└── index.ts           # Public API（112コンポーネント）
 ```
 
 ---
@@ -188,3 +188,17 @@ import { Button, Card, Input, FormField } from "ksk-design-system"
 - [ ] `bash scripts/check-drift.sh` を実行して乖離がないことを確認
 - [ ] Storybook のストーリーファイル（`.stories.tsx`）を作成
 - [ ] `node scripts/generate-component-lookup.mjs` を実行して COMPONENT_LOOKUP.md を更新
+
+<!-- BEGIN:codex-pr-review-guidelines -->
+## Codex PR Review Guidelines
+
+Codex code review is expected to run on pull requests for this repository after the repository is enabled in ChatGPT Codex Code review settings. If an immediate review is needed, comment `@codex review` on the pull request.
+
+When reviewing, prioritize P0/P1 issues: security/privacy regressions, data loss, broken auth, broken build/test, user-visible behavior changes, and missing validation around env vars, migrations, background jobs, notifications, payments, storage, and external APIs.
+
+For UI changes, verify design-system usage before accepting scratch components or hard-coded styling. Reusable primitives that belong in the design system should be moved there instead of duplicated locally.
+
+Respect this repository's local ownership rules and validation commands. A review should mention the commands that were run, or explicitly state what could not be run. Do not approve or recommend merge while required checks, migrations, secrets, or runtime configuration are unverified.
+
+Do not implement or change payment, billing, or subscription logic without explicit user confirmation.
+<!-- END:codex-pr-review-guidelines -->

package/CLAUDE.md

@@ -57,10 +57,10 @@ Brand色を差し替え（10行）→ Primitive Layer → Semantic Layer → Bri
 |---------|------|
 | **CLAUDE.md**（本ファイル） | 概要・技術スタック・コマンド・クイックスタート（Claude Code用） |
 | **AGENTS.md** | 同上（Codex用。セッション開始時の読み込み指示・編集後コマンドを明記） |
-| **contracts/components.json** | 全110コンポーネントの構造化定義（バリアント・アクセシビリティ要件） |
+| **contracts/components.json** | 全112コンポーネントの構造化定義（バリアント・アクセシビリティ要件） |
 | **contracts/rules.json** | 禁止パターン32件・AIアンチパターン10件・アクセシビリティ要件 |
 | **tokens.json** | カラー・スペーシング・シャドウトークンの機械可読定義 |
-| **src/components/COMPONENT_LOOKUP.md** | 全110コンポーネントのバリアント・インポートパス一覧（自動生成） |
+| **src/components/COMPONENT_LOOKUP.md** | 全112コンポーネントのバリアント・インポートパス一覧（自動生成） |
 | **DESIGN.md** | AI エージェント向け視覚言語サマリ（トークン＋意図・voice・motion） |
 
 **セッション開始時 / コードを書く前に必ず読む:**
@@ -78,12 +78,12 @@ Brand色を差し替え（10行）→ Primitive Layer → Semantic Layer → Bri
 ```
 src/
 ├── components/
-│   ├── ui/           # 汎用UIコンポーネント 55個
+│   ├── ui/           # 汎用UIコンポーネント 56個
 │   ├── patterns/
 │   │   ├── commerce/ # EC系 11個
 │   │   ├── admin/    # 管理画面系 8個
 │   │   ├── shells/   # レイアウトシェル 3個
-│   │   └── ...       # 汎用パターン 33個
+│   │   └── ...       # 汎用パターン 34個
 │   └── icons/
 ├── styles/
 │   ├── primitive.css  # Layer 1: 原色パレット
@@ -91,7 +91,7 @@ src/
 │   └── typography.css # typo-* ユーティリティ 17クラス
 ├── themes/            # default / orange / green / violet / blue
 ├── preset.css         # 外部プロジェクト向けプリセット
-└── index.ts           # Public API（110コンポーネント）
+└── index.ts           # Public API（112コンポーネント）
 ```
 
 ---

package/PUBLISHING.md

@@ -2,9 +2,9 @@
 
 `ksk-design-system` のリリース・配布手順。
 
-> **配布方式**: このパッケージは npm レジストリには公開しない。
-> `npm pack` で生成した tgz を各消費リポジトリの `vendor/` に置き、
-> `package.json` から `file:vendor/ksk-design-system-X.Y.Z.tgz` で参照する **vendoring 方式**。
+> **配布方式**: v1.36.0 以降は npm レジストリ経由で配布する。
+> `npm publish --access public` で公開し、各消費リポジトリの
+> `package.json` は `ksk-design-system@X.Y.Z` を参照する。
 > 消費リポ: belle-todo / trip_todo / ninshin-todo / yokoku-app / pawly（いずれも `~/LocalDev/` 直下）。
 
 ## 前提
@@ -23,9 +23,10 @@ bash scripts/release.sh minor   # patch / minor / major / x.y.z
 1. `git diff --quiet` & main ブランチチェック（曜日チェック）
 2. `npm run check`
 3. `npm version <level>`（tag 切り）
-4. `npm pack`（新名 tgz 生成）
-5. `git push origin main --tags`
-6. `bash scripts/bump-consumers.sh <version>`（5 リポへ PR 自動作成）
+4. `npm pack`（prepack で `dist/` を生成し、中身を検証）
+5. `npm publish --access public`
+6. `git push origin main --tags`
+7. `bash scripts/update-consumers.sh <version>`（5 リポへ PR 自動作成）
 
 > v1.35.0 で旧名 `@ksk/design-system` 互換 tgz の生成は廃止。
 > 消費5リポ + todo-shared が新名 `ksk-design-system` に移行済。
@@ -61,14 +62,15 @@ npm version major
 `npm version` が自動で `package.json` を更新し、`v1.16.0` タグを切る。
 `dist/` の再ビルド・コミットはこの version bump のタイミングでのみ行う。
 
-### 3. tgz 生成
+### 3. pack / publish
 
 ```bash
-npm pack
+npm pack --dry-run
+npm publish --access public
 ```
 
-`prepack` フックで `npm run build:lib` が自動実行され、リポ直下に
-`ksk-design-system-X.Y.Z.tgz` が生成される。
+`prepack` フックで `npm run build:lib` が自動実行され、公開パッケージに入る
+`dist/` / `contracts/` / `tokens.json` / docs の中身が更新される。
 
 中身を確認したい場合:
 
@@ -98,18 +100,16 @@ git push origin main --tags
 
 ```bash
 # 全リポ一括
-bash scripts/bump-consumers.sh 1.16.0
+bash scripts/update-consumers.sh 1.16.0
 
 # 特定リポのみ
-bash scripts/bump-consumers.sh 1.16.0 belle-todo pawly
+bash scripts/update-consumers.sh 1.16.0 belle-todo pawly
 ```
 
-各消費リポで `chore/bump-ds-<version>` ブランチを切り、tgz の `vendor/` 配置・
-`package.json` の参照書換・`npm install`・commit・push・PR 作成まで自動で行う。
+各消費リポで `chore/bump-ds-<version>` ブランチを切り、`package.json` の
+`ksk-design-system` 参照書換・`npm install`・commit・push・PR 作成まで自動で行う。
 失敗したリポはスキップされ最後にまとめて報告されるので、個別にリトライする。
 
-過去版の tgz は `vendor/` に残す運用（ロールバックを git revert だけで済ませるため）。
-
 ### 6. PR マージ
 
 各消費リポの PR で CI が green なことを確認してマージ。
@@ -125,9 +125,9 @@ bash scripts/bump-consumers.sh 1.16.0 belle-todo pawly
 git commit -m "fix: 重大なバグの説明"
 
 npm version patch
-npm pack
+npm publish --access public
 git push origin main --tags
-bash scripts/bump-consumers.sh <version> <影響リポ...>
+bash scripts/update-consumers.sh <version> <影響リポ...>
 ```
 
 修正コミットの背景・影響範囲を `RELEASE.md` の「ホットフィックス履歴」セクションに必ず追記。
@@ -148,13 +148,13 @@ bash scripts/bump-consumers.sh <version> <影響リポ...>
 ## 注意
 
 - 配布前に必ず `npm pack --dry-run` で中身確認
+- npm registry 公開には `npm login` 済みであること
 - `package.json#exports` を変更したら必ず利用側プロジェクトでの import を試す
 - 金曜午後のリリースは厳禁（週末に障害対応できない）
 - メジャーリリースは月初の月曜が望ましい（フィードバック収集期間が取れる）
 
 ## npm 公開について
 
-過去にタグ push で npm publish する GitHub Actions（`publish.yml`）が存在したが、
-実際の配布が vendoring 方式であり NPM_TOKEN も未設定で失敗し続けていたため削除した。
-将来 npm レジストリ公開に切り替える場合は、NPM_TOKEN の Secrets 登録と
-workflow の再作成をセットで行うこと。
+v1.36.0 以降は npm registry 経由配布。GitHub Actions による自動 publish はなく、
+ローカルの `npm login` 済み環境から `scripts/release.sh` で公開する。
+CI/CD に戻す場合は、NPM_TOKEN の Secrets 登録と workflow の再作成をセットで行うこと。

package/README.md

@@ -4,7 +4,7 @@
 
 **🔗 ライブ Storybook → https://ksk-design-system.vercel.app**
 
-110 コンポーネントを実際に操作・確認できます。
+115 コンポーネントを実際に操作・確認できます。
 
 ---
 
@@ -14,7 +14,7 @@
 - **アクセシブル** — shadcn/ui（Radix UI ベース）+ `@storybook/addon-a11y` で a11y を担保
 - **Tailwind CSS v4 ネイティブ** — `@theme` ベースのトークン設計
 - **型安全** — React 19 + TypeScript、CVA によるバリアント管理
-- **110 + 91 コンポーネント** — Web 110（UI 55 / EC 11 / 管理 8 / シェル 3 / パターン 33）+ React Native 91
+- **115 + 91 コンポーネント** — Web 115（UI 56 / EC 11 / 管理 8 / シェル 3 / パターン 37）+ React Native 91
 - **iOS 26 Liquid Glass 対応** — RN 側 `GlassView` + `Button variant="glass"`、Web 側 `.glass` CSS マテリアル
 
 ## 🎨 テーマ
@@ -54,6 +54,44 @@ import { Button, Card, Input, FormField } from "ksk-design-system"
 
 新規クライアント案件では、テーマファイルで `--Primitive-Brand-500` などブランドカラーの 10 行を定義するだけで、全コンポーネントがそのブランドカラーで動作します。
 
+### Media overlay utilities
+
+動画・写真の上に文字や操作を置く場合は、`--Text-on-Media` と `.text-on-media` / `.text-on-media-secondary`、上下の `.media-scrim-top` / `.media-scrim-bottom` を使います。TikTok / Reels 型の操作群は `MediaActionCluster` が glass ボタン、ラベル、safe-area anchor、idle auto-hide をまとめて扱います。
+
+```tsx
+import { MediaActionCluster } from "ksk-design-system"
+
+<div className="relative">
+  <div className="absolute inset-x-0 top-0 h-32 media-scrim-top" />
+  <h1 className="text-on-media">メディア上のタイトル</h1>
+  <MediaActionCluster
+    anchor="bottom-right"
+    items={[
+      { label: "いいね", icon: <HeartIcon />, active: true },
+      { label: "シェア", icon: <ShareIcon /> },
+    ]}
+  />
+</div>
+```
+
+### Fullscreen screen primitives
+
+フルスクリーン画面は `Screen` で固定高 root、本文の内部スクロール、下部 CTA の safe-area 余白をまとめて扱います。写真背景の入口画面やオンボーディングスライドは `PhotoHero` と `typo-on-image` を組み合わせます。
+
+```tsx
+import { Screen, PhotoHero, Button } from "ksk-design-system"
+
+<Screen scroll={false} padding="none">
+  <PhotoHero src="/onboarding/slide-1.jpg" overlay="dark">
+    <PhotoHero.Eyebrow>さあ、始めよう</PhotoHero.Eyebrow>
+    <PhotoHero.Title>ふたりの準備、ここから。</PhotoHero.Title>
+    <PhotoHero.Actions>
+      <Button variant="glass-inverse" className="w-full">はじめる</Button>
+    </PhotoHero.Actions>
+  </PhotoHero>
+</Screen>
+```
+
 ### React Native / Expo
 
 `ksk-design-system/native/ui` から直接 RN 用コンポーネント（91 個）を import できます。iOS 26 の **Liquid Glass** にも対応:

package/RELEASE.md

@@ -19,9 +19,9 @@
 ```
 T-4w  破壊変更内容の確定 → MIGRATION.md 草案作成
 T-3w  scripts/codemod/vX-to-vY.mjs を実装、利用側で dry-run 検証
-T-2w  RC 版の tgz を 1〜2 の消費リポへ先行配布、動作確認
+T-2w  RC 版を 1〜2 の消費リポへ先行配布、動作確認
 T-1w  feedback 反映、ESLint 旧 API ルールを "error" に昇格
-T-0   全消費リポへ配布 (bump-consumers.sh)、リリースノート公開、社内告知
+T-0   全消費リポへ配布 (update-consumers.sh)、リリースノート公開、社内告知
 T+1w  次の patch で旧 API を完全削除
 ```
 
@@ -31,7 +31,7 @@ T+1w  次の patch で旧 API を完全削除
 
 1. main で直接修正（or hotfix ブランチ）
 2. `npm version patch`
-3. `npm pack` → `bash scripts/bump-consumers.sh <version> <影響リポ...>`
+3. `npm publish --access public` → `bash scripts/update-consumers.sh <version> <影響リポ...>`
 4. 影響範囲・原因・修正内容を「ホットフィックス履歴」に記録
 5. ポストモーテムを Issue / wiki に書く
 
@@ -63,7 +63,7 @@ GitHub Releases にコピペできるテンプレ:
 - ...
 
 ### Migration
-- 破壊変更なし。vendor tgz の差し替え PR（bump-consumers.sh が自動作成）をマージするだけで OK。
+- 破壊変更なし。npm package version の更新 PR（update-consumers.sh が自動作成）をマージするだけで OK。
 ```
 
 破壊変更がある場合は必ず:

package/contracts/components.json

@@ -5,18 +5,18 @@
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "counts": {
       "ui": 56,
-      "patterns": 33,
+      "patterns": 37,
       "commerce": 11,
       "admin": 8,
       "shells": 3,
-      "total": 111
+      "total": 115
     }
   },
   "ui": [
     {
       "name": "Button",
       "path": "src/components/ui/button.tsx",
-      "description": "アクションボタン。最重要CTAにはdefault、Liquid Glass背景にはglass。アイコン単独はiconサイズ群。",
+      "description": "アクションボタン。最重要CTAにはdefault、Liquid Glass背景にはglass、暗背景上のLiquid Glassにはglass-inverse。アイコン単独はiconサイズ群。",
       "variants": [
         "default",
         "secondary",
@@ -26,6 +26,7 @@
         "link",
         "destructive",
         "glass",
+        "glass-inverse",
         "accent",
         "inverse",
         "ghost-inverse"
@@ -50,6 +51,7 @@
         "Must use <Button> not <button>",
         "Icon-only buttons require aria-label",
         "variant=glass は背景がグラデーション/写真の場合のみ使用",
+        "variant=glass-inverse は暗い写真・動画・濃色面上の Liquid Glass CTA 専用",
         "variant=inverse / ghost-inverse は暗背景・ヒーローセクション専用",
         "size=hero は hero / final-CTA 専用（ピル型 56px）"
       ]
@@ -208,7 +210,7 @@
     {
       "name": "Dialog",
       "path": "src/components/ui/dialog.tsx",
-      "description": "タスク面用の中央モーダル(role=dialog)。フォーム入力・絞り込み等の「作業する」面に使う。削除/送信等の割り込み確認は ConfirmDialog / AlertDialog(role=alertdialog) を使い分ける。モバイルは ResponsiveDialog 推奨。position=\"top\" でモバイル向け上部寄せ。",
+      "description": "タスク面用の中央モーダル(role=dialog)。フォーム入力・絞り込み等の「作業する」面に使う。削除/送信等の割り込み確認は ConfirmDialog / AlertDialog(role=alertdialog) を使い分ける。モバイルは ResponsiveDialog 推奨。position=\"top\" でモバイル向け上部寄せ。autoFocus / restoreFocusOnClose / closeOnEsc / bodyScrollLock でフォーカス・スクロール挙動を制御可能。",
       "subcomponents": [
         "DialogTrigger",
         "DialogContent",
@@ -221,13 +223,15 @@
       "rules": [
         "rounded-2xl (16px)",
         "shadow-[var(--shadow-dialog)]",
-        "p-6 padding"
+        "p-6 padding",
+        "autoFocus は first-input / title / ref / false を指定可能",
+        "description prop は sr-only description を自動生成する"
       ]
     },
     {
       "name": "Sheet",
       "path": "src/components/ui/sheet.tsx",
-      "description": "サイドパネル・ボトムシート。フィルター・メニュー・補助入力に使用。モーダルより軽いコンテキストに。snapPoints でスナップ式、swipeToClose で下スワイプ閉じを有効化。",
+      "description": "サイドパネル・ボトムシート。フィルター・メニュー・補助入力に使用。モーダルより軽いコンテキストに。snapPoints でスナップ式、swipeToClose で下スワイプ閉じを有効化。autoFocus / restoreFocusOnClose / closeOnEsc / bodyScrollLock でフォーカス・スクロール挙動を制御可能。",
       "subcomponents": [
         "SheetTrigger",
         "SheetContent",
@@ -240,7 +244,10 @@
       ],
       "rules": [
         "Side panel, not modal",
-        "swipeToClose は side=bottom / bottom-glass のみ有効"
+        "swipeToClose は side=bottom / bottom-glass のみ有効",
+        "swipeToClose mode は max-h-[90dvh] を自動付与し、viewport 外にはみ出さない",
+        "autoFocus は first-input / title / ref / false を指定可能",
+        "description prop は sr-only description を自動生成する"
       ],
       "variants": {
         "side": [
@@ -539,11 +546,12 @@
     {
       "name": "SubNav",
       "path": "src/components/ui/sub-nav.tsx",
-      "description": "横スクロール サブナビゲーション。underline / chip バリアント。アクティブ項目の自動スクロール対応。",
+      "description": "横スクロール サブナビゲーション。underline / chip バリアント。アクティブ項目の自動スクロール、item description/title の補足説明対応。",
       "variants": [],
       "accessibility": [
         "role=\"tablist\"",
-        "aria-selected on active tab"
+        "aria-selected on active tab",
+        "description/title は title と aria-describedby に反映"
       ],
       "rules": []
     },
@@ -835,7 +843,12 @@
     {
       "name": "EmptyState",
       "path": "src/components/patterns/empty-state.tsx",
-      "description": "空状態プレースホルダー。データゼロ時のUX向上に使用。アクションまたは説明文を必ず含める。",
+      "description": "空状態プレースホルダー。データゼロ時のUX向上に使用。アクションまたは説明文を必ず含める。size=default / compact / inline に対応。",
+      "sizes": [
+        "default",
+        "compact",
+        "inline"
+      ],
       "rules": [
         "Always include an action or explanation"
       ]
@@ -924,7 +937,8 @@
       "path": "src/components/patterns/form-field.tsx",
       "description": "フォームフィールドラッパー。Label+Input+エラーメッセージをセットで管理。バリデーション表示付き。",
       "rules": [
-        "Label + Input + error message as unit"
+        "Label + Input + error message as unit",
+        "required asterisk は Brand 色。Caution 色は入力エラーとの混同を避ける"
       ]
     },
     {
@@ -992,6 +1006,26 @@
         "Use ConfirmDialog not custom Dialog for confirmation flows"
       ]
     },
+    {
+      "name": "Celebration",
+      "path": "src/components/patterns/celebration.tsx",
+      "description": "マイルストーン達成・大目標達成などの祝い演出。confetti / emoji 表示、prefers-reduced-motion 対応。",
+      "variants": [
+        "confetti",
+        "emoji",
+        "both",
+        "none"
+      ],
+      "accessibility": [
+        "role=status",
+        "aria-live=polite",
+        "prefers-reduced-motion で confetti を抑制"
+      ],
+      "rules": [
+        "一時的な達成演出に使用",
+        "ローディングや常時表示の装飾用途には使わない"
+      ]
+    },
     {
       "name": "BottomSheetForm",
       "path": "src/components/patterns/bottom-sheet-form.tsx",
@@ -1076,7 +1110,95 @@
     {
       "name": "ShareButtons",
       "path": "src/components/patterns/share-buttons.tsx",
-      "description": "シェアボタン群。LINE / Twitter / Facebook などのSNSシェアボタンをまとめて表示。"
+      "description": "シェアボタン群。LINE / X / Facebook / Instagram / Email / WhatsApp / Telegram / Copy に対応し、region で既定 providers を切替可能。",
+      "features": [
+        "providers",
+        "region defaults",
+        "copy fallback",
+        "circle / inline layout",
+        "onShare tracking"
+      ],
+      "rules": [
+        "providers を渡すと明示順で表示",
+        "region=jp は line/x/copy、region=us は whatsapp/x/copy を既定にする",
+        "provider 別の計測には onShare(provider) を使う。copy 完了時だけ必要なら onCopy も併用する"
+      ]
+    },
+    {
+      "name": "MediaActionCluster",
+      "path": "src/components/patterns/media-action-cluster.tsx",
+      "description": "動画・写真などのメディア上に重ねる icon + label のアクションクラスタ。TikTok/Reels 型の縦・横操作群、safe-area anchor、idle auto-hide に対応。",
+      "features": [
+        "media overlay",
+        "icon + label actions",
+        "vertical / horizontal / auto orientation",
+        "safe-area anchor",
+        "idle auto-hide",
+        "glass buttons",
+        "text-on-media"
+      ],
+      "accessibility": [
+        "role=group",
+        "aria-label",
+        "aria-pressed for active button items",
+        "44px touch target"
+      ],
+      "rules": [
+        "メディア上の操作群に使用する。通常画面の下部 CTA には StickyActionBar を使う",
+        "items[].label は必須。アイコン単独にしない",
+        "暗い写真・動画・濃色面上では glass-inverse / text-on-media を維持する",
+        "autoHideMs=null で idle fade を無効化できる"
+      ]
+    },
+    {
+      "name": "Screen",
+      "path": "src/components/patterns/screen.tsx",
+      "description": "固定高ビューポート、本文だけの内部スクロール、下部固定 CTA の safe-area 余白を内包するフルスクリーン画面骨組み。",
+      "features": [
+        "100dvh fixed viewport",
+        "internal scroll body",
+        "min-h-0 guard",
+        "fixed header slot",
+        "fixed footer slot",
+        "safe-area bottom"
+      ],
+      "accessibility": [
+        "main landmark",
+        "footer landmark when footer is present"
+      ],
+      "rules": [
+        "body スクロールを使わないアプリのフルスクリーン画面に使う",
+        "本文が長い画面では scroll=true のまま使う",
+        "写真ヒーローなど 1 画面固定では scroll=false と padding=none を組み合わせる",
+        "footer には主要 CTA を置き、safe-area 余白を消費側で再実装しない"
+      ]
+    },
+    {
+      "name": "PhotoHero",
+      "path": "src/components/patterns/photo-hero.tsx",
+      "description": "写真背景、暗化オーバーレイ、下詰め/中央寄せコンテンツ、写真上の可読性 typography をまとめるフルスクリーンヒーロー。",
+      "features": [
+        "photo background",
+        "medium / dark overlay",
+        "bottom / center align",
+        "on-image typography",
+        "compound slots"
+      ],
+      "subcomponents": [
+        "PhotoHero.Eyebrow",
+        "PhotoHero.Title",
+        "PhotoHero.Body",
+        "PhotoHero.Actions"
+      ],
+      "accessibility": [
+        "decorative image defaults to alt empty",
+        "alt can be provided when the image is meaningful"
+      ],
+      "rules": [
+        "オンボーディング入口・写真スライド・メディア上 CTA に使う",
+        "写真上の CTA には Button variant=glass-inverse / ghost-inverse を使う",
+        "本文が長い場合は Screen scroll=true 側で内部スクロールを確保する"
+      ]
     },
     {
       "name": "FileUpload",
@@ -1332,24 +1454,29 @@
     {
       "name": "DataTable",
       "path": "src/components/patterns/admin/data-table.tsx",
-      "description": "管理画面データテーブル。ソート・チェックボックス・行アクション・インライン編集・ドラッグ並び替え対応。",
+      "description": "管理画面データテーブル。rows/columns の高水準 API と、既存サブコンポーネントによる手組み API の両方に対応。ソート・チェックボックス・行アクション・インライン編集・ドラッグ並び替え・セクション行対応。",
       "features": [
+        "rows-columns-api",
         "sort",
         "checkbox",
         "actions",
         "inline-edit",
-        "drag"
+        "drag",
+        "section-row"
       ],
       "rules": [
-        "20+ sub-components. Use DataTableHead, DataTableRow, DataTableCell."
+        "rows/columns API は最短実装向け",
+        "複雑なセル構成は DataTableHead, DataTableRow, DataTableCell などのサブコンポーネントを使う"
       ]
     },
     {
       "name": "KebabMenu",
       "path": "src/components/patterns/admin/kebab-menu.tsx",
-      "description": "テーブル行アクションメニュー（⋮ボタン）。編集・削除・複製等の行単位操作に使用。",
+      "description": "テーブル行アクションメニュー（⋮ボタン）。description / shortcut / disabled / separator / destructive item に対応。",
       "rules": [
-        "For table row actions only"
+        "For table row actions only",
+        "description は補足説明、shortcut は右側表示",
+        "{ type: \"separator\" } で区切り線を挿入"
       ]
     },
     {

package/dist/class-names.js

@@ -1,4 +1,4 @@
-import { b as o } from "./server-variants-Dr_V3bDI.js";
+import { b as o } from "./server-variants-qSBVrkGA.js";
 export {
   o as buttonVariants
 };