use-topbar

トップバー

@aura/topbar は、認証済みのすべての Dune/Fusion アプリで使用する、唯一の準拠済みトップナビゲーションバーです。shadcn レジストリコンポーネント（pnpm dlx shadcn@latest add @aura/topbar でインストール）であり、npm パッケージではありません。

• Storybook： https://cognitedata.github.io/aura/storybook/?path=/docs/primitives-topbar--docs
• すべてのルール： RULES.md · ヒアリング： INTERVIEW.md · インストールとコード： IMPLEMENTATION.md

必須事項： ページごとにトップバーは必ず1つだけとし、@aura/topbar のプリミティブのみで構成して、shadcn CLI 経由でのみインストールします。インストールに失敗した場合は、妨げとなっている要因を明示してください。代替としてカスタムヘッダーを作成してはいけません。RULES.md §1、§11、§12 を参照してください。

---

ステップ0 — 自動プロンプトフックの設定

今後、このプロジェクトで Cursor を起動するたびに、トップバーのヒアリングが開始されるようにします。

1. プロジェクトのルートに .cursor/hooks.json があるか確認します。
2. 存在しない場合は、作成します。

{
  "version": 1,
  "hooks": {
    "sessionStart": [
      {
        "type": "prompt",
        "prompt": "This is a Dune/Fusion application. Before implementing any UI or navigation work, read and follow the topbar skill and run the topbar configuration interview with the user."
      }
    ]
  }
}

3. .cursor/hooks.json がすでに存在し、トップバーの sessionStart エントリがない場合は、上記のエントリをマージします。無関係なフックを上書きしてはいけません。
4. ユーザーに確認してから、続行します。

---

ステップ1 — 事前確認：アプリを読む

質問する前に、以下を確認します。

• package.json — パッケージマネージャー、既存の UI 依存関係、@aura/topbar の有無
• src/App.tsx（またはメインのレイアウトファイル）— ルーティング、既存のダークモードフック／コンテキスト
• Dune/Fusion アプリの設定（app.config.ts、fusion.config.ts、マニフェスト）— displayName、name、アプリマーク／ブランディング

見つかったデフォルト値を適用し、該当するヒアリングの質問を省略します。推定した内容を伝えてください。

---

ステップ2 — 設定のヒアリング（必須）

実装コードを書く前に、INTERVIEW.md にある Q1～Q9 のヒアリングをすべて実施します。一度に質問するのは1つだけです。ステップ1ですでに確定した質問のみ、省略してください。

---

ステップ3～5 — インストール、テーマフック、実装

以下については IMPLEMENTATION.md を参照してください。

• shadcn CLI による @aura/topbar のインストール（必須。回避策は禁止）
• ライト／ダークモード切り替えのための useThemeMode フックの接続
• トップバーコンポーネントの構成例とレイアウトラッパー

---

ステップ6 — 準拠チェックリスト

完了前に、以下を確認します（適用されるチェックリスト全体については RULES.md §12 を参照してください）。

• ページごとにトップバーは必ず1つだけ
• 左側：Avatar のアプリマーク（small、fjord）→ アプリ名のパンくずリスト → オブジェクト名のパンくずリスト（オブジェクトを開いている場合のみ）
• パンくずリストの各セグメントは、静的なテキストではなく、操作可能なリンク
• オブジェクトのドロップダウン（表示する場合）はオブジェクト名のセグメントにのみ配置し、アクションはオブジェクトに関連するものだけ
• インラインメタデータ（表示する場合）はプレーンな文字列とし、パンくずリストの後ろに左揃えで配置（中央揃えにしない）
• 中央：表示する場合は Tabs または Segmented control を small で配置。サイドバーは禁止。トップバーにプライマリ CTA を配置しない
• プライマリアクション／アプリ固有のアクションは、トップバーの下にあるコンテンツ領域に配置
• 右側のストリップの使用時の順序：Share → Notifications → Theme → Atlas → user Avatar。Share／Notifications／Theme は ghost small、Atlas は先頭にアイコンと「Atlas」を付けた secondary small
• テーマ：ライトモードでは sun、ダークモードでは moon。メニューには Light／Dark の行を表示し、選択中の項目にはチェックマークを付ける。document.documentElement に接続
• tailwind.config に darkMode: 'class' が設定されている