1 files changed, 14 insertions, 0 deletions
diff --git a/public/bluebey-studio/src/panel.js b/public/bluebey-studio/src/panel.js
index 723d806..67022aa 100644
--- a/public/bluebey-studio/src/panel.js
+++ b/public/bluebey-studio/src/panel.js
@@ -11,6 +11,7 @@ import { EYE_VARIANTS } from './model.js';
 import { ENVIRONMENTS } from './look.js';
 import { BACKGROUND_PRESETS, EFFECT_PRESETS } from './background.js';
 import { PROP_LIBRARY, applyPropFaceScale, applyPropText } from './props.js';
+import { HAT_LIBRARY } from './hats.js';
 import {
   GION_SHEETS, gionSheetUrl, cropFromMarquee, fitSheet, normalizeRect, clamp, DEFAULT_STAMP_WIDTH,
 } from './gion.js';
@@ -1615,6 +1616,19 @@ export function buildPanel(app, root) {
     }],
   }));
 
+  /* ------------------------------------------------------------- 帽子 */
+
+  const hatSection = section(tabView, '帽子');
+  hatSection.add(hint('ぶるべーの頭に帽子をかぶせます。もう一度「なし」を選ぶと外れます。'));
+  const hatSegment = segmented({
+    label: '帽子',
+    options: HAT_LIBRARY.map((hat) => ({ value: hat.id, label: hat.label })),
+    value: 'none',
+    onChange: (value) => { state.face.hat.kind = value; app.actions.refresh('all'); },
+  });
+  hatSection.add(hatSegment.el);
+  syncers.push(() => hatSegment.set(state.face.hat?.kind ?? 'none'));
+
   /* ------------------------------------------------------------- body colour */
 
   const colourSection = section(tabView, '体の色');