update-branding
概要
CRM のロゴやタイトルを変更します。ロゴは2つのテーマで5つの画面（デスクトップ + モバイルヘッダー、ログイン、サインアップ、確認ページ）に表示され、タイトルは3箇所にハードコードされているため、単一ファイルの編集では古いバージョンが残ってしまいます。以下の手順ですべてをカバーします。 終了条件: ロゴが両方のテーマで5つの画面すべてに正しく表示され、タイトルがヘッダー、ブラウザタブ、PWA 名で一貫していること。
使用するタイミング
- ユーザーが CRM のロゴやタイトル/名称を変更、交換、またはリブランドしたい場合。
- オプションで、ファビコンや PWA アプリアイコンの更新も依頼された場合。
テーマカラーやコンポーネントのスタイル変更には使用しません。その場合は Skill({skill: "shadcn-customization"}) を参照してください。
ロゴ: 2つのアセットファミリー
ユーザーがどちらを意味しているかを確認します — ほとんどのリクエストは #1 のみを指します。
- アップローダー / ワードマーク（一般的） —
src/components/atomic-crm/root/logos/に配置され、defaultConfiguration.tsによってモジュールアセットとしてインポートされます（Vite が JS チャンクからの相対 URL を解決するため、/oauth/consentのようなネストされたルートやサブパスデプロイでも正しく動作します）。logo_atomic_crm_dark.svgは暗い色のアートで、ダークモードとすべての認証ページで表示されます。logo_atomic_crm_light.svgは明るい色のアートで、ライトモードで表示されます。（未使用のスタンドアロンlogo_atomic_crm.svgがpublic/logos/にまだ存在します。）ファイル名は表示されるモードに基づいて命名されています。色ではありません — 「ダークモード」のロゴは暗い背景で読める必要があります。
- ファビコン + PWA アイコン — 要求された場合のみ。はるかに大きい（34個のPNG）。後述を参照。
コードのデフォルト vs. ランタイム設定 — 競合します
- コードのデフォルト（このスキル）:
defaultConfiguration.ts+ アセットを編集します。コミットされ、すべての場所に適用され、ブラウザタブのタイトル / ファビコン / PWA アイコンを変更する唯一の方法です。 - 設定 UI（
/settings→ ブランディング、SettingsPage.tsx）: ログインユーザーがタイトルを編集し、ロゴをアップロードします。ブラウザごとに、localStorageにCRM.app.configurationとして保存され（ロゴは base64）、コミットされません。アプリ内ロゴ + ヘッダータイトルのみをカバーします。
⚠️ ストアがコードを隠蔽します。
useConfigurationContextは{ ...defaultConfiguration, ...storedConfig }を返します（ConfigurationContext.tsx）。もし/settings経由でブランディングが保存されたことがある場合、defaultConfiguration.tsの編集はそのブラウザに反映されません —CRM.app.configurationの localStorage キーをクリアしてください。コードの変更が視覚的に反映されないときは、これを疑ってください。
手順
- アセットを入手します。 ファイル/URL、フォーマット（SVG か PNG）、そして個別のライト/ダークバリアントがあるか、それとも1つの画像かを尋ねます。
- 1つのバリアント → 両方の設定キーにそれを設定します。1つのテーマでコントラストが低くなる可能性があることを警告します（認証ページは常にダークモードキーを使用します）。
- 単一塗りつぶしの SVG → 塗りつぶし（
white↔black）を交換して、もう一方のバリアントを派生させます。
- ファイルを配置します
src/components/atomic-crm/root/logos/に:- ドロップイン（最も簡単）:
logo_atomic_crm_dark.svg/logo_atomic_crm_light.svgを上書きし、ファイル名と.svgをそのまま維持します。defaultConfiguration.tsのインポートはすでにここを指しています — 完了です。（SVG のみ。） - 新しい名前 / フォーマット（例: PNG）: 新しいファイルとして隣に保存し、
defaultConfiguration.tsの先頭にある2つのimport文を更新します（これらはdefaultDarkModeLogo/defaultLightModeLogoに供給されます。モジュール相対パスなので"./logos/<file>"とします）。これらを単なる公開パス文字列に戻さないでください — 問題 #291 が再発します。
- ドロップイン（最も簡単）:
- タイトルを更新します（名前が変更された場合）3箇所すべてで —
defaultTitleは最初のもののみを駆動します:defaultConfiguration.ts→defaultTitle— ヘッダーの<h1>+ ロゴのalt属性。index.html→<title>— ブラウザタブのタイトル（ハードコードされており、実行時に設定されません）。public/manifest.json→short_name+name— インストールされた PWA の名前。
コンシューマー（設定キーを維持すれば編集不要）: layout/Header.tsx と dashboard/MobileDashboard.tsx は両方のバリアントをレンダリングします（CSS で切り替え、h-6）。login/{LoginPage,SignupPage,ConfirmationRequired}.tsx はのみ darkModeLogo をレンダリングします。
合理化
| 合理化 | 現実 |
|---|---|
| 「ロゴファイルを変更した、それで仕事は完了だ。」 | ロゴは2つのテーマで5つの画面に表示され、タイトルは3つのファイルにあります。1回の編集では古いバリアントが残ります。 |
| 「コードの変更が視覚的に反映されないので、適用されなかった。」 | /settings ストアがブラウザごとに defaultConfiguration.ts を隠蔽します。CRM.app.configuration localStorage キーをクリアしてください。 |
| 「1つの画像で両方のテーマに十分だ。」 | 認証ページは常にダークモードキーを使用します。単一のアセットでは、一方の背景で正しく表示されません。警告するか、2つ目のバリアントを派生させてください。 |
| 「ファビコンのサイズをいくつか再生成するだけでいい。」 | PWA セットは34個の PNG です。1つのソースからすべてのサイズを再生成するか、ユーザーにセットを依頼してください。一部だけ手動編集しないでください。 |
レッドフラグ
- ロゴの2つのアセットキーのうち1つだけを編集する、またはライト/ダークファイルを入れ替える。
defaultConfiguration.tsでタイトルを変更したが、index.htmlとmanifest.jsonを変更しない。- コードの変更が視覚的に反映されないのに、
CRM.app.configurationストアをクリアしない。 - ファビコン/PWA サイズの一部を手動編集し、完全なセットを再生成しない。
- 要求されていないのにドキュメントサイトのロゴ（
doc/）を変更する。
確認
make typecheck は設定キーのタイプミスのみを検出します。その後 make start して確認: ヘッダーを両方のテーマで、デスクトップ + モバイルで。ログイン/サインアップページ（暗い背景）。タイトルが変更された場合は、ヘッダーの <h1>、ブラウザタブ、PWA 名。ロゴが1つのテーマだけで間違っている場合は、両方のキーが1つのアセットを指しているか、ライト/ダークファイルが入れ替わっています。
- 両方のロゴバリアントが正しいライト/ダークアセットを指している（表示モードで命名、色ではない）。
- ロゴが両方のテーマ、デスクトップ + モバイル、およびログイン/サインアップ/確認ページで表示される。
- 名前が変更された場合、タイトルが
defaultConfiguration.ts、index.html、manifest.jsonで更新されている。 - 視覚効果がない場合、
CRM.app.configurationlocalStorage キーがクリアされている。 - ファビコン/PWA アイコンは、明示的に要求された場合にのみ完全なセットとして再生成されている。
Favicon & app icons（オプション）
要求された場合のみ。index.html + public/manifest.json で参照: public/favicon.ico と public/appIcon/*.png（maskable_icon* を含む34サイズ）。1つの正方形のソースからすべてのサイズを再生成するか（sharp / pwa-asset-generator）、ユーザーにセットを依頼してください — 一部だけ手動編集しないでください。最初に範囲を確認してください。manifest.json の theme_color/background_color も更新が必要な場合があります。
ドキュメントサイトのロゴ（
doc/astro.config.mjs→doc/public/logo_atomic_crm_*.svg）は別の Astro サイトです — 要求されなければそのままにしてください。