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

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

1 files changed, 13 insertions, 2 deletions

diff --git a/public/bluebey-studio/src/ui.js b/public/bluebey-studio/src/ui.js
index e184f5e..46c5adb 100644
--- a/public/bluebey-studio/src/ui.js
+++ b/public/bluebey-studio/src/ui.js
@@ -36,10 +36,12 @@ export function toast(message) {
   toastTimer = setTimeout(() => node.classList.remove('show'), 2400);
 }
 
-export function section(parent, title, { open = false } = {}) {
+export function section(parent, title, { open = false, icon = null } = {}) {
   const body = h('div', { class: 'sec-body' });
   const head = h('button', { type: 'button', class: 'sec-head' },
-    h('span', { text: title }),
+    h('span', { class: 'sec-title' },
+      icon ? secIcon(icon) : null,
+      h('span', { text: title })),
     h('span', { class: 'chev', text: '▾' }));
   const el = h('section', { class: `sec${open ? '' : ' closed'}` }, head, body);
   head.addEventListener('click', () => el.classList.toggle('closed'));
@@ -83,6 +85,15 @@ function tabIcon(d) {
   return svg;
 }
 
+function secIcon(d) {
+  const svg = tabIcon(d);
+  svg.setAttribute('class', 'sec-icon');
+  svg.setAttribute('width', '16');
+  svg.setAttribute('height', '16');
+  svg.style.verticalAlign = 'middle';
+  return svg;
+}
+
 /**
  * Tabbed container: returns the per-tab panels to fill in. When a definition
  * carries an `icon` (an SVG path `d`) the tab shows only that icon, and the