Preserve QPowerPoint slide backgrounds

src/features/qpowerpoint/QPowerPoint.tsx

@@ -19,6 +19,16 @@ const themeLabels: Record<Slide["theme"], string> = {
   graphite: "Графит"
 };
 
+const backgroundColorSwatches = [
+  { color: "", label: "Фон темы" },
+  { color: "FFFFFF", label: "Белый фон" },
+  { color: "EAF6FF", label: "Светло-синий фон" },
+  { color: "D9EAD3", label: "Светло-зеленый фон" },
+  { color: "FFF2CC", label: "Светло-желтый фон" },
+  { color: "FCE4D6", label: "Коралловый фон" },
+  { color: "1F2937", label: "Темный фон" }
+];
+
 const slideWidthInches = 13.333;
 const slideHeightInches = 7.5;
 
@@ -69,6 +79,16 @@ function slideImageStyle(image: SlideImage) {
   };
 }
 
+function slideCanvasStyle(slide: Slide) {
+  const backgroundColor = normalizedHexColor(slide.backgroundColor);
+  return backgroundColor ? { background: `#${backgroundColor}` } : undefined;
+}
+
+function normalizedHexColor(value?: string) {
+  const raw = value?.trim().replace(/^#/, "").toUpperCase() ?? "";
+  return /^[0-9A-F]{6}$/.test(raw) ? raw : "";
+}
+
 function clonedSlideImages(images?: SlideImage[]) {
   const suffix = Date.now();
   return images?.map((image, index) => ({ ...image, id: `${image.id}-copy-${suffix}-${index}` }));
@@ -324,7 +344,7 @@ export function QPowerPoint({ deck, onChange }: QPowerPointProps) {
           </button>
         </div>
 
-        <div className={`slide-canvas theme-${activeSlide.theme}`}>
+        <div className={`slide-canvas theme-${activeSlide.theme}`} style={slideCanvasStyle(activeSlide)}>
           {activeImages.map((image) => (
             <button
               key={image.id}
@@ -370,6 +390,19 @@ export function QPowerPoint({ deck, onChange }: QPowerPointProps) {
               ))}
             </select>
           </label>
+          <div className="slide-background-swatches" aria-label="Фон слайда">
+            {backgroundColorSwatches.map((swatch) => (
+              <button
+                key={swatch.label}
+                className={`fill-swatch ${swatch.color ? "" : "is-empty"} ${normalizedHexColor(activeSlide.backgroundColor) === swatch.color || (!activeSlide.backgroundColor && !swatch.color) ? "is-active" : ""}`.trim()}
+                type="button"
+                onClick={() => updateSlide({ ...activeSlide, backgroundColor: swatch.color || undefined })}
+                title={swatch.label}
+                aria-label={swatch.label}
+                style={swatch.color ? { backgroundColor: `#${swatch.color}` } : undefined}
+              />
+            ))}
+          </div>
         </section>
         <section>
           <h3>Изображения</h3>