canvas-nodecard-patternlisted

# canvas-nodecard-pattern vibe-editor の Canvas モードは **@xyflow/react + zustand persist** で動いている。 新カード種を足すには **型 / store / レンダラ / ワークスペースプリセット / persist の 5 層**が連動するため、抜けると localStorage から復元時に消える / ノードが render されない / team まとめ動作が崩れる、といった事故が起きる。 > 主要ファイル: > - `src/renderer/src/stores/canvas.ts` — zustand store (型・validator・addCard / removeCard / pulseEdge / teamLocks / stageView) > - `src/renderer/src/components/canvas/` — カード種ごとの React コンポーネント > - `src/renderer/src/layouts/CanvasLayout*.tsx` — ReactFlow ノードの type → component マッピング > - `src/renderer/src/lib/workspace-presets*` — 初期配置プリセット --- ## 5 層同期 ``` ┌────────────────────────────────────────────────────────┐ │ 1. canvas.ts: CardType ユニオン + CARD_TYPES 配列 │ 型 + 実行時 validator │ 2. canvas.ts: CardData の payload 型 (必要なら) │ カード固有データ │ 3. components/canvas/: <NewCard /> 実装 │ 描画 │ 4. CanvasLayout*: nodeTypes に登録 │ React Flow へのマッピング │ 5. workspace-presets / addCard 経由で初期配置 │ 実際に出るかどうか └────────────────────────────────────────────────────────┘ ``` zustand `persist` で nodes/edges/viewport が localStorage に保存される (canvas.ts:103-)。 **実行時 validator (`CARD_TYPES` / `isCardType`)** が復元時に未知の `cardType` を弾くので、これを増やし忘れると永続化済みの新カードがロード時に消える。 --- ## Step 1: `CardType` を拡張 + validator も同時更新 ```ts // src/renderer/src/stores/canvas.ts export type CardType = | 'terminal' | 'agent' | 'editor' | 'diff' | 'fileTree' | 'changes' | 'notes'; // ← 追加 const CARD_TYPES: Car