feat: add background color picker and update related functionality in DesignerToolbar

app/components/designer/DesignerToolbar.vue

@@ -9,8 +9,10 @@ const props = defineProps<{
   onImportImage: (file: File) => Promise<void>;
   onFillChange: (fill: string) => void;
   onStrokeChange: (stroke: string) => void;
+  onBackgroundChange: (background: string) => void;
   activeFill: string | null;
   activeStroke: string | null;
+  activeBackground: string;
   canStyleSelection: boolean;
   zoom: number;
   minZoom: number;
@@ -28,6 +30,7 @@ const emit = defineEmits<{
 const fileInput = ref<HTMLInputElement | null>(null);
 const fillValue = ref(props.activeFill ?? "#111827");
 const strokeValue = ref(props.activeStroke ?? "#3b82f6");
+const backgroundValue = ref(props.activeBackground ?? "#ffffff");
 const zoomSliderValue = ref(Math.round(props.zoom * 100));
 
 watch(
@@ -44,6 +47,13 @@ watch(
   }
 );
 
+watch(
+  () => props.activeBackground,
+  (next) => {
+    backgroundValue.value = next ?? "#ffffff";
+  }
+);
+
 watch(
   () => props.zoom,
   (next) => {
@@ -88,6 +98,13 @@ const handleStrokeChange = (event: Event) => {
   props.onStrokeChange(value);
 };
 
+const handleBackgroundChange = (event: Event) => {
+  const input = event.target as HTMLInputElement;
+  const value = input.value;
+  backgroundValue.value = value;
+  props.onBackgroundChange(value);
+};
+
 const handleZoomInput = (event: Event) => {
   const input = event.target as HTMLInputElement;
   const value = Number(input.value);
@@ -141,6 +158,15 @@ const zoomLabel = computed(() => `${Math.round(props.zoom * 100)}%`);
 
     <!-- Color Pickers Group -->
     <div class="flex items-center gap-2 border-r border-slate-700/50 pr-3">
+      <label class="flex items-center gap-1.5" title="Canvas Background">
+        <span class="text-xs text-slate-400">Canvas</span>
+        <input
+          type="color"
+          class="h-8 w-12 cursor-pointer rounded border border-slate-700/70 bg-slate-800/80 p-0.5"
+          :value="backgroundValue"
+          @input="handleBackgroundChange"
+        />
+      </label>
       <label class="flex items-center gap-1.5" title="Fill Color">
         <span class="text-xs text-slate-400">Fill</span>
         <input