UI拡張・棚追加ルールブック (Builder UI Rules)

このドキュメントは、JavaScriptによるプロンプトビルダー（特にCreatures/Relationsセクション）に
新しい「棚（カテゴリ）」を追加する際の絶対ルールとテンプレート定義である。

⚠️ 絶対禁止事項 (Hard Constraints)

1.  Gridレイアウトの行数固定禁止:
    -   grid-template-rows や grid-template-columns
        で数を固定してはいけない。
    -   理由：項目が増えた時に溢れて消滅するため。必ず flex-wrap: wrap
        を使用する。
2.  関数・変数の二重定義禁止:
    -   makeSectionDivider や makeCheckboxRow
        などのヘルパー関数を、各セクション内で再定義してはいけない。
    -   理由：コード統合時に Identifier 'x' has already been declared
        エラーで全体が停止する。
3.  巨大なHTML直書き禁止:
    -   innerHTML への巨大な文字列代入は避け、el() ヘルパー関数と
        appendChild を使用する。

------------------------------------------------------------------------

🛠 手順1: データ定義 (Data Definition)

ファイルの先頭付近（// ---- Data ----
エリア）に、必ず配列として定義すること。

テンプレート: ```javascript // 【命名規則】 DATA_カテゴリ名_サブ名 const
DATA_DOG_TRICKS = [ { ja: “お手”, en: “paw shake, dog trick” }, { ja:
“お座り”, en: “sit down, dog command” }, // …カンマ区切りで続く];

🛠 手順2: レイアウト構造 (Layout Structure)
​棚を格納する親コンテナ（inner や
box）は、必ず以下のスタイルを持つこと。 ​正解のスタイル構成: const inner
= el(“div”, { style: “display: flex; flex-wrap: wrap; gap: 8px;
align-items: flex-start; width: 100%;” });

​🛠 手順3: 棚の注入 (Injection)
​データを表示する「棚（details/summary）」を作成し、親コンテナに追加する。
棚自体の幅も固定せず、flex プロパティで伸縮させること。
​注入コードのテンプレート: // makeSub(タイトル, データ配列, 枠線の色HEX)
// ヘルパー関数 makeSub の定義例（内部で使用）: // const d =
el(“details”, { style: “flex: 1 1 45%; min-width: 300px; …” });

// ★ここに追加する inner.appendChild(makeSub(“🐶 新しい棚のタイトル”,
DATA_DOG_TRICKS, “#d97706”));

​✅ チェックリスト (Pre-Commit Checklist) ​作業完了前に以下を確認せよ。
​[ ] データ配列は定義したか？ (undefinedエラー防止) ​[ ] 親コンテナに
flex-wrap: wrap はあるか？ (表示消滅防止) ​[ ] 棚（makeSub）は
appendChild されたか？ (記述漏れ防止) ​[ ] const 変数名の重複はないか？
(クラッシュ防止) ​[ ] 色は適切か？ (犬=#1e88e5, 猫=#43a047, 関係=#8e44ad
等のルール準拠)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
TROUBLESHOOTING｜棚が出ない事故の勝ち筋
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

■ 症状 ・新しい棚（例：🐰小動物）が UI に出ない
・コード自体は追加したはずなのに表示されない ・既存棚は正常に出ている

━━━━━━━━━━━━━━━━━━━━ ✅ 結論：勝ち筋は2つ ━━━━━━━━━━━━━━━━━━━━

【勝ち筋①】initUI の“実行順リスト”に登録する →
関数を作っただけではUIに出ない。initUIで呼ばれて初めて出る。

例： contentArea.appendChild(makeRodentsGroup());
contentArea.appendChild(makeSmallAnimalsGroup()); ←
これがないと絶対に出ない

━━━━━━━━━━━━━━━━━━━━

【勝ち筋②】makeGroupContainer の戻り値 {det, box} ルールを守る →
appendChild 先を間違えると棚が消える／壊れる。

鉄則： ・makeGroupContainer は { det, box } を返す ・棚は outer.box に
appendChild する ・return は必ず outer.det

誤）outer.appendChild(…) 正）outer.box.appendChild(…) 正）return
outer.det

━━━━━━━━━━━━━━━━━━━━ 🧱 UIレイアウト必須ルール ━━━━━━━━━━━━━━━━━━━━

親コンテナ（inner/box）には必ず以下を設定する：

display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start;
width:100%;

※ grid固定は禁止（溢れて消える事故の原因）

━━━━━━━━━━━━━━━━━━━━ 🔍 3分チェックリスト ━━━━━━━━━━━━━━━━━━━━

[1] makeXxxGroup() は定義されているか？ [2] initUI に appendChild
登録されているか？ [3] outer.box.appendChild(…) になっているか？ [4]
return outer.det になっているか？ [5] 親コンテナが flex-wrap
になっているか？ [6] 同名関数・変数の二重定義はないか？

━━━━━━━━━━━━━━━━━━━━ 🧨 それでも出ない場合 ━━━━━━━━━━━━━━━━━━━━

・スーパーリロード（キャッシュ削除） ・ローカルサーバ再起動
・古いbundle混在を疑う
・一時的にファイル名変更して読み込み確認（キャッシュ検出用）

━━━━━━━━━━━━━━━━━━━━ ✅ 棚追加の正しい型 ━━━━━━━━━━━━━━━━━━━━

0)  DATA_*** を // —- Data —- に定義
1)  makeXxxGroup() を追加
2)  outer.box.appendChild(makeSub(…))
3)  return outer.det
4)  API.initUI に contentArea.appendChild(makeXxxGroup()) を登録

この4点セットが揃って初めて棚は出る。
