[FEAT] BG color enhancements

src/components/SpriteCanvas.vue

@@ -26,14 +26,14 @@
         <!-- Background color picker -->
         <div class="flex items-center gap-2">
           <label for="bg-color" class="dark:text-gray-200 text-sm sm:text-base">Background:</label>
-          <select id="bg-color" v-model="settingsStore.backgroundColor" class="px-2 py-1 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 dark:text-gray-200 text-sm">
+          <select id="bg-color" v-model="bgSelectValue" class="px-2 py-1 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 dark:text-gray-200 text-sm">
             <option value="transparent">Transparent</option>
             <option value="#ffffff">White</option>
             <option value="#000000">Black</option>
             <option value="#f9fafb">Light Gray</option>
             <option value="custom">Custom...</option>
           </select>
-          <input v-if="settingsStore.backgroundColor === 'custom'" type="color" v-model="customColor" @input="settingsStore.setBackgroundColor(customColor)" class="w-8 h-8 border border-gray-300 dark:border-gray-600 rounded cursor-pointer" />
+          <input v-if="bgSelectValue === 'custom'" type="color" v-model="customColor" @input="settingsStore.setBackgroundColor(customColor)" class="w-8 h-8 border border-gray-300 dark:border-gray-600 rounded cursor-pointer" />
         </div>
       </div>
     </div>
@@ -113,7 +113,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, watch, onUnmounted, toRef, computed } from 'vue';
+  import { ref, onMounted, watch, onUnmounted, toRef, computed, nextTick } from 'vue';
   import { useSettingsStore } from '@/stores/useSettingsStore';
   import type { Sprite } from '@/types/sprites';
   import { useCanvas2D } from '@/composables/useCanvas2D';
@@ -213,6 +213,69 @@
   const fileInput = ref<HTMLInputElement | null>(null);
   const customColor = ref('#ffffff');
 
+  // Background select handling: keep the select stable on "custom"
+  const presetBgColors = ['transparent', '#ffffff', '#000000', '#f9fafb'] as const;
+  const isHexColor = (val: string) => /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(val);
+
+  // Ensure customColor mirrors the current stored custom color (only when needed)
+  if (isHexColor(settingsStore.backgroundColor) && !presetBgColors.includes(settingsStore.backgroundColor as any)) {
+    customColor.value = settingsStore.backgroundColor;
+  }
+
+  // Track if user is in custom mode to keep picker visible
+  // Initialize to true if current color is custom
+  const isCustomMode = ref(isHexColor(settingsStore.backgroundColor) && !presetBgColors.includes(settingsStore.backgroundColor as any));
+
+  const bgSelectValue = computed<string>({
+    get() {
+      // If user explicitly entered custom mode, stay in it regardless of color value
+      if (isCustomMode.value) {
+        // Keep color picker synced
+        const val = settingsStore.backgroundColor;
+        if (isHexColor(val)) {
+          customColor.value = val;
+        }
+        return 'custom';
+      }
+
+      const val = settingsStore.backgroundColor;
+      if (presetBgColors.includes(val as any)) return val;
+      if (isHexColor(val)) {
+        // Keep the color picker open and sync its swatch
+        customColor.value = val;
+        isCustomMode.value = true; // Auto-enable custom mode for non-preset hex colors
+        return 'custom';
+      }
+      // Fallback
+      return 'transparent';
+    },
+    set(v: string) {
+      if (v === 'custom') {
+        isCustomMode.value = true;
+        // Switch UI to custom mode but keep the stored value as a color
+        const fallback = '#ffffff';
+        const current = settingsStore.backgroundColor;
+        const fromStore = isHexColor(current) ? current : null;
+        const fromLocal = isHexColor(customColor.value) ? customColor.value : null;
+        const color = fromStore || fromLocal || fallback;
+        customColor.value = color;
+        settingsStore.setBackgroundColor(color);
+      } else {
+        isCustomMode.value = false;
+        settingsStore.setBackgroundColor(v);
+      }
+    },
+  });
+
+  // Ensure canvas redraw and UI flush after background changes
+  watch(
+    () => settingsStore.backgroundColor,
+    async () => {
+      await nextTick();
+      requestDraw();
+    }
+  );
+
   // Grid metrics used to position offset labels relative to cell size
   const gridMetrics = computed(() => calculateMaxDimensions());