@squadbase/vantage 0.6.2-dev1.54bde93 → 0.6.2-dev1.5c79ef5

package/skills/vantage-design/SKILL.md

@@ -1,28 +1,31 @@
 ---
 name: vantage-design
-description: Vantage(@squadbase/vantage)アプリの見た目の意図 `DESIGN.md` と、実際の値を持つ `styles.css` をまとめて作る / 更新する手順。配色・ブランドカラー・テーマ・チャートの色・フォント・角丸・トーンを変えたいとき、既存サイトやロゴ・資料・外部の DESIGN.md に合わせたいとき、プロジェクト作成時の初期デザイン(テーマ neutral / ocean / forest / sunset / violet / rose / mono)を決めるときに使う。「色を変えて」「ブランドに合わせて」「このサイトに合わせて」「落ち着いた感じに」「フォントを変えて」「テーマを作って」「DESIGN.md を作って」、"change the colors", "match our brand", "match this website", "theme", "color palette", "font", "design system", "DESIGN.md" で起動。
+description: Vantage(@squadbase/vantage)アプリのテーマ(色・チャートの色・書体・角丸)を、`styles.css` とテーマコマンドで作る / 更新する手順。配色・ブランドカラー・テーマ・チャートの色・フォント・角丸・トーンを変えたいとき、既存サイトやロゴ・資料に合わせたいとき、プロジェクト作成時の初期デザイン(テーマ neutral / ocean / forest / sunset / violet / rose / mono)を決めるときに使う。「色を変えて」「ブランドに合わせて」「このサイトに合わせて」「落ち着いた感じに」「フォントを変えて」「テーマを作って」、"change the colors", "match our brand", "match this website", "theme", "color palette", "font", "design system" で起動。
 ---
 
-# DESIGN.md と styles.css をまとめて更新する
+# テーマと styles.css を更新する
 
-Vantage アプリの見た目は 2 つのファイルで決まる。
+Vantage アプリの色・書体・角丸の値と色の割り当ては、SquadKit のテーマだけが持つ。
 
-| ファイル | 持つもの | 所有者 |
-| --- | --- | --- |
-| `DESIGN.md`(プロジェクトルート) | 意図とルール。**トークン名だけ**を書き、色コードは書かない(150 行以内) | ユーザー |
-| `styles.css`(ページと同じ側。通常 `src/styles.css`) | トークンの実際の値(`:root` と `.dark`) | ユーザー |
+| 手段 | 何を決めるか |
+| --- | --- |
+| ThemeDialog / `theme <id>` / `chart <preset>`(CLI) | 出発点のテーマとチャートの配色 |
+| `styles.css`(ページと同じ側。通常 `src/styles.css`)の `/* squadkit-theme:end */` より後ろ | ブランド色・書体など、テーマに無い値の上書き |
 
-**2 つは必ず同じステップで更新する。** 片方だけ直すと、次にページを書くエージェントが古い意図に
-従ってしまう。デザイン変更の依頼をページ単位の `className` 修正で済ませない。
+デザイン変更の依頼(「もっと落ち着いた色に」など)は、**テーマの切り替えかスタイルシートの上書きで完結させる。**
+`DESIGN.md` へは記録しない。今のテーマ名は `styles.css` の `/* theme: <name> */` マーカーから読む。
+ページ単位の `className` 修正で済ませない。
 
-一般規約(トークンで色を書く・設定ファイルを作らない)は `AGENTS.md` が正本。ここでは手順だけを扱う。
+見た目の規則(意味トークンの使い分け・カードで包む・KPI → チャート → 表など)は `AGENTS.md` の
+「見た目の規約」節が正本。ここでは手順だけを扱い、規則は重複させない。
+任意の `DESIGN.md`(ユーザー固有の意図を書くファイル)は、ユーザーが望んだときだけ扱う(`references/format.md`)。
 
 ## リファレンス
 
 | ファイル | 読む場面 |
 | --- | --- |
-| `references/format.md` | `DESIGN.md` を書く / 直すとき(書式・節の順番・雛形) |
-| `references/extract.md` | URL・画像・pptx/pdf・言葉・外部 DESIGN.md から色と書体を取り出すとき |
+| `references/format.md` | ユーザーが任意の `DESIGN.md` を望んだとき(位置づけと優先順位) |
+| `references/extract.md` | URL・画像・pptx/pdf・言葉から色と書体を取り出すとき |
 | `references/presets.md` | テーマ(`neutral` / `ocean` / `forest` / `sunset` / `violet` / `rose` / `mono`)の選び方と `theme` コマンド。旧プリセット id の読み替え |
 | `scripts/contrast.mjs` | 文字色と背景色のコントラスト比を確かめるとき |
 
@@ -30,24 +33,23 @@ Vantage アプリの見た目は 2 つのファイルで決まる。
 
 ### 1. 入力を集める
 
-- 何に合わせるのか(URL・ロゴ画像・資料・言葉・外部の `DESIGN.md`)を確認し、
+- 何に合わせるのか(URL・ロゴ画像・資料・言葉)を確認し、
   `references/extract.md` の該当する節の手順で色・書体・トーンを取り出す。
-- 既存の `DESIGN.md` と `styles.css` を読む。既にあるルールで今回触らないものは残す。
+- 既存の `styles.css` を読み、マーカーから今のテーマ名を確かめる。今回触らない上書きは残す。
+- プロジェクトルートに `DESIGN.md` があれば読む(ユーザー所有。書き換えない)。色の割り当てはテーマが優先。
 - スライド(`*.slide.tsx`)があるかを `ls` / `vantage routes` で確認しておく。
 
 ### 2. 提案して確認を取る
 
 書き込む前に、次の 2 つをユーザーに見せて確認を取る。
 
-- **役割 → トークンの対応表**(主色・強調・良い/悪い/注意・背景の段階・文字・チャート 5 色・書体)。
+- **役割 → トークンの対応表**(主色・背景の段階・文字・チャート 5 色・書体。良い/悪い/注意/情報/中立はテーマの意味トークンに任せる)。
   各行に「何に合わせてその色にしたか」を 1 語添える。
-- **トーンの説明**(2〜3 行。`DESIGN.md` の「全体のトーン」にそのまま入る文)。
+- **トーンの説明**(2〜3 行)。
 
 テーマで足りる場合はテーマ id(`references/presets.md`)で提案してよい。旧プリセット id(`default` / `calm` / `vivid` / `mono`)で頼まれたら新 id に読み替える。
 
-### 3. styles.css と DESIGN.md を同じステップで書く
-
-`styles.css`:
+### 3. テーマを当て、styles.css を書く
 
 - **テーマ範囲・チャート範囲のマーカーの中は手で編集しない。** 色・角丸・書体の出発点は 7 テーマ
   (`neutral` / `ocean` / `forest` / `sunset` / `violet` / `rose` / `mono`)から選び、コマンドで当てる:
@@ -100,10 +102,6 @@ Vantage アプリの見た目は 2 つのファイルで決まる。
 長い表(ダッシュボード): カードに `max-h-*` + `overflow-y-auto` の縦スクロール領域を作らず、
 ページング付きの `DataTablePreset`(`enablePagination`)にする(ホイールや End キーがページに届かなくなるため)。
 
-`DESIGN.md`: `references/format.md` の書式で書く。**色コードを書かない**(トークン名だけ)。
-150 行を超えない(超えると `vantage check` が `DESIGN_MD_TOO_LONG` を出す)。ロゴなどの素材は
-`public/brand/logo.svg` のように `public/` 配下のパスで「ブランド素材」行に書く。
-
 ### 4. コントラストを確かめる
 
 主な文字色 / 背景色の組を、**ライトとダークの両方で**確かめる。
@@ -133,11 +131,11 @@ node <このスキルの場所>/scripts/contrast.mjs '<文字色>' '<背景色>'
 npx vantage check
 ```
 
-`HARDCODED_COLOR`(ページ内の色コード)や `DESIGN_MD_TOO_LONG` が出たらその場で直す。
+`HARDCODED_COLOR`(ページ内の色コード)などが出たらその場で直す。
 
 ### 7. 完了を報告する
 
-報告には、更新したファイル(`DESIGN.md` / `styles.css`)に加えて次を**必ず**入れる。
+報告には、更新したファイル(`styles.css` など)と当てたテーマ名に加えて次を**必ず**入れる。
 
 - プレビューページのパスと URL(`src/design-preview.tsx` → `/design-preview`)。
 - 「ホームなど既存の画面は一部の色しか使っていないので、変更が見えないことがある。配色はプレビュー
@@ -145,5 +143,5 @@ npx vantage check
 
 ## 会話中の指示との関係
 
-- 会話中の個別の指示(「このグラフだけ赤で」)は `DESIGN.md` より優先する。そのページだけ直せばよい。
-- 同じ指示が 2 回以上出たら、`DESIGN.md` への反映を提案する(反映するときはこの手順の 2 から)。
+- 会話中の個別の指示(「このグラフだけ赤で」)はテーマより優先する。そのページだけ直せばよい。
+- 同じ指示が 2 回以上出たら、`styles.css` の上書きへ反映することを提案する(この手順の 2 から)。

package/skills/vantage-design/references/extract.md

@@ -44,7 +44,7 @@ grep -oE 'font-family:[^;]+' /tmp/site.css | sort | uniq -c | sort -rn | head
 - SPA で HTML がほぼ空のときは、`<script>` より先に CSS の `<link>` を探す。それも無ければ
   ユーザーにスクリーンショットかブランドカラーを聞く(推測で埋めない)。
 - 取得できない(認証・ボット対策)ときは、その旨を伝えてスクリーンショットをもらう。
-- ロゴを使うなら `public/brand/` に保存し、`DESIGN.md` の「ブランド素材」行にパスを書く。
+- ロゴを使うなら `public/brand/` に保存する。
 
 ## 画像・ロゴ
 
@@ -83,12 +83,10 @@ grep -oE 'font-family:[^;]+' /tmp/site.css | sort | uniq -c | sort -rn | head
 
 ## 外部の DESIGN.md(Stitch などが書いたもの)
 
-外部の DESIGN.md は YAML frontmatter や本文に**値**(hex・px・フォント名)を持っていることが多い。
-Vantage の `DESIGN.md` は値を持たないので、**値を `styles.css` へ移し、`DESIGN.md` をトークン参照に
-書き直す**。
+外部の DESIGN.md が値(hex・px・フォント名)を持っているときは、値だけを拾って**テーマ側**へ移す。
+Vantage に `DESIGN.md` は作らない。
 
-1. 値を拾う: primary / secondary / surface / background / on-* / error / success / warning、
-   フォント、角丸。
+1. 値を拾う: primary / secondary / surface / background / on-* / error、フォント、角丸。
 2. 対応づける:
 
    | 外部の名前 | Vantage のトークン |
@@ -98,15 +96,14 @@ Vantage の `DESIGN.md` は値を持たないので、**値を `styles.css` へ
    | background / surface / surface-container | `--background` / `--card` / `--muted` |
    | on-background / on-surface / on-surface-variant | `--foreground` / `--card-foreground` / `--muted-foreground` |
    | outline | `--border` |
-   | error | `--destructive` |
-   | success / warning | 専用トークンなし → `--chart-*` のどれかに割り当てて `DESIGN.md` に書く |
+   | error | `--destructive`(意味トークンの negative) |
+   | success / warning | テーマの意味トークン(positive / warning)に任せる。チャートの色には割り当てない |
    | radius / corner | `--radius` |
    | display / headline font | `--slide-font-display`(+ ページの見出しなら `--font-sans`) |
    | body font | `--font-sans`(ページ本文)と `--slide-font-body` |
 
 3. `styles.css` のマーカーブロックの外に、`:root` と `.dark, [data-theme="dark"]` の両方で書く
-   (チャート色・書体の書き方は SKILL.md の手順 3)。外部の DESIGN.md に
-   ダークの値が無ければ、ライトの色相を保って明度だけ反転した値を作り、コントラストを確かめる。
-4. `DESIGN.md` を `format.md` の節の順番で書き直す。外部の文章(トーン・Do/Don't・コンポーネントの
-   ルール)は活かし、値だけをトークン名に置き換える。150 行に収まらない分は要約する。
-5. 元のファイルは消さずに残すか(例: `docs/design-source.md`)、ユーザーに確認して削除する。
+   (チャート色・書体の書き方は SKILL.md の手順 3)。外部にダークの値が無ければ、ライトの色相を保って
+   明度だけ反転した値を作り、コントラストを確かめる。
+4. 外部のトーン・Do/Don't・コンポーネントのルールは、ユーザーが望んだときだけ任意の `DESIGN.md`
+   (`format.md`)に要約して残す。値は書かない。

package/skills/vantage-design/references/format.md

@@ -1,173 +1,12 @@
-# DESIGN.md の書式
-
-`DESIGN.md` はプロジェクトルートに置く、**ユーザーが所有する**ファイル。アプリの見た目の意図と
-使い分けのルールを、エージェントが UI を書く前に読める形で残す。`vantage upgrade` も
-`vantage add agents` も書き換えない。
-
-## 原則
-
-- **値を書かない。トークン名だけを書く。** 色コード(`#…`・`oklch(…)`・`rgb(…)`・`hsl(…)`)や
-  px 値の色・書体の実値は `styles.css` の持ち物。`DESIGN.md` には `--primary` のようなトークン名と、
-  Tailwind のセマンティッククラス(`text-muted-foreground`)・サイズの段階(`text-2xl`)だけを書く。
-  パレット名で色味を説明するのは可(「青 → ティール → …」)。
-- **150 行以内。** 超えると `vantage check` が `DESIGN_MD_TOO_LONG` を警告する。エージェントが
-  毎回全文を読むファイルなので、網羅より判断に効くルールを優先する。
-- **YAML frontmatter は付けない。** 先頭は下の「冒頭のコメント」から始める。
-- **会話中の指示が優先。** `DESIGN.md` は既定値であって、個別の依頼を拒む根拠にしない。
-- ロゴ・画像は `public/` 配下のパスで参照する(`public/brand/logo.svg`)。画像を埋め込まない。
-
-## 節の順番と見出し
-
-見出しは日本語 + 英語の括弧書き(外部の DESIGN.md — Stitch など — の節と対応づけやすくするため)。
-この順番を崩さない。無い情報の節は消さずに「特になし」と書く。
-
-| # | 見出し | 書くこと |
-| --- | --- | --- |
-| 0 | 冒頭のコメント(`<!-- … -->`) | 何のファイルか / 値は styles.css / 会話の指示が優先 / 「このサイトに合わせて」で更新できること / upgrade が触らないこと |
-| 1 | `## 全体のトーン (Overview)` | 2〜4 行のトーン。最後に「ブランド素材:」行(任意。`public/` のパス) |
-| 2 | `## 色 (Colors)` | 役割 → トークンの表。行は **主色 / 強調 / 良い / 悪い / 注意 / 背景の段階 / 境界 / 文字**。専用トークンが無い役割は「専用トークンなし」+ 代替 |
-| 3 | `## チャート (Charts)` | 系列の順番(`--chart-1..5` とその色味)、1 系列だけ強調するときの色、良い / 悪いの色、禁止の組み合わせ、プリセット名 |
-| 4 | `## 書体 (Typography)` | 見出し / 本文 / 数字 / スライドの書体(`--slide-font-display` / `--slide-font-body`)と、サイズの段階(Tailwind クラス・`--slide-size-*`) |
-| 5 | `## レイアウトと密度 (Layout)` | カード・余白(`gap-*`)・`--radius`・並べ方・密度 |
-| 6 | `## 成果物の種類ごとの規則 (Per-artifact)` | `### ダッシュボード` と `### スライド` の小節(他の種類があれば小節を足す) |
-| 7 | `## Do / Don't` | 3 つずつ程度 |
-
-外部の DESIGN.md の対応: Overview / Colors / Typography / Layout(Spacing・Elevation 含む)/
-Components → 「成果物の種類ごとの規則」/ Do's and Don'ts。値は `styles.css` へ移す
-(→ `extract.md` の「外部の DESIGN.md」)。
-
-## 使えるトークン
-
-| 系統 | トークン |
-| --- | --- |
-| 面と文字 | `--background` `--foreground` `--card` `--card-foreground` `--popover` `--popover-foreground` |
-| 主色など | `--primary` `--primary-foreground` `--secondary` `--secondary-foreground` `--accent` `--accent-foreground` `--muted` `--muted-foreground` `--destructive` `--destructive-foreground` |
-| 境界 | `--border` `--input` `--ring` |
-| チャート | `--chart-1` 〜 `--chart-5` |
-| 形 | `--radius` |
-| サイドバー | `--sidebar` `--sidebar-foreground` `--sidebar-primary` … |
-| スライド | `--slide-bg` `--slide-fg` `--slide-accent` `--slide-muted` `--slide-radius` `--slide-font-display` `--slide-font-body` `--slide-size-hero` `--slide-size-body` |
-
-- `--muted` `--accent` `--secondary` `--border` は背景・境界用。文字色の役割に割り当てない。
-- 良い / 注意の専用トークンは無い。`--chart-*` の中から割り当てるか、「専用トークンなし」と書く。
-- ページ本文の書体は `--font-sans`(`styles.css` の `body` が `font-family: var(--font-sans)` で参照する。
-  テーマを当てると `--font-sans` もテーマの値になる。変えるときはテーマ範囲のマーカーの後ろで上書きする)。
-- `--slide-bg` などは既定で `--background` などの別名。`.dark` に書き直す必要は無い。
-
-## 雛形(中立の既定テーマ)
-
-ベーステンプレート(`packages/vantage-template/template/DESIGN.md`)と**同じ内容**。どちらかを
-直したらもう片方も合わせること。既定テーマ(無彩色の `--primary`、チャートは `blue` プリセット)を
-そのまま説明しているので、新規に作るときはこれを写して、変えた役割の行だけを書き換える。
-
-````markdown
-<!--
-DESIGN.md — このアプリの「見た目の意図」を書くファイルです。
-
-- 実際の色・角丸・書体の値は src/styles.css にあります。ここにはトークン名(--primary など)と
-  使い分けのルールだけを書き、色コードは書きません。
-- エージェントはページ・スライド・コンポーネントを書く前にこのファイルを読みます。
-  会話の中での指示はこのファイルより優先されます。
-- 「このサイトに合わせて」「色を落ち着いた感じに」と頼めば、このファイルと styles.css を
-  まとめて更新します。
-- このファイルはあなたのものです。`vantage upgrade` が書き換えることはありません。
--->
-
-# デザイン
-
-## 全体のトーン (Overview)
-
-- 落ち着いた無彩色のベースに、データだけが色を持つ業務ダッシュボード。
-- 装飾より読みやすさを優先する。影・グラデーション・アニメーションは最小限。
-- 数字が主役。1 画面で伝えたいことを 1 つに絞り、補足は小さく添える。
-- ブランド素材: なし(ロゴを使う場合は `public/brand/logo.svg` のように `public/` 配下のパスで書く)
-
-## 色 (Colors)
-
-色は必ずトークン(Tailwind のセマンティッククラス)で指定する。素のパレット(`bg-blue-600` など)や
-色コードを直接書かない。
-
-| 役割 | トークン | 使う場所 |
-| --- | --- | --- |
-| 主色 (Primary) | `--primary` / `--primary-foreground` | 主要ボタン、選択中の状態。既定は無彩色 |
-| 強調 (Accent) | `--chart-1` | 1 つだけ目立たせたい数値・系列・リンク的な強調 |
-| 良い (Positive) | `--chart-2` | 前期比のプラスなど、良い変化の小さな印 |
-| 悪い (Negative) | `--destructive` | 前期比のマイナス、エラー、削除操作 |
-| 注意 (Warning) | 専用トークンなし | 文言とアイコンで示し、色は `--muted-foreground` |
-| 背景の段階 | `--background` → `--card` → `--muted` | ページ → カード → カード内の区画・ホバー |
-| 境界 | `--border` / `--input` / `--ring` | 罫線、入力欄、フォーカス |
-| 文字 | `--foreground` / `--muted-foreground` | 本文 / 補足・ラベル・単位 |
-
-- `--muted`・`--accent`・`--secondary`・`--border` は背景・境界用。文字色に使わない。
-- 増減(▲▼・前期比)は向きで色を分ける: 増加・プラスは `--chart-2`(または `--primary`)、
-  減少・マイナスは `--destructive`。下向きの矢印やマイナスを `--primary` で塗らない。
-- ライトとダークの両方がトークンで決まるので `dark:` を並べない。
-
-## チャート (Charts)
-
-- 系列の順番は `--chart-1` → `--chart-2` → `--chart-3` → `--chart-4` → `--chart-5`
-  (現在はプリセット `blue`: 青 → ティール → フクシア → バイオレット → グレー)。
-- 1 系列だけを目立たせるときは、その系列を `--chart-1`、残りをすべて `--chart-5`(グレー)にする。
-- 良い / 悪いを色で塗り分けるときは `--chart-2` / `--destructive`。色だけに頼らず ▲▼ や符号も添える。
-- 系列は 5 つまで。それ以上はグループ化するか「その他」にまとめる。
-- 禁止: 同じチャートで `--destructive` を普通の系列色として使う(悪い値に見える)。
-- 禁止: 隣り合う系列に `--chart-3` と `--chart-4` を並べて細い線で描く(見分けにくい)。
-- 配色を丸ごと変えるときは `npx @squadbase/vantage-template theme <id>` を使う
-  (`neutral` / `ocean` / `forest` / `sunset` / `violet` / `rose` / `mono`)。チャートだけ別の配色にするときは
-  `chart <preset>`(`blue` / `ocean` / `sunset` / `forest` / `berry` / `mono`)。
-
-## 書体 (Typography)
-
-| 用途 | 指定 | 備考 |
-| --- | --- | --- |
-| 見出し・本文 | 日本語を含むシステムフォント(`--font-sans`) | Web フォントは使わない |
-| 数字 | 同上 + `tabular-nums` | 桁がそろうように必ず付ける |
-| スライドの見出し | `--slide-font-display` | 既定は日本語を含むシステムフォント |
-| スライドの本文 | `--slide-font-body` | 既定は見出しと同じ |
-
-サイズの段階(ダッシュボード):
-
-- ページ見出し: `text-2xl font-bold`
-- カード見出し・ラベル: `text-sm font-medium text-muted-foreground`
-- KPI の数値: `text-3xl font-semibold tabular-nums`
-- 本文・表: `text-sm`
-- 注釈・出典: `text-xs text-muted-foreground`
-
-スライドのサイズは `--slide-size-hero`(表紙・大きな数字)と `--slide-size-body`(本文)を基準にする。
-
-## レイアウトと密度 (Layout)
-
-- 情報はカード(`bg-card` + `border-border`)で区切る。角丸は `--radius` に従う(個別に変えない)。
-- グリッドの間隔は `gap-4`。セクション間は `gap-6` 程度。
-- KPI は 1 行に 2〜4 枚。その下にチャート、最後に明細の表。
-- 密度は「中」。余白を削って詰め込むより、ページを分ける。
-
-## 成果物の種類ごとの規則 (Per-artifact)
-
-### ダッシュボード
-
-- 先頭に KPI カード、次にトレンドのチャート、最後に明細の表。
-- 各 KPI には比較対象(前月比・目標比など)を 1 つ添える。
-- チャートのタイトルは結論を書く(「売上推移」より「売上は 3 か月連続で増加」)。
-
-### スライド
-
-- 1 枚に 1 メッセージ。見出しに結論を書く。
-- 色は `--slide-bg` / `--slide-fg` / `--slide-accent` / `--slide-muted` を使う
-  (既定では `--background` / `--foreground` / `--primary` / `--muted-foreground` に連動)。
-- 強調色は 1 枚につき 1 か所まで。
-
-## Do / Don't
-
-Do:
-
-- トークンと Tailwind のセマンティッククラスで色を指定する。
-- 数値には単位と比較対象を付ける。
-- 色の意味(良い / 悪い / 強調)をアプリ全体でそろえる。
-
-Don't:
-
-- 色コードや素のパレットクラスを直接書く。
-- 1 画面で強調色を何か所にも使う。
-- 3D チャート・円グラフの多用・装飾目的のグラデーション。
-````
+# 任意の DESIGN.md
+
+`DESIGN.md` は、プロジェクトルートに置く**ユーザー所有の任意のファイル**。新規プロジェクトには作らない。
+ユーザーが望んだときだけ、ユーザー固有の意図(密度・スライドの見出し方針・ブランド素材など)を書く。
+
+- 色・書体・角丸の値と色の割り当ては書かない。テーマ(`styles.css`、ThemeDialog、CLI の `theme` / `chart`)が持つ。
+  デザイン変更の依頼を `DESIGN.md` に記録しない。
+- 見た目の規則は `AGENTS.md` の「見た目の規約」節が正本。`DESIGN.md` はそれに**加えて**従われる。
+  色の割り当てが食い違うときはテーマを優先する。
+- 既存の `DESIGN.md` は消さない。`vantage upgrade` も `vantage add agents` も書き換えない。
+- 150 行以内(超えると `vantage check` が `DESIGN_MD_TOO_LONG` を警告する)。YAML frontmatter は付けない。
+- ロゴ・画像は `public/` 配下のパスで参照する(`public/brand/logo.svg`)。

package/skills/vantage-design/references/presets.md

@@ -48,13 +48,3 @@ npx @squadbase/vantage-template theme ocean --reset-chart   # chart コマンド
 **`/* squadkit-theme:end */`(チャート範囲があればその終端)より後ろ**に、変えたいトークンだけ
 `:root` と `.dark, [data-theme="dark"]` の**両方**に書く。前に書くとテーマに負ける。
 `scripts/contrast.mjs` で `--primary-foreground` / `--primary` をライトとダークで確かめる。
-
-## DESIGN.md
-
-`format.md` の雛形から作り、選んだテーマに合わせて次の行だけ書き換える。
-
-- 「全体のトーン」: 上の表のトーンを 2〜3 行に。
-- 主色の行: テーマの主色の色味(「青」「橙」など。**色コードは書かない**)。
-- チャートの色味: テーマの `--chart-1..5` の並び(適用後の `styles.css` を見る)。
-- 良い / 悪い / 注意: 専用トークンは無い。`--chart-*` から割り当てるか「専用トークンなし」と書く。
-  `--destructive` を普通の系列色に使わない。

package/templates/AGENTS.md

@@ -7,8 +7,8 @@
 > このファイルと `agents/*.md` は、いずれも **Vantage フレームワークが所有する正本**の
 > コピーです。手で書き換えても、`vantage upgrade` を実行するとフレームワーク同梱の正本から
 > 再同期されて上書きされます。アプリ固有のメモは別ファイル(例: `README.md`)に書いてください。
-> 例外はプロジェクトルートの `DESIGN.md` で、これは**ユーザーが所有**します(`vantage upgrade` も
-> `vantage add agents` も触らない。→「デザインの意図(DESIGN.md)」)。
+> 例外はプロジェクトルートの任意の `DESIGN.md` で、これは**ユーザーが所有**します(`vantage upgrade` も
+> `vantage add agents` も触らない。→「見た目の規約」)。
 >
 > 手順を伴う踏み込んだワークフローは、同梱の Claude Code Skill に分かれています。このファイルは
 > 「地図」、`agents/*.md` は「種類ごとの静的リファレンス」、Skill は「手順書」という役割分担です。
@@ -47,8 +47,9 @@ UI キット・開発サーバー・API サーバー・ビルドはすべて Van
 - **`definePage` の値はリテラルで書く。** title/description/navLabel はビルド時に静的抽出される
   ため、変数・関数呼び出し・テンプレート補間は使わない。`page` エクスポートはランタイムでは
   読まれない。
-- **アプリの表示言語は、ルート `_layout.tsx` の `export const lang = "ja"`(リテラル)で指定する。**
+- **アプリの表示言語は、ルート `_layout.tsx` の `export const lang = "en"`(リテラル。BCP 47)で指定する。**
   `<html lang>` になり、日本語の文節改行とスライドの文言切り替えに効く。未指定は `"en"`。
+  画面の文言・docs・コメントは、ユーザーが使う言語に合わせる(`lang` もその言語にする)。
 
 ## ディレクトリ構造(ページをどこに置くか)
 
@@ -102,7 +103,7 @@ root/
 | `@squadbase/vantage/markdown` | `MarkdownRenderer`(Shiki を隔離するための専用サブパス) |
 | `@squadbase/vantage/server` | `ApiContext`・`ApiHandler`・`HttpError`・`isHttpError`・`json`(server/ 側でのみ使う) |
 
-**KPI は `KpiCard`、増減は `Delta`(`comparison` と `polarity` を渡す)。** 向き・率・色は値から計算
+**KPI は `KpiCard`、増減は `Delta`(`comparison` を渡し、下がって良い指標は `betterWhen="down"`)。** 向き・率・色は値から計算
 されるので手で渡さない。`TrendIndicator` は非推奨(`direction` を手で渡すので値と食い違いうる)。props は
 `vantage docs kpi-card` / `vantage docs delta` を引く。
 
@@ -125,17 +126,30 @@ import { KpiCard, Delta } from "@squadbase/vantage/components";
 - `server/` が**無い** → 外部 API を直接叩くなら `useQuery`(→ `agents/page.md`)。自前の API が
   要るようになったら `server/api/*.ts` を足すだけでよい(設定変更は不要)。
 
-## デザインの意図(DESIGN.md)
+## 見た目の規約
 
-プロジェクトルートに `DESIGN.md` があれば、**UI(ページ・スライド・コンポーネント)を書く前に
-読む。** 色・チャート・書体・レイアウトの使い分けがトークン名で書いてあるので、それに従って
-トークンで書く(値は `styles.css` にあり、`DESIGN.md` には色コードを書かない)。
+色・書体・角丸などの**値と色の割り当ては、テーマ(`styles.css` の `/* theme: <name> */` マーカー以降の
+上書き)だけが持つ。** ここには値を書かず、使い分けの規則だけを置く。UI(ページ・スライド・
+コンポーネント)はこの規則に従い、色は必ずトークンで指定する(色コード・素のパレットクラスは書かない)。
 
-- **会話中の指示は `DESIGN.md` より優先する。** 同じ指示が繰り返されたら、`DESIGN.md` への
-  反映をユーザーに提案する。
-- **「色を変えて」「ブランドに合わせて」などデザイン全体の変更は、ファイルごとに直さない。**
-  Skill `vantage-design` の手順で `DESIGN.md` と `styles.css` をまとめて更新する。
-- `DESIGN.md` はユーザーの持ち物。`vantage upgrade` は書き換えない。
+- **意味トークン:** 良い = `positive`、悪い = `negative`、注意 = `warning`、情報 = `info`、
+  中立 = `neutral`。系列色は `chart-1`〜`chart-5` を番号順に使う(5 系列まで。超えるなら「その他」に
+  まとめる)。増減の良否は指標の性質(コスト減・解約率減は良い)で決めて
+  positive / negative に分け(`KpiCard` / `Delta` の `betterWhen`。下がって良い指標は `betterWhen="down"`)、向きは ▲▼ や符号で表す。
+- **レイアウト:** 内容はカードで包む。順序は KPI → チャート → 表。値が 1 つなら KPI にする
+  (1 本の棒グラフにしない)。強調は 1 画面(スライドは 1 枚)に 1 か所。数値には単位と比較対象を添える。
+- **Do:** トークンで色を指定する / 色の意味をアプリ全体でそろえる / チャートのタイトルに結論を書く。
+- **Don't:** 色コードや素のパレットクラスを書く / `dark:` を並べる / 3D・装飾目的のグラデーション・
+  円グラフの多用 / 同じチャートで `negative` を普通の系列色に使う。
+- スライド固有の規則は `agents/slide.md`。
+
+**任意の `DESIGN.md`:** プロジェクトルートにあれば読んで従う(密度・スライドの見出し方針・
+ブランド素材などユーザー固有の意図)。AGENTS.md の規則に加えて従うが、**色の割り当てはテーマを優先**
+する。新規には作らない。ユーザーの持ち物で、`vantage upgrade` は書き換えも削除もしない。
+
+**デザイン変更の依頼**(「もっと落ち着いた色に」「ブランドに合わせて」など)は、ファイルごとに
+直さず、テーマの切り替えかスタイルシートの上書きで完結させる。`DESIGN.md` には記録しない。今のテーマ名は
+`styles.css` の `/* theme: <name> */` マーカーから読む。手順は Skill `vantage-design`。
 
 ## 何を書くか → どのファイルを読むか
 
@@ -174,7 +188,7 @@ vantage docs button           # 1 ページ表示(短縮名。ui/button に解
 vantage docs parts/data-table # 完全な slug でも引ける
 vantage docs data-table --json  # { slug, title, description, section, content }
 vantage docs --all            # 全ページを連結(まとめて読み込む用)
-vantage docs routing --lang en  # 英語版(既定は ja)
+vantage docs routing --lang en  # 英語版(`--lang` 省略時は ja。アプリの文言の言語とは無関係)
 ```
 
 props の表・使用例・落とし穴はコンポーネントのページに載っている。**推測で props を書く前に
@@ -212,7 +226,7 @@ body・レスポンスの status と形)まで出る。`vantage check --json` /
 - **`vantage-app`** — アプリを一から作る / 構成を広げるときの進め方と検証の順序
 - **`vantage-add-feature`** — 既存アプリに page / api / ui を 1 つ足す定型
 - **`vantage-slide`** — `.slide.tsx` でスライドデッキを書く(キャンバスの予算・段階表示・pptx 書き出し)
-- **`vantage-design`** — `DESIGN.md` と `styles.css` をまとめて作る / 直す(配色・書体・ブランド合わせ)
+- **`vantage-design`** — テーマの切り替え・`styles.css` の上書きで見た目を直す(配色・書体・ブランド合わせ)
 - **`vantage-pitfalls`** — Base UI(≠ Radix)の癖など、静かに壊れる落とし穴のリファレンス
 - **`project-storage`** — Squadbase の Project Storage(アップロード済みファイル)をブラウザから読み書きする
 

package/templates/agents/page.md

@@ -4,7 +4,7 @@
 (ダッシュボード)を書くときに読んでください。前提となる不変条件・ディレクトリ構造は
 `AGENTS.md` を先に読んでいる想定です。
 
-プロジェクトルートに `DESIGN.md` があれば、書き始める前に読んで配色・書体・レイアウトの規則に従う。
+書き始める前に `AGENTS.md` の「見た目の規約」(と、あればプロジェクトルートの `DESIGN.md`)に従う。
 
 ## 最小アプリ(2 ファイル)
 

package/templates/agents/slide.md

@@ -4,7 +4,13 @@
 スライドデッキを書くときに読んでください。不変条件・ディレクトリ構造は `AGENTS.md` を
 先に読んでいる想定です。
 
-プロジェクトルートに `DESIGN.md` があれば、書き始める前に読んで「スライド」の節と配色・書体の規則に従う。
+書き始める前に `AGENTS.md` の「見た目の規約」(と、あればプロジェクトルートの `DESIGN.md`)に従う。
+スライド固有の規則:
+
+- 1 枚に 1 メッセージ。見出しに結論を書く。
+- 色は `--slide-bg` / `--slide-fg` / `--slide-accent` / `--slide-muted` を使う(既定では
+  `--background` / `--foreground` / `--primary` / `--muted-foreground` に連動)。
+- 強調色は 1 枚につき 1 か所まで。
 
 ## スライドは `.slide.tsx` で書く
 

package/dist/chunk-2N72FKLB.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../squadkit/registry/ui/states.tsx"],"names":[],"mappings":";;;;AAsBO,SAAS,OAAA,CAAQ,EAAE,KAAA,GAAQ,wDAAA,EAAa,WAAU,EAA2C;AAClG,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,iDAAiD,SAAS,CAAA,EAAG,IAAA,EAAK,QAAA,EAAS,WAAA,EAAU,QAAA,EACtG,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,uDAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,gFAAA,EAAiF,CAAA;AAAA,IAChG;AAAA,GAAA,EACH,CAAA,EACF,CAAA;AAEJ;AAEO,SAAS,KAAA,CAAM;AAAA,EACpB,KAAA,GAAQ,sFAAA;AAAA,EACR,WAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,EAMG;AACD,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,kEAAA,EAAoE,SAAS,CAAA,EAC7F,QAAA,EAAA;AAAA,IAAA,IAAA,mBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gCAAA,EAAkC,gBAAK,CAAA,GAAS,IAAA;AAAA,oBACvE,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,aAAA,EAAe,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IACjC,8BAAc,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,wCAAA,EAA0C,uBAAY,CAAA,GAAO,IAAA;AAAA,IACxF,yBAAS,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,MAAA,EAAQ,kBAAO,CAAA,GAAS;AAAA,GAAA,EACnD,CAAA;AAEJ;AAEO,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA,GAAQ,sFAAA;AAAA,EACR,OAAA,GAAU,4OAAA;AAAA,EACV,OAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,EAQG;AACD,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,8DAAA,EAAgE,SAAS,CAAA;AAAA,MACvF,IAAA,EAAK,OAAA;AAAA,MAEL,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,gCAAA,EAAkC,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QACpD,0BAAU,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oCAAA,EAAsC,mBAAQ,CAAA,GAAO,IAAA;AAAA,QAC5E,OAAA,mBACC,IAAA,CAAC,SAAA,EAAA,EAAQ,SAAA,EAAU,oCAAA,EACjB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,SAAA,EAAA,EAAQ,SAAA,EAAU,4BAAA,EAA6B,QAAA,EAAA,gCAAA,EAAK,CAAA;AAAA,0BACrD,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0BAAA,EAA4B,QAAA,EAAA,OAAA,EAAQ;AAAA,SAAA,EACrD,CAAA,GACE,IAAA;AAAA,QACH,yBAAS,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,MAAA,EAAQ,kBAAO,CAAA,GAAS;AAAA;AAAA;AAAA,GACnD;AAEJ","file":"chunk-2N72FKLB.js","sourcesContent":["\"use client\"\n\n/**\n * Loading / Empty / ErrorState — the three non-data states of a panel, worded for\n * business users. Defaults are Japanese and say what is happening, not why the\n * system failed: keep raw errors (\"upstream timeout after 30s\") in `details`,\n * which stays folded behind \"詳細を表示\".\n *\n * @example\n * import { ErrorState } from \"@/components/ui/states\"\n * // Vantage: import { ErrorState } from \"@squadbase/vantage/ui\"\n *\n * <ErrorState\n *   title=\"売上を読み込めませんでした\"\n *   message=\"データソースから時間内に応答がありませんでした。しばらくしてから再試行してください。\"\n *   details={error.message}\n *   action={<Button variant=\"outline\" onClick={retry}>再試行する</Button>}\n * />\n */\nimport type { ReactNode } from \"react\"\nimport { cn } from \"../lib/utils\"\n\nexport function Loading({ label = \"読み込んでいます…\", className }: { label?: string; className?: string }) {\n  return (\n    <div className={cn(\"flex min-h-[30vh] items-center justify-center\", className)} role=\"status\" aria-live=\"polite\">\n      <div className=\"flex items-center gap-3 text-sm text-muted-foreground\">\n        <span className=\"h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n        {label}\n      </div>\n    </div>\n  )\n}\n\nexport function Empty({\n  title = \"表示できるデータがありません\",\n  description,\n  icon,\n  action,\n  className,\n}: {\n  title?: string\n  description?: string\n  icon?: ReactNode\n  action?: ReactNode\n  className?: string\n}) {\n  return (\n    <div className={cn(\"flex flex-col items-center justify-center gap-2 p-10 text-center\", className)}>\n      {icon ? <div className=\"text-3xl text-muted-foreground\">{icon}</div> : null}\n      <p className=\"font-medium\">{title}</p>\n      {description ? <p className=\"max-w-sm text-sm text-muted-foreground\">{description}</p> : null}\n      {action ? <div className=\"mt-2\">{action}</div> : null}\n    </div>\n  )\n}\n\nexport function ErrorState({\n  title = \"データを読み込めませんでした\",\n  message = \"時間をおいて再試行してください。解決しない場合は管理者にお問い合わせください。\",\n  details,\n  action,\n  className,\n}: {\n  title?: string\n  /** What happened and what to do next, in plain words. */\n  message?: ReactNode\n  /** Technical detail (error message, status code), folded behind \"詳細を表示\". */\n  details?: ReactNode\n  action?: ReactNode\n  className?: string\n}) {\n  return (\n    <div\n      className={cn(\"rounded-xl border border-destructive/30 bg-destructive/5 p-6\", className)}\n      role=\"alert\"\n    >\n      <p className=\"font-semibold text-destructive\">{title}</p>\n      {message ? <p className=\"mt-1 text-sm text-muted-foreground\">{message}</p> : null}\n      {details ? (\n        <details className=\"mt-2 text-xs text-muted-foreground\">\n          <summary className=\"cursor-pointer select-none\">詳細を表示</summary>\n          <div className=\"mt-1 font-mono break-all\">{details}</div>\n        </details>\n      ) : null}\n      {action ? <div className=\"mt-3\">{action}</div> : null}\n    </div>\n  )\n}\n"]}

package/dist/chunk-57GHR5LN.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../squadkit/registry/lib/format.ts"],"names":[],"mappings":"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","file":"chunk-57GHR5LN.js","sourcesContent":["/**\n * Locale-aware number formatting shared by KPI cards, tables and charts. All\n * shortening is delegated to `Intl.NumberFormat` (`notation: \"compact\"`); this\n * module never hard-codes unit thresholds or unit strings.\n *\n * | `format`                                   | input        | ja-JP output   |\n * |--------------------------------------------|--------------|----------------|\n * | `\"compact\"` (default)                      | `48_200_000` | `4,820万`      |\n * | `\"number\"`                                 | `1234.567`   | `1,234.57`     |\n * | `\"currency\"` (JPY, compact)                | `48_200_000` | `¥4,820万`     |\n * | `{ type: \"currency\", notation: \"standard\" }` | `48_200_000` | `¥48,200,000`  |\n * | `{ type: \"currency\", currency: \"USD\" }`    | `1234.5`     | `$1,234.5`     |\n * | `\"percent\"` — pass a **ratio**             | `0.124`      | `12.4%`        |\n * | `{ type: \"percent\", digits: 0 }`           | `0.124`      | `12%`          |\n * | `\"multiple\"`                               | `1.5`        | `1.5×`         |\n * | `{ type: \"number\", unit: \"件\" }`           | `48_210`     | `48,210件`     |\n * | `{ type: \"compact\", unit: \"人\" }`          | `12_345`     | `1.2万人`      |\n * | `\"duration\"` — pass **seconds**            | `12_000`     | `3時間20分`    |\n * | `{ type: \"duration\", durationUnit: \"minute\" }` | `2160`   | `1.5日`        |\n *\n * - `percent` takes a ratio (0.124 → 12.4%). Passing 12.4 renders 1,240%. The fraction\n *   digits are **fixed**, never trimmed (`PERCENT_DIGITS` = 1: 0.14 → \"14.0%\", never \"14%\"\n *   beside \"11.9%\"). Pass `digits` in the format to share another count across cards.\n * - A minus sign is always U+2212 (`MINUS_SIGN`, \"−1,234\" / \"−5.0%\"), never the hyphen-minus.\n * - `currency` defaults to JPY and to compact notation (万・億 in ja); pass\n *   `notation: \"standard\"` for every digit (tables, invoices). In ja-JP the yen\n *   sign is the half-width `¥`.\n * - `unit` is a counter appended right after the number, with no space\n *   (\"48,210件\", \"1.2万人\"), for `number` / `compact` / `currency`. It is\n *   ignored for `percent` and `duration`, and for `multiple` it replaces the\n *   default `×` (\"2.7倍\"). Do not write it into a `valueFormatter` by hand.\n * - Charts take the same `format` a KpiCard takes (`format=\"currency\"`).\n *   `toValueFormatter(format)` turns it into a function for places that need\n *   one (a `valueFormatter`, table cells).\n * - Missing values (null / undefined / NaN) render as `—` (`EMPTY_VALUE`).\n * - Dates go through `formatDate` (`Intl.DateTimeFormat`): `\"date\"` → `2026/10/20`,\n *   `\"datetime\"` → `2026/10/20 14:30`, `\"year-month\"` → `2026年10月`, `\"month\"` → `10月`,\n *   `\"year\"` → `2026年`.\n * - A period goes through `formatDateRange`: `2026/9/23〜10/20` (same year drops the end year),\n *   `2025/12/20〜2026/1/18` across years; month and day are not zero-padded.\n */\n\n/**\n * The kind of number a value is. Pick by what the number means, not by how\n * long it is: `currency` for money, `percent` for a ratio, `multiple` for a\n * factor (\"1.5×\"), `duration` for a length of time (\"3時間20分\"), `number` for\n * exact counts in tables, `compact` (default) for large headline counts (万・億).\n */\nexport type FormatKind = \"number\" | \"compact\" | \"currency\" | \"percent\" | \"multiple\" | \"duration\"\n\n/** The unit a `duration` value is measured in. */\nexport type DurationUnit = \"second\" | \"minute\" | \"hour\" | \"day\"\n\n/**\n * How to display a number: a `FormatKind` alone, or an object for digits,\n * currency, notation and a counter. The same value is accepted by KpiCard,\n * Delta, the charts (`format`) and `formatValue`.\n *\n * @example\n * \"currency\"                                   // ¥4,820万\n * { type: \"currency\", notation: \"standard\" }   // ¥48,200,000\n * { type: \"percent\", digits: 1 }               // 2.0%\n * { type: \"number\", unit: \"件\" }               // 48,210件\n */\nexport type ValueFormat =\n  | FormatKind\n  | {\n      type: FormatKind\n      /** Fixed number of fraction digits. */\n      digits?: number\n      /** ISO 4217 code for `currency`. Default `\"JPY\"`. */\n      currency?: string\n      /** `currency` only: `\"compact\"` (default, 万・億) or `\"standard\"` (every digit). */\n      notation?: \"compact\" | \"standard\"\n      /** Counter appended after the number, e.g. `\"件\"`, `\"人\"`. Ignored for `percent` and `duration`. For `multiple` it replaces the default `×` (`\"倍\"` → `2.7倍`). */\n      unit?: string\n      /** 値をこの数で割ってから整形する。例: `divisor: 100`（セント → ドル）。0 と非有限は無視。 */\n      divisor?: number\n      /** `duration` only: the unit the value is in. Default `\"second\"`. Reads as \"45秒\" / \"12分\" / \"3時間20分\" / \"1.5日\" (`digits` sets the fraction digits of days). */\n      durationUnit?: DurationUnit\n    }\n\n/** Locale used when none is passed. Every function here takes a `locale` to override it. */\nexport const DEFAULT_LOCALE = \"ja-JP\"\n\n/** Shown in place of a missing value (null / undefined / NaN). */\nexport const EMPTY_VALUE = \"—\"\n\n/** The minus sign every formatter writes (U+2212), so a negative never mixes with a hyphen-minus. */\nexport const MINUS_SIGN = \"\\u2212\"\n\n/** Fraction digits of a `percent` value (and of the points in `formatPoints`) when `digits` is not given. Fixed, never trimmed. */\nexport const PERCENT_DIGITS = 1\n\nconst DEFAULT_CURRENCY = \"JPY\"\nconst MULTIPLE_SUFFIX = \"×\"\n/** Suffix for a difference between two rates, in percentage points. */\nconst POINTS_SUFFIX = \"pt\"\n\n/** Extra options for `formatValue`. */\nexport interface FormatValueOptions {\n  /** `\"auto\"` (default) signs negatives only; `\"exceptZero\"` also writes `+` on positives (for differences). */\n  signDisplay?: \"auto\" | \"exceptZero\"\n  /** Round to this many significant digits (e.g. 3 for an estimate: 79,653,985 → 7,970万). */\n  significantDigits?: number\n}\n\ntype NormalizedFormat = Exclude<ValueFormat, FormatKind>\n\nfunction normalize(format: ValueFormat | undefined): NormalizedFormat {\n  if (format === undefined) return { type: \"compact\" }\n  return typeof format === \"string\" ? { type: format } : format\n}\n\n/**\n * The kind of a format, whether it was given as a string or an object. Use it\n * to branch on the meaning of a metric (e.g. a `percent` metric compares in\n * points) without unpacking `ValueFormat` yourself.\n *\n * @param format - The format as a KpiCard / chart takes it. `undefined` means the default.\n * @returns The `FormatKind`; `\"compact\"` when `format` is omitted.\n *\n * @example\n * formatKind(\"percent\")                                // \"percent\"\n * formatKind({ type: \"currency\", notation: \"standard\" }) // \"currency\"\n * formatKind(undefined)                                // \"compact\"\n */\nexport function formatKind(format: ValueFormat | undefined): FormatKind {\n  return normalize(format).type\n}\n\nfunction digitOptions(\n  digits: number | undefined,\n  defaultMax: number | undefined,\n  significantDigits: number | undefined,\n): Intl.NumberFormatOptions {\n  if (significantDigits !== undefined) return { maximumSignificantDigits: significantDigits }\n  if (digits !== undefined) return { minimumFractionDigits: digits, maximumFractionDigits: digits }\n  return defaultMax === undefined ? {} : { maximumFractionDigits: defaultMax }\n}\n\n/**\n * Format through Intl, letting Intl decide whether the number is large enough to\n * shorten. Shortened numbers keep digit grouping (\"7,965万\"), and the full-width\n * currency sign some locales emit (\"￥\") is folded to its half-width form (\"¥\").\n */\nfunction formatParts(locale: string, options: Intl.NumberFormatOptions, value: number): string {\n  if (options.notation === \"compact\") {\n    const compact = new Intl.NumberFormat(locale, {\n      ...options,\n      useGrouping: \"always\" as unknown as boolean,\n    }).formatToParts(value)\n    if (!compact.some((p) => p.type === \"compact\")) return formatParts(locale, { ...options, notation: \"standard\" }, value)\n    return joinParts(compact)\n  }\n  return joinParts(new Intl.NumberFormat(locale, options).formatToParts(value))\n}\n\nconst joinParts = (parts: Intl.NumberFormatPart[]): string =>\n  parts\n    .map((p) => (p.type === \"currency\" ? p.value.normalize(\"NFKC\") : p.type === \"minusSign\" ? MINUS_SIGN : p.value))\n    .join(\"\")\n\n/**\n * Format a number for display — KPI values, table cells, chart labels and\n * sentences built from data (titles, summaries). See the table at the top of\n * this module.\n *\n * @param value - The number. `null` / `undefined` / `NaN` render as `—`.\n *   For `percent`, a ratio (0.124 means 12.4%).\n * @param format - How to display it. Default `\"compact\"`.\n * @param locale - BCP 47 locale. Default `\"ja-JP\"`.\n * @param options - `signDisplay` and `significantDigits` (rounding for estimates).\n * @returns The display string. In ja-JP the yen sign is the half-width `¥`.\n *\n * @example\n * formatValue(48_200_000, \"currency\")                              // \"¥4,820万\"\n * formatValue(48_200_000, { type: \"currency\", notation: \"standard\" }) // \"¥48,200,000\"\n * formatValue(0.021, \"percent\")                                    // \"2.1%\"\n * formatValue(0.124, \"percent\", \"ja-JP\", { signDisplay: \"exceptZero\" }) // \"+12.4%\"\n * formatValue(79_653_985, \"currency\", \"ja-JP\", { significantDigits: 3 }) // \"¥7,970万\"\n * formatValue(48_210, { type: \"number\", unit: \"件\" })              // \"48,210件\"\n * formatValue(1.5, \"multiple\")                                     // \"1.5×\"\n * formatValue(null)                                                // \"—\"\n */\nexport function formatValue(\n  value: number | null | undefined,\n  format?: ValueFormat,\n  locale: string = DEFAULT_LOCALE,\n  options?: FormatValueOptions,\n): string {\n  if (value === null || value === undefined || Number.isNaN(value)) return EMPTY_VALUE\n  const { type, digits, currency, notation, unit, divisor, durationUnit } = normalize(format)\n  if (divisor !== undefined && Number.isFinite(divisor) && divisor !== 0) value = value / divisor\n  const signDisplay = options?.signDisplay ?? \"auto\"\n  const sig = options?.significantDigits\n  const withUnit = (s: string) => (unit ? `${s}${unit}` : s)\n\n  switch (type) {\n    case \"number\":\n      return withUnit(formatParts(locale, { ...digitOptions(digits, 2, sig), signDisplay }, value))\n    case \"percent\":\n      return formatParts(locale, { style: \"percent\", ...digitOptions(digits ?? PERCENT_DIGITS, undefined, sig), signDisplay }, value)\n    case \"currency\":\n      return withUnit(\n        formatParts(\n          locale,\n          {\n            style: \"currency\",\n            currency: currency ?? DEFAULT_CURRENCY,\n            notation: notation ?? \"compact\",\n            ...digitOptions(digits, notation === \"standard\" ? undefined : 1, sig),\n            signDisplay,\n          },\n          value,\n        ),\n      )\n    case \"multiple\":\n      return `${formatParts(locale, { ...digitOptions(digits, 2, sig), signDisplay }, value)}${unit || MULTIPLE_SUFFIX}`\n    case \"compact\":\n      return withUnit(formatParts(locale, { ...digitOptions(digits, 1, sig), signDisplay, notation: \"compact\" }, value))\n    case \"duration\":\n      return formatDuration(value, durationUnit ?? \"second\", locale, digits, signDisplay)\n  }\n}\n\nconst SECONDS_PER: Record<DurationUnit, number> = { second: 1, minute: 60, hour: 3600, day: 86_400 }\n\n/**\n * Unit words and spacing: Japanese reads \"3時間20分\" (no space, like \"48,210件\"),\n * other locales \"3 h 20 min\".\n */\nfunction durationWords(locale: string) {\n  return locale.toLowerCase().startsWith(\"ja\")\n    ? { day: \"日\", hour: \"時間\", minute: \"分\", second: \"秒\", sep: \"\" }\n    : { day: \"d\", hour: \"h\", minute: \"min\", second: \"s\", sep: \" \" }\n}\n\n/**\n * A length of time in the largest sensible unit: under a minute in seconds, under\n * an hour in minutes (+ seconds), under a day in hours + minutes, from a day on\n * in days with a decimal (\"1.5日\"). Rounded before splitting, so 59.6 minutes\n * never reads \"59分60秒\".\n */\nfunction formatDuration(\n  value: number,\n  unit: DurationUnit,\n  locale: string,\n  digits: number | undefined,\n  signDisplay: \"auto\" | \"exceptZero\",\n): string {\n  const w = durationWords(locale)\n  const abs = Math.round(Math.abs(value) * SECONDS_PER[unit])\n  const join = (...parts: Array<[number, string]>) =>\n    parts\n      .filter(([n]) => n !== 0)\n      .map(([n, u]) => `${n}${w.sep}${u}`)\n      .join(w.sep) || `0${w.sep}${parts.at(-1)?.[1] ?? w.second}`\n  let body: string\n  let zero = false\n  if (abs >= 86_400) {\n    const days = new Intl.NumberFormat(locale, { maximumFractionDigits: digits ?? 1, minimumFractionDigits: digits ?? 0 })\n    body = `${days.format(abs / 86_400)}${w.sep}${w.day}`\n  } else if (abs >= 3600) {\n    const minutes = Math.round(abs / 60)\n    body = join([Math.floor(minutes / 60), w.hour], [minutes % 60, w.minute])\n  } else if (abs >= 60) {\n    body = join([Math.floor(abs / 60), w.minute], [abs % 60, w.second])\n  } else {\n    zero = abs === 0\n    body = `${abs}${w.sep}${w.second}`\n  }\n  const sign = zero ? \"\" : value < 0 ? MINUS_SIGN : signDisplay === \"exceptZero\" ? \"+\" : \"\"\n  return `${sign}${body}`\n}\n\n/**\n * Like `formatValue`, but always signed (except zero) — for a difference\n * between two values (\"+¥530万\", \"−120件\"). Use `formatPoints` instead for a\n * difference between two rates.\n *\n * @param value - The difference (current − previous). Missing values render as `—`.\n * @param format - Format of the metric itself. Default `\"compact\"`.\n * @param locale - BCP 47 locale. Default `\"ja-JP\"`.\n * @returns The signed display string; zero has no sign.\n *\n * @example\n * formatDelta(5_300_000, \"currency\")                 // \"+¥530万\"\n * formatDelta(-120, { type: \"number\", unit: \"件\" })  // \"−120件\"\n * formatDelta(0.031, \"percent\")                      // \"+3.1%\"\n * formatDelta(0, \"currency\")                         // \"¥0\"\n */\nexport function formatDelta(value: number | null | undefined, format?: ValueFormat, locale: string = DEFAULT_LOCALE): string {\n  return formatValue(value, format, locale, { signDisplay: \"exceptZero\" })\n}\n\n/**\n * A difference between two rates in percentage points, always signed:\n * `formatPoints(0.021 - 0.026)` → `\"−0.5pt\"`. Use it instead of a relative\n * change for rate metrics (churn, conversion), where \"−19.2%\" reads as a drop\n * of nineteen points. `signDisplay: \"never\"` drops the sign (\"あと 0.5pt\").\n *\n * @param difference - The difference of two **ratios** (0.021 − 0.026). Missing values render as `—`.\n * @param locale - BCP 47 locale. Default `\"ja-JP\"`.\n * @param options - `digits`: fixed fraction digits (default `PERCENT_DIGITS` = 1, so \"0.0pt\" / \"+0.5pt\"); `signDisplay`:\n *   `\"exceptZero\"` (default) or `\"never\"` when the sentence already says the direction.\n * @returns The difference in points with the `pt` suffix.\n *\n * @example\n * formatPoints(0.021 - 0.026)                                   // \"−0.5pt\"\n * formatPoints(0.031 - 0.026)                                   // \"+0.5pt\"\n * formatPoints(0.02 - 0.015, \"ja-JP\", { signDisplay: \"never\" }) // \"0.5pt\"（「目標まであと 0.5pt」）\n */\nexport function formatPoints(\n  difference: number | null | undefined,\n  locale: string = DEFAULT_LOCALE,\n  options?: { digits?: number; signDisplay?: \"exceptZero\" | \"never\" },\n): string {\n  if (difference === null || difference === undefined || Number.isNaN(difference)) return EMPTY_VALUE\n  const digits = options?.digits ?? PERCENT_DIGITS\n  const number = formatParts(\n    locale,\n    { minimumFractionDigits: digits, maximumFractionDigits: digits, signDisplay: options?.signDisplay ?? \"exceptZero\" },\n    difference * 100,\n  )\n  return `${number}${POINTS_SUFFIX}`\n}\n\n/**\n * Binds a format and locale into a single-argument formatter, for a chart\n * `valueFormatter` or a table cell: `valueFormatter={toValueFormatter(\"currency\")}`.\n * Prefer passing `format` to the chart directly; this is for APIs that only\n * take a function.\n *\n * @param format - How to display each value. Default `\"compact\"`.\n * @param locale - BCP 47 locale. Default `\"ja-JP\"`.\n * @returns `(value) => string`, rendering missing values as `—`.\n *\n * @example\n * const yen = toValueFormatter(\"currency\")\n * yen(48_200_000) // \"¥4,820万\"\n * yen(null)       // \"—\"\n * const count = toValueFormatter({ type: \"number\", unit: \"件\" })\n * count(48_210)   // \"48,210件\"（表のセル）\n */\nexport function toValueFormatter(\n  format?: ValueFormat,\n  locale: string = DEFAULT_LOCALE,\n): (value: number | null | undefined) => string {\n  return (value) => formatValue(value, format, locale)\n}\n\n/**\n * 日付の書式。何を表す日付かで選ぶ: 日単位は `\"date\"`、時刻まで要るなら `\"datetime\"`、\n * 月次の集計は `\"year-month\"`（年をまたぐ軸）か `\"month\"`（同じ年の中の軸）、年次は `\"year\"`。\n */\nexport type DateStyle = \"date\" | \"datetime\" | \"month\" | \"year-month\" | \"year\"\n\n/** `formatDate` の追加オプション。 */\nexport interface FormatDateOptions {\n  /**\n   * IANA のタイムゾーン名（例: `\"Asia/Tokyo\"`）。既定は実行環境のタイムゾーン。\n   * サーバーとブラウザで描画が食い違う（SSR）なら固定する。日付だけの文字列（`\"2026-10-20\"`）には効かず、常にその暦日のまま出す。\n   */\n  timeZone?: string\n}\n\nconst DATE_STYLE_OPTIONS: Record<DateStyle, Intl.DateTimeFormatOptions> = {\n  date: { year: \"numeric\", month: \"2-digit\", day: \"2-digit\" },\n  datetime: { year: \"numeric\", month: \"2-digit\", day: \"2-digit\", hour: \"2-digit\", minute: \"2-digit\", hourCycle: \"h23\" },\n  month: { month: \"short\" },\n  \"year-month\": { year: \"numeric\", month: \"long\" },\n  year: { year: \"numeric\" },\n}\n\n/** `\"2026-10-20\"` / `\"2026-10\"` はタイムゾーンを持たない暦日。UTC で解釈して UTC で出し、ずれを防ぐ。 */\nconst CALENDAR_DATE = /^\\d{4}-\\d{2}(-\\d{2})?$/\n\n/**\n * 日付を表示用の文字列にする。表のセル・タイトル・文に埋める日付に使い、`toLocaleString` や手組みの\n * `getMonth() + 1` は使わない。\n *\n * @param value - `Date`、エポックミリ秒、または日付文字列（`\"2026-10-20\"`、ISO 8601）。`null` / `undefined` / 解釈できない値は `—`。\n * @param style - 何を表す日付か。既定 `\"date\"`。\n * @param locale - BCP 47 ロケール。既定 `\"ja-JP\"`。\n * @param options - `timeZone`。\n * @returns 表示文字列。\n *\n * @example\n * formatDate(\"2026-10-20\")                         // \"2026/10/20\"\n * formatDate(new Date(\"2026-10-20T05:30:00Z\"), \"datetime\", \"ja-JP\", { timeZone: \"Asia/Tokyo\" }) // \"2026/10/20 14:30\"\n * formatDate(\"2026-10-01\", \"year-month\")           // \"2026年10月\"\n * formatDate(\"2026-10-01\", \"month\")                // \"10月\"\n * formatDate(null)                                 // \"—\"\n */\nexport function formatDate(\n  value: Date | string | number | null | undefined,\n  style: DateStyle = \"date\",\n  locale: string = DEFAULT_LOCALE,\n  options?: FormatDateOptions,\n): string {\n  if (value === null || value === undefined || value === \"\") return EMPTY_VALUE\n  const calendar = typeof value === \"string\" && CALENDAR_DATE.test(value)\n  const date = value instanceof Date ? value : new Date(value)\n  if (!Number.isFinite(date.getTime())) return EMPTY_VALUE\n  return new Intl.DateTimeFormat(locale, {\n    ...DATE_STYLE_OPTIONS[style],\n    timeZone: calendar ? \"UTC\" : options?.timeZone,\n  }).format(date)\n}\n\n/** `formatDateRange` のオプション。 */\nexport interface FormatDateRangeOptions extends FormatDateOptions {\n  /** BCP 47 ロケール。既定 `\"ja-JP\"`。 */\n  locale?: string\n}\n\n/**\n * 期間を「2026/9/23〜10/20」の形にする。同じ年なら終了側の年を省き、年をまたぐときは両方に付ける。\n * 月日はゼロ詰めしない。区切りは日本語で「〜」、それ以外のロケールでは「 – 」。始まりと終わりが同じ日なら 1 日だけ出す。\n *\n * @param start - 期間の最初の日（`Date`、エポックミリ秒、日付文字列）。`\"2026-09-23\"` のような日付だけの文字列はその暦日のまま出す。\n * @param end - 期間の最後の日。\n * @param options - `locale` と `timeZone`。\n * @returns 表示文字列。どちらかが解釈できなければ `—`。\n *\n * @example\n * formatDateRange(\"2026-09-23\", \"2026-10-20\")  // \"2026/9/23〜10/20\"\n * formatDateRange(\"2025-12-20\", \"2026-01-18\")  // \"2025/12/20〜2026/1/18\"\n */\nexport function formatDateRange(\n  start: Date | string | number | null | undefined,\n  end: Date | string | number | null | undefined,\n  options?: FormatDateRangeOptions,\n): string {\n  const locale = options?.locale ?? DEFAULT_LOCALE\n  const parse = (value: Date | string | number | null | undefined) => {\n    if (value === null || value === undefined || value === \"\") return null\n    const calendar = typeof value === \"string\" && CALENDAR_DATE.test(value)\n    const date = value instanceof Date ? value : new Date(value)\n    if (!Number.isFinite(date.getTime())) return null\n    return { date, timeZone: calendar ? \"UTC\" : options?.timeZone }\n  }\n  const a = parse(start)\n  const b = parse(end)\n  if (!a || !b) return EMPTY_VALUE\n  const full = (x: NonNullable<typeof a>, withYear: boolean) =>\n    new Intl.DateTimeFormat(locale, {\n      ...(withYear ? { year: \"numeric\" } : {}),\n      month: \"numeric\",\n      day: \"numeric\",\n      timeZone: x.timeZone,\n    } as Intl.DateTimeFormatOptions).format(x.date)\n  const year = (x: NonNullable<typeof a>) =>\n    new Intl.DateTimeFormat(\"en-US\", { year: \"numeric\", timeZone: x.timeZone }).format(x.date)\n  const startText = full(a, true)\n  const sameYear = year(a) === year(b)\n  const endFull = full(b, true)\n  if (startText === endFull) return startText\n  const separator = locale.toLowerCase().startsWith(\"ja\") ? \"〜\" : \" – \"\n  return `${startText}${separator}${sameYear ? full(b, false) : endFull}`\n}\n\n/**\n * 文中の ISO の年月・日付（`2023-04`、`2026-10-20`）を `formatDate` の書式に置き換える。期間や出典の注記のように、\n * 利用者が文字列で渡す文に日付が混ざるときの表示用（`\"2023-04 以降\"` → `\"2023年4月 以降\"`）。日付でない数字は触らない。\n *\n * @param text - 日付を含みうる文。\n * @param locale - BCP 47 ロケール。既定 `\"ja-JP\"`。\n * @returns ISO の年月は `\"year-month\"`、年月日は `\"date\"` で整形した文。\n */\nexport function formatDatesInText(text: string, locale: string = DEFAULT_LOCALE): string {\n  return text.replace(/(?<![\\d-])(\\d{4})-(0[1-9]|1[0-2])(-(0[1-9]|[12]\\d|3[01]))?(?![\\d-])/g, (match, _y, _m, day) =>\n    formatDate(match, day ? \"date\" : \"year-month\", locale),\n  )\n}\n"]}

package/dist/chunk-6OTTGAPO.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../squadkit/registry/blocks/delta-text/delta-text.tsx"],"names":[],"mappings":";;;;AA4BA,IAAM,KAAA,GAAQ,EAAE,KAAA,EAAO,kBAAA,EAAmB;AAEnC,SAAS,UAAU,EAAE,KAAA,EAAO,QAAQ,UAAA,GAAa,IAAA,EAAM,iBAAgB,EAAmB;AAC/F,EAAA,MAAM,KAAA,GAAQ,eAAA,mBAAkB,IAAA,CAAC,MAAA,EAAA,EAAK,OAAO,KAAA,EAAQ,QAAA,EAAA;AAAA,IAAA,eAAA;AAAA,IAAgB;AAAA,GAAA,EAAC,CAAA,GAAU,IAAA;AAChF,EAAA,IAAI,UAAU,IAAA,EAAM;AAClB,IAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,MAAA,KAAA;AAAA,0BACA,MAAA,EAAA,EAAK,WAAA,EAAU,YAAA,EAAa,KAAA,EAAO,OAAO,QAAA,EAAA,QAAA,EAE3C;AAAA,KAAA,EACF,CAAA;AAAA,EAEJ;AACA,EAAA,MAAM,MAAM,KAAA,GAAQ,CAAA,GAAI,IAAA,GAAO,KAAA,GAAQ,IAAI,MAAA,GAAS,MAAA;AACpD,EAAA,MAAM,OAAO,GAAA,KAAQ,IAAA,GAAO,QAAA,GAAM,GAAA,KAAQ,SAAS,QAAA,GAAM,QAAA;AACzD,EAAA,MAAM,OAAO,GAAA,KAAQ,IAAA,GAAO,QAAA,GAAM,GAAA,KAAQ,SAAS,QAAA,GAAM,oBAAA;AACzD,EAAA,MAAM,OAAO,GAAA,KAAQ,MAAA,GAAS,MAAA,GAAa,GAAA,KAAQ,UAAW,UAAA,KAAe,IAAA,CAAA;AAC7E,EAAA,MAAM,IAAA,GAAO,IAAA,KAAS,MAAA,GAAY,MAAA,GAAY,OAAO,eAAA,GAAkB,eAAA;AACvE,EAAA,MAAM,IAAA,GAAO,WAAA,CAAY,KAAA,EAAO,MAAM,CAAA;AACtC,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,KAAA;AAAA,oBACD,IAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,YAAA;AAAA,QACV,SAAA,EAAW,IAAA;AAAA,QACX,KAAA,EAAO,OAAO,MAAA,GAAY,KAAA;AAAA,QAC1B,YAAA,EAAY,CAAA,EAAG,IAAI,CAAA,MAAA,EAAI,IAAI,CAAA,EAAG,IAAA,KAAS,MAAA,GAAY,EAAA,GAAK,IAAA,GAAO,oBAAA,GAAQ,oBAAK,CAAA,CAAA;AAAA,QAE3E,QAAA,EAAA;AAAA,UAAA,IAAA;AAAA,UAAK,GAAA;AAAA,UAAE;AAAA;AAAA;AAAA;AACV,GAAA,EACF,CAAA;AAEJ","file":"chunk-6OTTGAPO.js","sourcesContent":["\"use client\"\n\n/**\n * delta-text — a change as a bare inline `span`: mark + signed value (\"▲ +3.2%\"), so print and\n * colour-blind readers get the direction; colour only adds good / bad. It sets no text size, so it\n * takes the size of the line it sits in (doc blocks, slide text).\n *\n * - The direction comes from the sign of `value`; `betterWhen` (\"up\" by default; `\"down\"` for churn,\n *   cost) decides good / bad. Zero is \"→\" in the muted colour; `null` is \"—\".\n * - `value` is the change itself, formatted by `format` with an explicit sign.\n * - `comparisonLabel` (\"前月比\") is printed in front, muted.\n *\n * @example\n * import { DeltaText } from \"@/blocks/delta-text/delta-text\"\n * <DeltaText value={0.032} format=\"percent\" comparisonLabel=\"前月比\" />\n */\nimport { formatDelta, type ValueFormat } from \"../../lib/format\"\n\nexport interface DeltaTextProps {\n  /** The change itself; its direction comes from the sign. `null` shows \"—\". */\n  value: number | null\n  format?: ValueFormat\n  /** Which way is good. Default `\"up\"`. */\n  betterWhen?: \"up\" | \"down\"\n  /** Name of the comparison, e.g. \"前月比\". Printed before the change; omit to print only the change. */\n  comparisonLabel?: string\n}\n\nconst MUTED = { color: \"var(--doc-muted)\" } as const\n\nexport function DeltaText({ value, format, betterWhen = \"up\", comparisonLabel }: DeltaTextProps) {\n  const label = comparisonLabel ? <span style={MUTED}>{comparisonLabel} </span> : null\n  if (value === null) {\n    return (\n      <>\n        {label}\n        <span data-slot=\"delta-text\" style={MUTED}>\n          —\n        </span>\n      </>\n    )\n  }\n  const dir = value > 0 ? \"up\" : value < 0 ? \"down\" : \"flat\"\n  const mark = dir === \"up\" ? \"▲\" : dir === \"down\" ? \"▼\" : \"→\"\n  const word = dir === \"up\" ? \"増\" : dir === \"down\" ? \"減\" : \"横ばい\"\n  const good = dir === \"flat\" ? undefined : (dir === \"up\") === (betterWhen === \"up\")\n  const tone = good === undefined ? undefined : good ? \"text-positive\" : \"text-negative\"\n  const text = formatDelta(value, format)\n  return (\n    <>\n      {label}\n      <span\n        data-slot=\"delta-text\"\n        className={tone}\n        style={tone ? undefined : MUTED}\n        aria-label={`${word}、${text}${good === undefined ? \"\" : good ? \"、改善\" : \"、悪化\"}`}\n      >\n        {mark} {text}\n      </span>\n    </>\n  )\n}\n\nexport default DeltaText\n"]}