@ubie/vitals-ui-business 0.4.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,157 @@
 # @ubie/vitals-ui-business
 
+## 0.6.0
+
+### Minor Changes
+
+- a1a7302: リンクの hover とフォーカスを、色の薄化ではなく下線で示すようにした。
+
+  `<a>`・`Typography.Link`・`Typography` の操作（コピー・編集・展開）・`Button variant="link"` の
+  4 つが同じ体裁で揃う。hover の色は平常時と同じリンク色を保ち、押下中だけ濃い色になる。
+
+  変更前は antd の既定で hover に自動生成の明色（`#8aa4e6`）が当たり、白背景でのコントラストが
+  2.46:1 と WCAG AA の 4.5:1 どころか非テキストの 3:1 も割っていた。変更後はどの状態でも 6.04:1 を保つ。
+
+  **テーマのトークン**（`businessTheme` に含まれる。個別の指定は不要）
+
+  - `colorLinkHover`: 自動生成の明色 → `colorLink` と同値
+  - `linkHoverDecoration`: `none` → `underline`
+  - `linkFocusDecoration`: `none` → `underline`
+  - `linkDecoration`（平常時）: `none` のまま
+
+  **配る CSS が増える**
+
+  `Button variant="link"` は text-decoration 系のトークンを読まないため、`UbieConfigProvider` が
+  hover / focus / 押下中の下線を CSS で配る。あわせて、無効なリンク（`Typography.Link disabled` と
+  `href` 付きの無効な Button link。どちらも `<a>` として描かれ `disabled` 属性を持たない）からは
+  下線を戻すルールも配る。antd の無効時のルールは色しか戻さないため、これが無いと押せないリンクにも
+  下線が出る。
+
+  `UbieConfigProvider` を使わず `ConfigProvider` に `businessTheme` を直接渡す構成では当たらない。
+
+  **利用側で要る対応**
+
+  画面側の CSS で `:hover { text-decoration: ... }` や hover の色を個別に指定している箇所は、
+  specificity でこの既定より勝つため体裁が揃わない。削除して既定に寄せる。
+  規約は `docs/patterns/link.md`、判断の背景は ADR 0007。
+
+  トークンの追加・削除・リネームは無し。
+
+- 5824e7e: `Table` のセルの中に置いた `Typography` にセルの文字サイズ（`cellFontSize` = 14px）を継がせる
+
+  - **修正**: これまでセルの中の `Typography.Text` / `Paragraph` / `Link` は、セル（14px）ではなく
+    グローバルの本文サイズ（`businessTypography` の 16px）で描かれていた。表のセルはほぼ必ず中身を
+    `Typography` で包むため、`cellFontSize` の存在意義（一覧の密度、日時列を折り返させない）が
+    既定では成立していなかった。`Table` が「セルの中の `Typography`（見出し以外）は `font-size: inherit`」
+    という 1 本の CSS ルールを配るようにした。**利用側の変更は不要**
+  - **挙動の変化**: セルの中の `Typography.Text` / `Paragraph` / `Link` が 16px → 14px になる。
+    既に `style={{ fontSize: "inherit" }}` を当てていた箇所はそのままでよい（inline が勝ち、値は同じ）。
+    セルの中で本文サイズを保ちたい箇所があれば `style={{ fontSize: token.fontSize }}` を明示する
+  - **対象外**: `Typography.Title`（見出しトークンが正）、`Tag`（`fontSizeSM` を自前で持つ）、
+    および `Button` / `Input` / `Select` などのコントロール。コントロールは文字サイズが高さ・余白の算出に
+    噛んでいるため `Table` 側では触らない。表の文字サイズに合わせたいときは従来どおり
+    `style={{ fontSize: "inherit" }}` を当てる（`size="small"` にしても文字は縮まない）
+  - **追加**: `Table` が描く表の `rootClassName` に `ubie-vitals-table` が付く。上のルールを
+    この `Table` が描いた表だけに閉じるための目印で、同じページの他の antd Table には影響しない。
+    利用側が渡した `rootClassName` はそのまま残る
+  - **文書**: `docs/components/table.md` に「セルの中の文字サイズ」を新設し、継ぐもの・継がないものと
+    上書きの仕方を書いた。旧記述（`cellFontSize` が効かないのは `Button` だけ）は不正確だったので訂正した。
+    機構・代替案・実測は
+    https://github.com/ubie-inc/ubie-vitals/blob/main/docs/adr/0005-cell-font-size-inheritance-in-table.md
+  - **古いブラウザ**: セレクタを解釈できないブラウザではルールごと捨てられ、この修正前の挙動
+    （セルの中身が本文サイズ）に戻るだけ。レイアウトが壊れる方向の失敗は無い
+
+- 69add7f: 対応ブラウザの下限（Chrome 85 / Edge 92 / Firefox 109 / Safari 15 / iOS Safari 15.1）を UI Business 側で保証する
+
+  下限の正本は [aimon-genius-fe の `.browserslistrc`](https://github.com/ubie-inc/aimon-genius-fe/blob/main/.browserslistrc)
+  （各病院での利用実績で決まっている）。antd 6 が出す CSS はこの下限を 2 点で割っていたので、
+  UI Business 側で引き受けた。**`UbieConfigProvider` をアプリの最上位に置いていれば、利用側の変更は不要。**
+
+  - **修正**: `UbieConfigProvider` が論理プロパティ（`padding-inline` / `inset-inline-start` …）を
+    物理プロパティに落とすようになった。Chrome 85〜88 ではこれらの宣言が丸ごと無視され、
+    **余白と位置が崩れていた**。aimon-genius-fe の `AntdCompatProvider` 相当をパッケージ側に移した形で、
+    利用側が既に置いている transformer（`px2rem` など）は落とさない
+  - **挙動の変化**: `businessTheme` が `hashed: false` を持ち、antd が出すセレクタが
+    `:where(.css-<hash>).ant-x{…}` から `.ant-x{…}` になる。**ハッシュクラスが DOM から消える**ので、
+    これを選択子にしているコードや E2E があれば直す。specificity（0-1-0）と挿入順は変わらないため、
+    CSS module のクラスや `style` での上書きの効き方はこれまでと同じ
+  - **追加**: `StyleProvider` / `legacyLogicalPropertiesTransformer` / `px2remTransformer` / `extractStyle` を
+    再 export した。antd は `@ant-design/cssinjs` を再エクスポートしないため、`ConfigProvider` に
+    `businessTheme` を直接渡す構成や SSR のスタイル抽出で必要になる
+  - **依存**: `@ant-design/cssinjs`（`^2.1.2`、antd 6.5.1 と同じ範囲）を直接依存に足した
+
+  **注意が 2 つある。**
+
+  - `ConfigProvider` に `businessTheme` を直接渡す構成では論理プロパティの変換が当たらない。
+    その場合は再 export した `StyleProvider` / `legacyLogicalPropertiesTransformer` を利用側で置く:
+    `<StyleProvider transformers={[legacyLogicalPropertiesTransformer]}>`
+  - cssinjs のスタイルキャッシュは transformer を鍵に含めない。同一ページで変換あり・なしの
+    `StyleProvider` が混在すると**先に生成された CSS が両方で使われる**ので、変換はアプリの root で
+    一度だけ当てる
+
+  **残る劣化。** `:has()` と `:focus-visible` が Chrome 85 / Safari 15〜15.3 で効かず、
+  フォーカス表示が出ない。`:focus` へのフォールバックは対応ブラウザでマウス操作時にも枠が出る
+  別の劣化を招くため入れていない。その他は見た目の劣化にとどまる。
+  一覧と理由は `browserSupport.test.tsx` の `KNOWN_GAPS`、判断の経緯は
+  https://github.com/ubie-inc/ubie-vitals/blob/main/docs/adr/0006-browser-support-floor-in-ui-business.md
+
+### Patch Changes
+
+- c4a7179: 参照層に「実行環境の前提（ブラウザのナビゲーションとブックマーク）」（`docs/principles/runtime-environment.md`）を追加する。
+
+  業務プロダクトは、戻る・進む・リロード・アドレスバー・ブックマークバーが画面に無い状態で使われることがある（基幹システムの起動ボタンから起動オプション付きでブラウザを開く構成、キオスク端末、別アプリへの埋め込み）。実際に報告されている 2 つの事象（ナビゲーションが表示されない / ブックマークが永続しない）を前提として記録し、戻る・再試行・再訪の手段をアプリ内に持たせる帰結を 4 つ挙げた。**導入先すべてではなく、割合も原因も分かっていない**という限定条件は原則の文面に残している。
+
+  参照層の判断軸そのものは消していない。「URL 共有・ブックマークしたいか」を Drawer と別ページの分岐軸にする判断はそのまま残し、それがブラウザのナビゲーションが使える環境を前提にしていることの注記と読み替えを足した。一方で「直リンクで配信したい」は、外からの入口の要件でナビゲーションの有無とは独立に効くため、URL 共有・ブックマークと同じ扱いから分離した（Drawer は直リンクで開けないので別ページを選ぶ。ただし唯一の入口にしない）。
+
+  | 文書                            | 追記                                                                                                                                   |
+  | ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+  | `docs/patterns/disclosure.md`   | 別ページ遷移の分岐点と「URL 共有・ブックマークしたい」が前提にしていること。「直リンクで配信したい」は環境に依らず効く軸として区別した |
+  | `docs/patterns/list-detail.md`  | 絞り込みの URL 復元を、戻る操作を唯一の手段にしない形に                                                                                |
+  | `docs/patterns/skeleton.md`     | モーダルドロワーの開閉を URL に載せる判断の読み替え                                                                                    |
+  | `docs/patterns/region-state.md` | 復帰を「ページを再読み込みしてください」に任せない                                                                                     |
+  | `docs/components/drawer.md`     | 「URL 共有・ブックマーク → 別ページ」の前提と、直リンク配信を独立の行に分離                                                            |
+  | `docs/components/layout.md`     | 上位階層へ戻る導線の置き場を骨格の中に決めておく Do                                                                                    |
+
+  8 原則（`docs/principles/ux-principles.md`）と採点の枠（`docs/principles/scorecard.md`）は変えていない。新しい原則は P3 / P8 に紐づく。
+
+## 0.5.0
+
+### Minor Changes
+
+- dc8d246: グラフの系列色 `chartSeriesColors` と、グラフの規則 docs/patterns/chart.md を追加する。
+
+  - **追加**: `chartSeriesColors`。`cool`（寒色 4 色。各位置が `base` と 2 値の内訳用の `shade` を持つ）/ `warm`（暖色主体 4 色）/ `neutral`（`unset` / `other` / `total`）/ `printRamp`（モノクロ印刷でグラフの塗りを差し替えるグレーのランプ）。値はすべて `@ubie/vitals-token` の primitive。プライマリ・意味色と同じ段の primitive と hospital accent（sky-500 を除く）は含まず、`cool` の主・`warm`・`unset` は白地で 3:1 以上（テストで固定）
+  - **追加**: docs/patterns/chart.md。形の選び方（積み上げ可否は「合計に意味があるか」）/ 表の併置と凡例順 = 表順 / 色相スロットは 4（上位 4 + その他）と全 0 系列の扱い / 色の系統と「同じ系列は常に同じ色」/ 意味色・hospital accent との距離 / 集計中の別塗り + ラベル / `role="img"` と描画アニメーションの停止 / モノクロ印刷はグレーのランプ + 表 / グラフ単位の [画像を保存]
+  - **追加**: Storybook `Patterns/Chart`（Stacked / Grouped / AllZero / Palette）。描画は素の SVG で、ライブラリに依存しない
+  - docs/tokens.md「選ぶ順」に「グラフの系列色 → `chartSeriesColors`」の分岐を追加
+
+- 84ecd94: `jaJP` ロケールを再 export し、docs/tokens.md「選ぶ順」に寸法（余白 / 幅 / 高さ）の分岐を、DESIGN.md の立ち上げに CSS 変数と Storybook decorator の手順を足す。
+
+  - **追加**: `jaJP`（antd の `ja_JP` ロケール）。`UbieConfigProvider` の `locale` に渡す。これまで `antd/locale/ja_JP` を直接 import する必要があった
+  - 寸法: 部品の内側は `size` prop、部品の間は `Flex gap` / `Space size` に `margin*` トークン、面の内側は `padding*`、幅は `Col span` / `controlHeight` / 表の列幅、高さは `controlHeight*`。余白・幅・高さの数値をコードに書くのは表の列幅と印刷の紙寸法を除いて禁止
+  - 文字: 補足・注記・脚注・グラフの目盛は `fontSizeSM`。それより小さい文字を作らない。文字サイズの数値をコードに書かない
+  - 立ち上げ 2: `locale={jaJP}`。立ち上げ 5: CSS 変数は `UbieConfigProvider` を通した時点で出ているので `cssVar` の指定は不要、`StyleProvider` が要るときだけ `@ant-design/cssinjs` を依存に足して直接 import する。立ち上げ 6: Storybook decorator は `UbieConfigProvider` → `App` → `Layout` > `Layout.Content`
+
+### Patch Changes
+
+- c2b7b22: 集計画面で自作になりがちな 4 つの規則を docs/ に足し、開示と表のカードに追記する。
+
+  - **新設** docs/patterns/print.md: 画面と印刷の切り替え（`screenOnly` / `printOnly`）、印刷から外す部品、骨格の高さ制約の解き方、`@page` と改ページ、各頁のフッタ、白黒前提、Storybook での確認法と限界
+  - **新設** docs/patterns/region-state.md: 区画をリクエスト単位で切る、`Skeleton` の形を中身に合わせる、失敗は数字を出さず `Alert` に、文言の型、再試行は `Alert` の `action` に
+  - **新設** docs/patterns/empty-state.md: 一覧が空 / 集計が 0 / 区画が取得できない の 3 つを見分け、理由と次の行動は数字の隣に置く、閾値は仕様側が持つ
+  - **新設** docs/components/statistic.md: 指標名・主数字・補足・推移の 1 枚の構成、1 段の枚数、`gutter` と折り返し、印刷では grid
+  - docs/patterns/disclosure.md: パターン表に「脚注」を追加、Tooltip に入れてよい情報の 5 問目「印刷・エクスポートに載らなくてよいか」
+  - docs/components/table.md: 「数値の列・合計・比較」（右寄せ・単位は見出し・合計は `summary`・横棒は数値併記・ピボット表の先頭列固定）
+
+- 8e6f29f: docs/patterns/skeleton.md に補助型「区画」（Content の中を複数の主題に分ける構造）を追加する。
+
+  - 見出しのサイズを `Title` の `level` で固定（画面タイトル `level={3}` → 区画 `level={4}` → 面の中の小見出し `level={5}` → 補足は `fontSizeSM`）。区画の見出しを `Card` の `title` で代用しない
+  - 区画 = 見出し + 補足 + 白地の面の列。余白はトークン（`marginXL` / `marginMD` / `marginXXS`）。読み込みと失敗は区画単位で、失敗は数字を出さず `Alert` にする
+  - 開閉は既定で開いたまま。閉じられるようにするなら `Collapse` で統一し、既定を開にする
+  - 区画へのアンカー: 横向き `Anchor` は追従（`affix`）で置く。非追従にすると選択中の項目が変わるたびに自身へスクロールし、ページを下へスクロールできなくなる。`offsetTop` / `targetOffset` は固定ヘッダ + `marginXS`、内側スクロールなら `getContainer`。閉じた区画へ到達したら開く
+  - センタリング型の使う条件から「印刷」を外し、印刷は区画の構造をそのまま写す様式とした
+  - Storybook `Patterns/Section`（区画 / 区画 + アンカー / 区画 + 開閉）を追加
+
 ## 0.4.0
 
 ### Minor Changes

package/DESIGN.md

@@ -9,55 +9,66 @@ antd と Ant Design X の公開 API をそのまま再 export し、共通のテ
 - `antd` から直接ではなく `@ubie/vitals-ui-business` から import する
 - アイコンは `@ant-design/icons` の `*Outlined` から選ぶ。`@ant-design/icons` を直接 import しない。塗りが要るときと、antd に絵柄が無いとき（`@ubie/vitals-icon`）の落とし方は `docs/components/icon.md`
 - 色・寸法の値をプロダクトのコードに書かない。正本はトークンとテーマにある（`docs/tokens.md`）
+- `UbieConfigProvider` はアプリの最上位に置く。antd が対応ブラウザの下限を割るぶんの調整がここに入っている
 - アプリ固有の逸脱は、そのプロダクトのリポジトリに書く
 
 ## 何をするときに何を読むか
 
-| したいこと                   | 読むもの                                                                                                                              |
-| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| プロダクトを立ち上げる       | 下の「立ち上げ」                                                                                                                      |
-| 画面を 1 枚足す              | 骨格は `docs/patterns/skeleton.md` → 一覧と詳細の関係は `docs/patterns/list-detail.md` → 情報の出し方は `docs/patterns/disclosure.md` |
-| 部品の使い方を確かめる       | `docs/components/`（Table / Layout / Modal / Drawer / チャット / アイコン）                                                           |
-| アイコンを選ぶ               | `docs/components/icon.md`                                                                                                             |
-| 色・寸法を決める             | `docs/tokens.md`                                                                                                                      |
-| 設計や実装を見直す・採点する | `docs/principles/`                                                                                                                    |
+| したいこと                       | 読むもの                                                                                                                                    |
+| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| プロダクトを立ち上げる           | 下の「立ち上げ」                                                                                                                            |
+| 画面を 1 枚足す                  | 骨格と区画は `docs/patterns/skeleton.md` → 一覧と詳細の関係は `docs/patterns/list-detail.md` → 情報の出し方は `docs/patterns/disclosure.md` |
+| 部品の使い方を確かめる           | `docs/components/`（Table / Layout / Modal / Drawer / Statistic / チャット / アイコン）                                                     |
+| アイコンを選ぶ                   | `docs/components/icon.md`                                                                                                                   |
+| 色・寸法を決める                 | `docs/tokens.md`                                                                                                                            |
+| グラフを置く                     | `docs/patterns/chart.md`。系列色は `chartSeriesColors`                                                                                      |
+| 戻る・再試行・再訪の導線を決める | `docs/principles/runtime-environment.md`                                                                                                    |
+| 設計や実装を見直す・採点する     | `docs/principles/`                                                                                                                          |
 
 ## 索引
 
 ### テーマ
 
-| 名前                 | 場所                              | 役割                                                                                                                             |
-| -------------------- | --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| `businessTheme`      | `src/theme/businessTheme.ts`      | ToB プロダクト共通の antd テーマ。`antdTheme` の token 層（色）+ `businessTypography`（文字）+ Layout / Table の components 既定 |
-| `businessTypography` | `src/theme/businessTypography.ts` | ToB の文字の正本。書体スタック・本文 16px 基準の見出しスケール・行間。toC の `@ubie/vitals-token-consumer` とは正本が別          |
-| `UbieConfigProvider` | `src/UbieConfigProvider.tsx`      | `businessTheme` を既定で当てる ConfigProvider。利用側の `theme` は差分として重なる                                               |
+| 名前                 | 場所                              | 役割                                                                                                                                              |
+| -------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `businessTheme`      | `src/theme/businessTheme.ts`      | ToB プロダクト共通の antd テーマ。`antdTheme` の token 層（色）+ `businessTypography`（文字）+ Layout / Table の components 既定                  |
+| `businessTypography` | `src/theme/businessTypography.ts` | ToB の文字の正本。書体スタック・本文 16px 基準の見出しスケール・行間。toC の `@ubie/vitals-token-consumer` とは正本が別                           |
+| `UbieConfigProvider` | `src/UbieConfigProvider.tsx`      | `businessTheme` を既定で当てる ConfigProvider。利用側の `theme` は差分として重なる                                                                |
+| `chartSeriesColors`  | `src/theme/chartSeriesColors.ts`  | グラフの系列色。2 系統（`cool` / `warm`、色相 4 ずつ、`cool` は主・従の 2 段）+ `neutral` + 印刷用 `printRamp`。使い方は `docs/patterns/chart.md` |
 
 ### コンポーネント
 
 antd の同名コンポーネントに既定を足したもの、および antd に対応物がない部品。
 
-| 名前                | 場所                                         | antd との差分                                                                                        | カード                     |
-| ------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------------------- | -------------------------- |
-| `Table`             | `src/components/Table/index.tsx`             | `rowActions` / `revealOnHover` / `disableHoverEffect`、`size="small"` 既定                           | `docs/components/table.md` |
-| `ChatBubble`        | `src/components/ChatBubble/index.tsx`        | `evidence` / `timestamp` / `timestampFormat` / `onRetry` / `retryLabel` を `footer` / `extra` に合成 | `docs/components/chat.md`  |
-| `ChatConversations` | `src/components/ChatConversations/index.tsx` | `emptyState`（未指定なら antd の `Empty`）                                                           | `docs/components/chat.md`  |
+| 名前                | 場所                                         | antd との差分                                                                                                    | カード                     |
+| ------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | -------------------------- |
+| `Table`             | `src/components/Table/index.tsx`             | `rowActions` / `revealOnHover` / `disableHoverEffect`、`size="small"` 既定、セル内 `Typography` の文字サイズ継承 | `docs/components/table.md` |
+| `ChatBubble`        | `src/components/ChatBubble/index.tsx`        | `evidence` / `timestamp` / `timestampFormat` / `onRetry` / `retryLabel` を `footer` / `extra` に合成             | `docs/components/chat.md`  |
+| `ChatConversations` | `src/components/ChatConversations/index.tsx` | `emptyState`（未指定なら antd の `Empty`）                                                                       | `docs/components/chat.md`  |
 
 ### 文書
 
-| 文書                        | 場所                                    |
-| --------------------------- | --------------------------------------- |
-| 体験設計の 8 原則と採点の枠 | `docs/principles/README.md`             |
-| 情報設計の原則              | `docs/principles/information-design.md` |
-| トークンの優先順位          | `docs/tokens.md`                        |
-| Table カード                | `docs/components/table.md`              |
-| 画面骨格 5 型               | `docs/patterns/skeleton.md`             |
-| 情報の開示パターン          | `docs/patterns/disclosure.md`           |
-| 一覧と詳細                  | `docs/patterns/list-detail.md`          |
-| Layout カード               | `docs/components/layout.md`             |
-| Modal カード                | `docs/components/modal.md`              |
-| Drawer カード               | `docs/components/drawer.md`             |
-| チャット                    | `docs/components/chat.md`               |
-| Icon カード                 | `docs/components/icon.md`               |
+| 文書                         | 場所                                     |
+| ---------------------------- | ---------------------------------------- |
+| 体験設計の 8 原則と採点の枠  | `docs/principles/README.md`              |
+| 情報設計の原則               | `docs/principles/information-design.md`  |
+| 実行環境の前提               | `docs/principles/runtime-environment.md` |
+| トークンの優先順位           | `docs/tokens.md`                         |
+| Table カード                 | `docs/components/table.md`               |
+| 画面骨格 5 型と区画          | `docs/patterns/skeleton.md`              |
+| 情報の開示パターン           | `docs/patterns/disclosure.md`            |
+| 一覧と詳細                   | `docs/patterns/list-detail.md`           |
+| グラフ                       | `docs/patterns/chart.md`                 |
+| 区画の状態（読み込み・失敗） | `docs/patterns/region-state.md`          |
+| 空状態                       | `docs/patterns/empty-state.md`           |
+| 印刷様式                     | `docs/patterns/print.md`                 |
+| リンクの体裁                 | `docs/patterns/link.md`                  |
+| Statistic カード             | `docs/components/statistic.md`           |
+| Layout カード                | `docs/components/layout.md`              |
+| Modal カード                 | `docs/components/modal.md`               |
+| Drawer カード                | `docs/components/drawer.md`              |
+| チャット                     | `docs/components/chat.md`                |
+| Icon カード                  | `docs/components/icon.md`                |
 
 ### 描画カタログ
 
@@ -65,11 +76,13 @@ Storybook: https://ubie-inc.github.io/ubie-vitals/ui-business （main への pus
 コンポーネントは Storybook の "Business/" グループ、パターンの実演は "Patterns/" グループにある。
 
 - コンポーネント: `src/stories/business/Table.stories.tsx`・`src/stories/business/Chat.stories.tsx`・`src/stories/business/Icon.stories.tsx`
-- パターンの実演: `src/stories/patterns/Skeleton.stories.tsx`・`src/stories/patterns/Disclosure.stories.tsx`・`src/stories/patterns/ListDetail.stories.tsx`
+- パターンの実演: `src/stories/patterns/Skeleton.stories.tsx`・`src/stories/patterns/Section.stories.tsx`・`src/stories/patterns/Disclosure.stories.tsx`・`src/stories/patterns/ListDetail.stories.tsx`・`src/stories/patterns/Chart.stories.tsx`・`src/stories/patterns/Link.stories.tsx`
 
 ## 立ち上げ
 
 1. 依存を入れる: `pnpm add @ubie/vitals-ui-business react react-dom`
-2. アプリの最上位を `UbieConfigProvider` で包む。`antd` ではなく `@ubie/vitals-ui-business` から import する
+2. アプリの最上位を `UbieConfigProvider` で包み、`locale={jaJP}` を渡す。`jaJP` も `UbieConfigProvider` も `@ubie/vitals-ui-business` から import する（`antd/locale/*` を直接 import しない）
 3. アプリ固有のテーマ差分（ヘッダー高さなど）は `UbieConfigProvider` の `theme` に差分だけ渡す。書き方は `docs/tokens.md`
 4. 骨格は `docs/patterns/skeleton.md` の 5 型から選ぶ。一覧と詳細の組み立ては `docs/patterns/list-detail.md`、情報の出し方は `docs/patterns/disclosure.md`、部品の用法は `docs/components/` にある
+5. CSS module から antd の値を参照するときは CSS 変数（`--ant-*`）をそのまま使う。`UbieConfigProvider` を通した時点で出ているので `cssVar` の指定は要らない。スタイルの挿入順や変換を触る `StyleProvider` が要るときは `@ubie/vitals-ui-business` から import する（`@ant-design/cssinjs` を直接依存に足さない）。対応ブラウザのための変換は `UbieConfigProvider` が既に通しているので、アプリの root で 1 度だけ当てる
+6. Storybook で描くときは decorator で `UbieConfigProvider` → `App` → `Layout` > `Layout.Content` の順に包む。`Layout` が無いと `Layout.bodyBg` が当たらず、面の外側が白いまま描かれる（`docs/components/layout.md`）