ksk-design-system 1.41.0 → 1.43.0

package/AGENTS.md

@@ -15,13 +15,18 @@
 コードを書く前に、以下を必ず読み込むこと:
 
 ```
-contracts/rules.json                     # 禁止パターン32件・AIアンチパターン10件・a11y要件
-contracts/components.json               # 全112コンポーネントの定義・バリアント・ルール
+.claude/skills/ksk-design-system/SKILL.md  # 判断Skill: 実装・レビューの判断基準（正本への索引）
+contracts/rules.json                     # 禁止パターン43件・AIアンチパターン10件・a11y要件
+contracts/components.json               # 全132コンポーネントの定義・バリアント・ルール
 contracts/design-context.json           # DESIGN.md と正本ファイルの関係・AI向け検査方針
 tokens.json                             # カラー・スペーシング・シャドウトークン
 src/components/COMPONENT_LOOKUP.md      # バリアント・インポートパス一覧（自動生成）
 ```
 
+UI コンポーネント・画面の生成/修正・レビューの前には、必ず
+`.claude/skills/ksk-design-system/SKILL.md` を読み、その判断基準に従うこと
+（トークン選定・コンポーネント選択・レビュー優先順位・例外運用。迷ったら同ディレクトリの `references/` を参照）。
+
 **必ず `contracts/rules.json` の `prohibited` と `aiPatterns` を確認してから実装すること。**
 特に `aiPatterns` は AI が典型的に犯すパターン集 — 自分が生成しようとしているコードと照合すること。
 
@@ -86,6 +91,22 @@ Brand色を差し替え（10行）→ Primitive Layer → Semantic Layer → Bri
 
 ---
 
+## AIモデルの使い分け方針
+
+| モデル | 用途 |
+|--------|------|
+| `claude-fable-5` | 最難関の設計・長時間エージェント作業のみ（高コストのため温存） |
+| `claude-opus-4-8` | 通常のUI実装・レビュー・リファクタの既定 |
+
+**検証ループを使う場合:** 実装 = Fable 5 / 検証 = Opus 4.8 のように実装者と検証者で別モデルを使う（同一モデルは同じバイアスを共有し独立検証にならない）。
+
+**Fable 5 使用時の注意:**
+- thinking は常時オン（パラメータ省略でデフォルトに任せる）
+- refusal 時は `fallbacks` で Opus 4.8 に自動フォールバック
+- 30日データ保持が必須
+
+---
+
 ## ドキュメント構成
 
 | ファイル | 内容 |

package/CLAUDE.md

@@ -51,6 +51,22 @@ Brand色を差し替え（10行）→ Primitive Layer → Semantic Layer → Bri
 
 ---
 
+## AIモデルの使い分け方針
+
+| モデル | 用途 |
+|--------|------|
+| `claude-fable-5` | 最難関の設計・長時間エージェント作業のみ（高コストのため温存） |
+| `claude-opus-4-8` | 通常のUI実装・レビュー・リファクタの既定 |
+
+**検証ループを使う場合:** 実装 = Fable 5 / 検証 = Opus 4.8 のように実装者と検証者で別モデルを使う（同一モデルは同じバイアスを共有し独立検証にならない）。
+
+**Fable 5 使用時の注意:**
+- thinking は常時オン（パラメータ省略でデフォルトに任せる）
+- refusal 時は `fallbacks` で Opus 4.8 に自動フォールバック
+- 30日データ保持が必須
+
+---
+
 ## ドキュメント構成
 
 | ファイル | 内容 |

package/NATIVE_RECIPES.md

@@ -184,3 +184,49 @@ Web では `CompactFilePicker` / `ImageAttachmentPicker` が hidden file input
   </BottomSheetFrame>
 </Sheet>
 ```
+
+## Caption / attribution text
+
+出典・著作権表示など、控えめな注釈は `Text` の `variant="caption-strong"` を使います（11px・font-semibold 相当）。`text-[11px] font-semibold leading-4 text-hint` のようなマジックナンバーをローカルに書きません。色は未指定なら自動で hint 相当（`text.low-emphasis`）になります。
+
+```tsx
+import { Text } from "ksk-design-system/native/ui"
+
+{citationOf(question) && (
+  <Text variant="caption-strong" style={{ marginTop: 12 }}>
+    {citationOf(question)}
+  </Text>
+)}
+```
+
+通常の注釈（強調不要）には既存の `variant="caption"`（11px・通常ウェイト）を使います。
+
+## Masked / teaser progress bars
+
+未課金ユーザー向けのティザー表示など、実データを見せたくない進捗バーは `Progress` の `masked` を使います。`masked=true` の間はバー幅・色ともに `value`/`autoColor` を無視し固定表示になるため、幅から実データを逆算されません。
+
+```tsx
+import { Progress, Text } from "ksk-design-system/native/ui"
+
+<Text variant="body.sm">{masked ? "🔒 ??%" : `${accuracy}%（${correct}/${answered}）`}</Text>
+<Progress value={accuracy} masked={masked} />
+```
+
+Web 版 `Progress`（`ksk-design-system` の `Progress`）にも同じ `masked` prop があります。
+
+## Static document viewer (privacy policy / terms)
+
+プライバシーポリシー・利用規約などの静的文書画面は `DocumentScreen` + `Prose` を使います。見出し・本文・最終更新日・戻るヘッダのタイポとスペーシングは DS 側で一元管理されるため、consumer は `sections` の原稿データだけ持てば済みます。
+
+```tsx
+import { DocumentScreen, Prose } from "ksk-design-system/native/ui"
+
+const POLICY_SECTIONS = [
+  { title: "個人情報の取得", body: ["本アプリは以下の情報を取得します。", "…"] },
+  { title: "個人情報の利用目的", body: ["取得した情報は次の目的で利用します。"] },
+]
+
+<DocumentScreen title="プライバシーポリシー" lastUpdated="2026年7月7日" onBack={() => navigation.goBack()}>
+  <Prose sections={POLICY_SECTIONS} />
+</DocumentScreen>
+```

package/README.md

@@ -1,10 +1,15 @@
 # KSK Design System
 
+[![npm version](https://img.shields.io/npm/v/ksk-design-system.svg)](https://www.npmjs.com/package/ksk-design-system)
+[![npm downloads/month](https://img.shields.io/npm/dm/ksk-design-system.svg)](https://npm-stat.com/charts.html?package=ksk-design-system)
+[![npm downloads total](https://img.shields.io/npm/dt/ksk-design-system.svg)](https://npm-stat.com/charts.html?package=ksk-design-system)
+[![license](https://img.shields.io/npm/l/ksk-design-system.svg)](./LICENSE)
+
 複数クライアント案件を **1つのデザインシステム** で高速に回すために設計された、React 製のマルチテーマ対応 UI ライブラリ。BtoB / SaaS の信頼感と EC / BtoC の購買体験、2つのドメインの設計思想を統合しています。
 
 **🔗 ライブ Storybook → https://ksk-design-system.vercel.app**
 
-125 コンポーネントを実際に操作・確認できます。
+133 コンポーネントを実際に操作・確認できます。
 
 ---
 
@@ -14,7 +19,7 @@
 - **アクセシブル** — shadcn/ui（Radix UI ベース）+ `@storybook/addon-a11y` で a11y を担保
 - **Tailwind CSS v4 ネイティブ** — `@theme` ベースのトークン設計
 - **型安全** — React 19 + TypeScript、CVA によるバリアント管理
-- **125 Web コンポーネント + 126 React Native exports** — Web 125（UI 57 / EC 11 / 管理 8 / シェル 3 / パターン 46）+ RN `native/ui` 公開 export 126
+- **133 Web コンポーネント + 134 React Native exports** — Web 133（UI 58 / パターン 52 / EC 12 / 管理 8 / シェル 3）+ RN `native/ui` 公開 export 134
 - **iOS 26 Liquid Glass 対応** — RN 側 `GlassView` + `Button variant="glass"`、Web 側 `.glass` CSS マテリアル
 
 ## 🎨 テーマ
@@ -131,7 +136,7 @@ import { BottomTabBar } from "ksk-design-system"
 
 ### React Native / Expo
 
-`ksk-design-system/native/ui` から直接 RN 用コンポーネント export（126 個）を import できます。iOS 26 の **Liquid Glass** にも対応:
+`ksk-design-system/native/ui` から直接 RN 用コンポーネント export（134 個）を import できます。iOS 26 の **Liquid Glass** にも対応:
 
 ```tsx
 import { ThemeProvider, Button, Card, GlassView } from "ksk-design-system/native/ui"
@@ -182,6 +187,21 @@ DS コンポーネントを最大限活用したモックが `src/prototypes/`
 - **npm**: https://www.npmjs.com/package/ksk-design-system
 - 設計思想・トークン体系の詳細は `CLAUDE.md` / `DESIGN.md` を参照
 
+## 📈 ダウンロード数
+
+npm の公開統計から、インストール数を確認できます。
+
+```bash
+npm run metrics                 # 直近の DL 数・推移・バージョン別内訳を表示
+npm run metrics -- --json       # 生データを JSON で出力
+npm run metrics -- --range last-year
+```
+
+- リアルタイムのグラフ: https://npm-stat.com/charts.html?package=ksk-design-system
+- README 冒頭のバッジは shields.io 経由で常時最新の月間 DL 数を表示
+
+> npm は匿名集計のため、CI やミラーの重複を含む **install 回数の目安** です（ユニークユーザー数ではありません）。
+
 ## 📄 ライセンス
 
 [MIT](./LICENSE) © 奥野圭祐 (Keisuke Okuno)

package/contracts/components.json

@@ -1,15 +1,15 @@
 {
   "meta": {
     "name": "KSK Design System — Component Contracts",
-    "version": "1.34.0",
+    "version": "1.43.0",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "counts": {
-      "ui": 58,
-      "patterns": 51,
+      "ui": 61,
+      "patterns": 52,
       "commerce": 12,
       "admin": 8,
       "shells": 3,
-      "total": 132
+      "total": 136
     }
   },
   "ui": [
@@ -72,6 +72,51 @@
         "Must use <Input> not <input>"
       ]
     },
+    {
+      "name": "CommitInput",
+      "path": "src/components/ui/commit-input.tsx",
+      "description": "IME(日本語変換)を壊さない Input の確定時コミット版。value + onCommit contract。store 直結の inline 編集で、変換中に onChange が store へ書き込んで変換が中断される問題を防ぐ。視覚は Input に完全委譲。共通ロジックは useCommitDraft フック。",
+      "variants": [],
+      "accessibility": [
+        "Must pair with <Label>"
+      ],
+      "rules": [
+        "value/onCommit contract。value は controlled、確定タイミングでのみ onCommit が呼ばれる",
+        "変換(composition)中は commit せず draft のみ更新。compositionEnd / 非変換入力時に commit",
+        "外部 value 変更は非変換中のみ draft へ反映(realtime 同期対応)",
+        "store 直結 controlled input で IME が壊れる場合に Input の代わりに使う"
+      ]
+    },
+    {
+      "name": "CommitTextarea",
+      "path": "src/components/ui/commit-textarea.tsx",
+      "description": "IME(日本語変換)を壊さない Textarea の確定時コミット版。value + onCommit contract。CommitInput と同じ流儀で compositionEnd / 非変換入力時のみ commit。視覚は Textarea に完全委譲。共通ロジックは useCommitDraft フック。",
+      "variants": [],
+      "accessibility": [
+        "Must pair with <Label>"
+      ],
+      "rules": [
+        "value/onCommit contract。value は controlled、確定タイミングでのみ onCommit が呼ばれる",
+        "変換(composition)中は commit せず draft のみ更新。compositionEnd / 非変換入力時に commit",
+        "外部 value 変更は非変換中のみ draft へ反映(realtime 同期対応)",
+        "store 直結 controlled textarea で IME が壊れる場合に Textarea の代わりに使う"
+      ]
+    },
+    {
+      "name": "CommitAutoGrowTextarea",
+      "path": "src/components/ui/commit-auto-grow-textarea.tsx",
+      "description": "IME(日本語変換)を壊さない AutoGrowTextarea の確定時コミット版。value + onCommit contract。AutoGrowTextarea の onChange は (value:string) を渡すため変換中判定は内部 composingRef のみで行う。視覚・auto-grow は AutoGrowTextarea に完全委譲。共通ロジックは useCommitDraft フック。",
+      "variants": [],
+      "accessibility": [
+        "Must pair with <Label>"
+      ],
+      "rules": [
+        "value/onCommit contract。value は controlled、確定タイミングでのみ onCommit が呼ばれる",
+        "変換(composition)中は commit せず draft のみ更新。compositionEnd / 非変換入力時に commit",
+        "外部 value 変更は非変換中のみ draft へ反映(realtime 同期対応)",
+        "store 直結 controlled AutoGrowTextarea で IME が壊れる場合に代わりに使う"
+      ]
+    },
     {
       "name": "Calendar",
       "path": "src/components/ui/calendar.tsx",
@@ -1275,12 +1320,14 @@
     {
       "name": "CountdownHero",
       "path": "src/components/patterns/countdown-hero.tsx",
-      "description": "装飾的な serif 数字で目標日までの残日数を表示するヒーロー表示。belle-todo の CountdownSection を参考に、日付編集フォーム・wedding イラスト・i18n・store は持ち込まず表示専用に再設計（Issue #110）。",
+      "description": "装飾的な serif 数字で目標日までの残日数を表示するヒーロー表示。belle-todo の CountdownSection を参考に、日付編集フォーム・wedding イラスト・i18n・store は持ち込まず表示専用に再設計（Issue #110）。dateLabel prop で数字の下に目標日そのもの（消費側でフォーマット）を、todayValue prop で当日に数字 0 の代わりの文言を表示できる（Issue #118）。",
       "features": [
         "large-serif-number",
         "today-past-active-states",
         "illustration-slot",
-        "iso-string-or-date-target"
+        "iso-string-or-date-target",
+        "date-label-slot",
+        "today-value-override"
       ],
       "rules": [
         "既存の CountdownTimer（残日数ピル表示）とは別コンポーネント。装飾ヒーロー表示専用で置き換えない。",
@@ -1589,6 +1636,25 @@
         "フォーム/詳細の中身は DetailSheetScaffold と KeyboardAwareSheetFooter を使う"
       ]
     },
+    {
+      "name": "SideDrawerFrame",
+      "path": "src/components/patterns/side-drawer-frame.tsx",
+      "description": "SheetContent(side=right/left) の詳細ドロワー outer frame preset。全高・padding無し・flex縦・幅md を1つの口でまとめる。PC の右詳細ドロワー用（モバイルの下部シートは BottomSheetFrame）。swipeToClose は side に追従した方向で閉じる。",
+      "variants": [
+        "left",
+        "right"
+      ],
+      "features": [
+        "full-height side drawer",
+        "flex column scroll composition",
+        "side-following swipe-to-close"
+      ],
+      "rules": [
+        "詳細ドロワーの className 上書き（p-0 w-full max-w-md flex flex-col overflow-hidden）を consumer 側に重複させず SideDrawerFrame を使う",
+        "中身は DetailSheetScaffold + 固定フッタで組む（本文 flex-1 overflow-y-auto）",
+        "モバイルの下から出る詳細/フォームは BottomSheetFrame を使う"
+      ]
+    },
     {
       "name": "SettingsSection / SettingsListRow",
       "path": "src/components/patterns/settings-section.tsx",