@squadbase/vantage-template 0.1.1-dev1.6b30e42 → 0.1.1-dev1.6ed50bb

package/base-template/src/index.tsx

@@ -68,7 +68,7 @@ const CHARTS = [
 export default function HomePage() {
   // `data-vantage-sample` marks this page as the untouched template sample (the coding
   // agent looks for it). Remove it together with the sample content.
-  const sampleNote = navigator.language.startsWith("ja")
+  const sampleNote = document.documentElement.lang.startsWith("ja")
     ? "サンプルデータです。お手元のデータに置き換えて始めましょう。"
     : "Sample data — replace with your own to get started."
 

package/dist/index.js

@@ -1146,8 +1146,8 @@ var buildThemeCss = (cssVars) => [
 var THEME_PRESETS_DATA = [
   {
     "id": "neutral",
-    "title": "\u30CB\u30E5\u30FC\u30C8\u30E9\u30EB",
-    "description": "\u65E2\u5B9A\u306E\u30CB\u30E5\u30FC\u30C8\u30E9\u30EB\u306B\u623B\u3059\u30D7\u30EA\u30BB\u30C3\u30C8\u3002\u57FA\u5E95\u306E theme \u3068\u540C\u3058\u5024\u3067\u3001\u30D7\u30EA\u30BB\u30C3\u30C8\u3092\u5207\u308A\u66FF\u3048\u308B\u3068\u304D\u306E\u8D77\u70B9\u306B\u3059\u308B\u3002",
+    "title": "Neutral",
+    "description": "A preset that restores the default neutral theme. It has the same values as the base theme and is the starting point when switching presets.",
     "cssVars": {
       "light": {
         "radius": "0.5rem",
@@ -1253,8 +1253,8 @@ var THEME_PRESETS_DATA = [
   },
   {
     "id": "ocean",
-    "title": "\u30AA\u30FC\u30B7\u30E3\u30F3",
-    "description": "\u9752\u3092\u57FA\u8ABF\u306B\u3057\u305F\u30D7\u30EA\u30BB\u30C3\u30C8\u3002\u843D\u3061\u7740\u3044\u305F\u4FE1\u983C\u611F\u306E\u3042\u308B\u914D\u8272\u3067\u3001\u89D2\u4E38\u306F\u6A19\u6E96\u3088\u308A\u5C0F\u3055\u3081\u306E\u3084\u3084\u89D2\u3070\u3063\u305F\u5370\u8C61\u3002",
+    "title": "Ocean",
+    "description": "A blue preset with a calm, trustworthy palette and slightly smaller, squarer corners than the default.",
     "cssVars": {
       "light": {
         "radius": "0.375rem",
@@ -1360,8 +1360,8 @@ var THEME_PRESETS_DATA = [
   },
   {
     "id": "forest",
-    "title": "\u30D5\u30A9\u30EC\u30B9\u30C8",
-    "description": "\u7DD1\u3092\u57FA\u8ABF\u306B\u3057\u305F\u30D7\u30EA\u30BB\u30C3\u30C8\u3002\u89D2\u4E38\u306F\u3084\u3084\u5C0F\u3055\u3081\u3002\u66F8\u4F53\u306F\u4E38\u30B4\u30B7\u30C3\u30AF\u7CFB\uFF08Safari \u306E ui-rounded\u3001macOS / iOS \u306E\u30D2\u30E9\u30AE\u30CE\u4E38\u30B4\u3002\u307B\u304B\u306E\u74B0\u5883\u306F\u6A19\u6E96\u306E\u66F8\u4F53\uFF09\u3002",
+    "title": "Forest",
+    "description": "A green preset with slightly smaller corners. The font is a rounded sans-serif (ui-rounded in Safari, Hiragino Maru Gothic on macOS and iOS, the default font elsewhere).",
     "cssVars": {
       "light": {
         "radius": "0.5rem",
@@ -1467,8 +1467,8 @@ var THEME_PRESETS_DATA = [
   },
   {
     "id": "sunset",
-    "title": "\u30B5\u30F3\u30BB\u30C3\u30C8",
-    "description": "\u6A59\u3092\u57FA\u8ABF\u306B\u3057\u305F\u30D7\u30EA\u30BB\u30C3\u30C8\u3002\u6E29\u304B\u307F\u306E\u3042\u308B\u914D\u8272\u3067\u3001\u89D2\u4E38\u306F\u3084\u3084\u5927\u304D\u3081\u3002",
+    "title": "Sunset",
+    "description": "An orange preset with a warm palette and slightly larger corners.",
     "cssVars": {
       "light": {
         "radius": "0.75rem",
@@ -1574,8 +1574,8 @@ var THEME_PRESETS_DATA = [
   },
   {
     "id": "violet",
-    "title": "\u30D0\u30A4\u30AA\u30EC\u30C3\u30C8",
-    "description": "\u7D2B\u3092\u57FA\u8ABF\u306B\u3057\u305F\u30D7\u30EA\u30BB\u30C3\u30C8\u3002\u89D2\u4E38\u306F\u5927\u304D\u3081\u3067\u3084\u308F\u3089\u304B\u3044\u5370\u8C61\u3002",
+    "title": "Violet",
+    "description": "A purple preset with large, soft corners.",
     "cssVars": {
       "light": {
         "radius": "0.875rem",
@@ -1681,8 +1681,8 @@ var THEME_PRESETS_DATA = [
   },
   {
     "id": "rose",
-    "title": "\u30ED\u30FC\u30BA",
-    "description": "\u8D64\u7D2B\u304B\u3089\u30D4\u30F3\u30AF\u3092\u57FA\u8ABF\u306B\u3057\u305F\u30D7\u30EA\u30BB\u30C3\u30C8\u3002destructive \u306E\u8D64\u3068\u6DF7\u540C\u3057\u306A\u3044\u843D\u3061\u7740\u3044\u305F\u8272\u3067\u3001\u89D2\u4E38\u306F\u5927\u304D\u3081\u3002",
+    "title": "Rose",
+    "description": "A magenta-to-pink preset in muted tones that don't read as the destructive red, with large corners.",
     "cssVars": {
       "light": {
         "radius": "1rem",
@@ -1788,8 +1788,8 @@ var THEME_PRESETS_DATA = [
   },
   {
     "id": "mono",
-    "title": "\u30E2\u30CE",
-    "description": "\u7121\u5F69\u8272\u5BC4\u308A\u306E\u30D7\u30EA\u30BB\u30C3\u30C8\u3002\u30C1\u30E3\u30FC\u30C8\u3082\u5F69\u5EA6\u3092\u6291\u3048\u3001\u89D2\u4E38\u306F\u6700\u5C0F\u3002\u66F8\u4F53\u306F\u7B49\u5E45\uFF08\u30B7\u30B9\u30C6\u30E0\u306E\u7B49\u5E45\u30D5\u30A9\u30F3\u30C8\uFF09\u3002",
+    "title": "Mono",
+    "description": "A near-grayscale preset with muted chart colors, the smallest corners and a monospace font (the system monospace font).",
     "cssVars": {
       "light": {
         "radius": "0.25rem",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squadbase/vantage-template",
-  "version": "0.1.1-dev1.6b30e42",
+  "version": "0.1.1-dev1.6ed50bb",
   "description": "CLI tool for initializing and customizing Squadbase Vantage projects.",
   "keywords": [
     "squadbase",
@@ -50,7 +50,7 @@
     "@ai-sdk/openai": "2.0.122",
     "ai": "^5.0.52"
   },
-  "gitHead": "6b30e4280409c0b93806484224f6e37c39cb27f4",
+  "gitHead": "6ed50bb2d2abe199d21fa6ac2ad9923d15462d0a",
   "scripts": {
     "sync-base": "rsync -a --delete --exclude='node_modules' --exclude='dist' --exclude='.vantage' --exclude='*.tsbuildinfo' --exclude='*.log' template/ base-template/ && mv base-template/.gitignore base-template/_gitignore",
     "build": "pnpm run sync-base && tsup",

package/base-template/DESIGN.md

@@ -1,109 +0,0 @@
-<!--
-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` | 主要ボタン、選択中の状態。既定(テーマ `neutral`)は青 |
-| 強調 (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`
-  (現在はテーマ `neutral`: 青 → 黄緑 → 赤紫 → ティール → 紫)。
-- 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 チャート・円グラフの多用・装飾目的のグラデーション。