public/bluebey-studio: 鼻ちょうちんを球に、寝ている動きを追加、見出しにアイコン

- 鼻ちょうちんを単純な球にし、奥行き（おくゆき）も設定できるように
- 「ねている」の動きを追加。呼吸に合わせて鼻ちょうちんが膨らみ・縮む
- 各タブの見出し（メニュー一覧）にアイコンを追加
- 操作案内の文言を実態（ぶるべーをドラッグで移動）に合わせて更新

1 files changed, 43 insertions, 1 deletions

diff --git a/public/bluebey-studio/src/panel.js b/public/bluebey-studio/src/panel.js
index c26c88c..255e6cf 100644
--- a/public/bluebey-studio/src/panel.js
+++ b/public/bluebey-studio/src/panel.js
@@ -1,5 +1,5 @@
 import {
-  h, section, subhead, hint, slider, check, segmented, buttons,
+  h, section as uiSection, subhead, hint, slider, check, segmented, buttons,
   colorField, xyPad, tailPad, selectField, controlRow, tabs, details, toast,
 } from './ui.js';
 import {
@@ -15,6 +15,43 @@ import {
   GION_SHEETS, gionSheetUrl, cropFromMarquee, fitSheet, normalizeRect, clamp, DEFAULT_STAMP_WIDTH,
 } from './gion.js';
 
+/**
+ * A small icon for each section heading, so the list a tab shows can be scanned
+ * at a glance. Keyed by the section title; a title with no icon just shows text.
+ */
+const SECTION_ICONS = {
+  'ポーズ例': 'M12 3.6a2.1 2.1 0 1 1 0 4.2 2.1 2.1 0 1 1 0-4.2ZM12 7.8v6.4M12 10.3 8.4 12.5M12 10.3l3.6 2.2M12 14.2 9 20.4M12 14.2l3 6.2',
+  '全身とボーンのスライダー': 'M4 7h16M4 12h16M4 17h16M8 7h.01M15 12h.01M11 17h.01',
+  '操作': 'M7 4l10 6-4.3 1.3L10.8 16 7 4Z',
+  'うごき': 'M8 5l10 7-10 7V5Z',
+  'プリセット': 'M12 3.6a8.4 8.4 0 1 1 0 16.8 8.4 8.4 0 1 1 0-16.8ZM8.9 9.8v1M15.1 9.8v1M8.3 13.9a4.7 4.7 0 0 0 7.4 0',
+  '目': 'M2.5 12s3.6-6 9.5-6 9.5 6 9.5 6-3.6 6-9.5 6-9.5-6-9.5-6ZM12 14.6a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Z',
+  '眉': 'M4 11q3.2-3.2 7-2M13 9q3.8-1.2 7 2',
+  '眼鏡・サングラス': 'M8 10.2a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4ZM16 10.2a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4ZM11.2 13h1.6M4.8 11.7 3 10.3M19.2 11.7 21 10.3',
+  'ほっぺ・頭の模様': 'M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16ZM9.4 10.2h.01M14.6 10.2h.01M9.4 14.2h5.2',
+  '鼻ちょうちん': 'M15 4.6a4.6 4.6 0 1 0 0 9.2 4.6 4.6 0 0 0 0-9.2ZM10.6 9.6 4.8 11.4',
+  'ひげ': 'M4.4 11.2c2.6-1.2 5.2-.6 7.6 2 2.4-2.6 5-3.2 7.6-2',
+  '口': 'M4.6 10c3 4.8 11.8 4.8 14.8 0',
+  '口パク（声は出ません）': 'M4 9v6h3l4 3V6L7 9H4ZM15.5 9.5l4 5M19.5 9.5l-4 5',
+  '見る先': 'M12 3.5v3M12 17.5v3M3.5 12h3M17.5 12h3M12 8.2a3.8 3.8 0 1 0 0 7.6 3.8 3.8 0 0 0 0-7.6Z',
+  'スタイル': 'M4 20l3.4-.8L20 6.6 17.4 4 4.8 16.6 4 20Z',
+  '体の色': 'M12 3.4s6 6.2 6 10.1a6 6 0 0 1-12 0C6 9.6 12 3.4 12 3.4Z',
+  '見た目の調整': 'M4 8h16M4 16h16M9.5 8h.01M15 16h.01',
+  '背景': 'M4 4.5h16a1.5 1.5 0 0 1 1.5 1.5v12a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 18V6A1.5 1.5 0 0 1 4 4.5ZM3 16l4-3.5 3.6 3 3.1-2.8 4.3 3.7M15.8 8.8h.01',
+  '舞台': 'M4 20V9l8-5 8 5v11M4 20h16M9.5 20v-5h5v5',
+  'セリフ（吹き出し）': 'M4 5h16v10H9l-4 4v-4H4V5Z',
+  '画面・光': 'M12 7.5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9ZM12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.2 5.2l1.4 1.4M17.4 17.4l1.4 1.4M18.8 5.2l-1.4 1.4M6.6 17.4 5.2 18.8',
+  '画面の情報': 'M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16ZM12 11v5M12 8h.01',
+  '画像': 'M4 5h16v14H4zM4 15l5-4 4 3 4-3.5 3 2.5M15.5 9h.01',
+  'まんが': 'M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z',
+  '共有': 'M8.2 10.6a2 2 0 1 0 0-3.2 2 2 0 0 0 0 3.2ZM17 6.4a2 2 0 1 0 0-3.2 2 2 0 0 0 0 3.2ZM17 20.8a2 2 0 1 0 0-3.2 2 2 0 0 0 0 3.2ZM10 10.4l5-2.6M10 13.6l5 2.6',
+  'テクスチャの下地を書き出す': 'M4 4h16v16H4zM4 9.3h16M4 14.7h16M9.3 4v16M14.7 4v16',
+  '設定': 'M12 8.6a3.4 3.4 0 1 0 0 6.8 3.4 3.4 0 0 0 0-6.8ZM12 2.6v2.4M12 19v2.4M2.6 12H5M19 12h2.4M5.2 5.2l1.7 1.7M17.1 17.1l1.7 1.7M18.8 5.2l-1.7 1.7M6.9 17.1l-1.7 1.7',
+};
+
+/** `section`, with the heading icon looked up from its title. */
+const section = (parent, title, options) => uiSection(parent, title, { icon: SECTION_ICONS[title], ...options });
+
 /** Fallbacks for the fields an older settings file may predate. */
 const BODY_COLOR_FALLBACKS = {
   body: '#c8b0f0', accent: '#8a4fe0', nose: '#7a4fb0',
@@ -965,6 +1002,10 @@ export function buildPanel(app, root) {
       label: 'たかさ', min: -160, max: 160, step: 1, value: 0, format: (v) => `${Math.round(v)}`,
       onInput: (v) => { state.face.eyes.snot.offsetY = v; app.actions.refresh('face'); },
     }),
+    offsetZ: slider({
+      label: 'おくゆき', min: -160, max: 160, step: 1, value: 0, format: (v) => `${Math.round(v)}`,
+      onInput: (v) => { state.face.eyes.snot.offsetZ = v; app.actions.refresh('face'); },
+    }),
   };
   for (const widget of Object.values(snotSliders)) snotBox.add(widget.el);
   const snotColor = colorField({
@@ -1287,6 +1328,7 @@ export function buildPanel(app, root) {
       { value: 'idle', label: 'ゆれる' },
       { value: 'walk', label: '歩く' },
       { value: 'wave', label: 'てをふる' },
+      { value: 'sleep', label: 'ねている' },
     ],
     value: 'off',
     onChange: (value) => { state.anim.mode = value; app.animator.reset(); app.needsRender = true; },