fix: actually apply white export background over react-flow root

The .react-flow root paints its own opaque background via colorMode,
so html-to-image's backgroundColor option (which only fills transparent
areas) stayed black. Override the root background with an inline style
so the chosen export background is visible.

Refs #165

frontend/src/utils/__tests__/export.test.ts

@@ -68,6 +68,14 @@ describe('exportToPng', () => {
     expect(mockToPng).toHaveBeenCalledWith(el, expect.objectContaining({ backgroundColor: '#ffffff' }))
   })
 
+  it('overrides the react-flow root background via inline style so white is visible', async () => {
+    await exportToPng(el, 'standard', 'white')
+    expect(mockToPng).toHaveBeenCalledWith(
+      el,
+      expect.objectContaining({ style: expect.objectContaining({ backgroundColor: '#ffffff' }) }),
+    )
+  })
+
   it('attaches the download anchor to the DOM so Firefox triggers the download', async () => {
     await exportToPng(el, 'high')
     expect(appendSpy).toHaveBeenCalled()
@@ -109,6 +117,14 @@ describe('exportToSvg', () => {
     expect(mockToSvg).toHaveBeenCalledWith(el, expect.objectContaining({ backgroundColor: '#ffffff' }))
   })
 
+  it('overrides the react-flow root background via inline style so white is visible', async () => {
+    await exportToSvg(el, 'white')
+    expect(mockToSvg).toHaveBeenCalledWith(
+      el,
+      expect.objectContaining({ style: expect.objectContaining({ backgroundColor: '#ffffff' }) }),
+    )
+  })
+
   it('triggers a download', async () => {
     await exportToSvg(el)
     expect(clickSpy).toHaveBeenCalled()

frontend/src/utils/export.ts

@@ -25,11 +25,15 @@ export async function exportToPng(
   background: ExportBackground = 'dark',
 ): Promise<void> {
   const option = EXPORT_QUALITY_OPTIONS.find((o) => o.value === quality) ?? EXPORT_QUALITY_OPTIONS[1]
+  const color = backgroundColor(background)
   const dataUrl = await toPng(element, {
-    backgroundColor: backgroundColor(background),
+    backgroundColor: color,
     pixelRatio: option.pixelRatio,
     style: {
       '--xy-controls-display': 'none',
+      // The .react-flow root paints its own opaque background (colorMode),
+      // which would hide the canvas backgroundColor above — override it inline.
+      backgroundColor: color,
     } as Partial<CSSStyleDeclaration>,
   })
 
@@ -40,10 +44,12 @@ export async function exportToSvg(
   element: HTMLElement,
   background: ExportBackground = 'dark',
 ): Promise<void> {
+  const color = backgroundColor(background)
   const dataUrl = await toSvg(element, {
-    backgroundColor: backgroundColor(background),
+    backgroundColor: color,
     style: {
       '--xy-controls-display': 'none',
+      backgroundColor: color,
     } as Partial<CSSStyleDeclaration>,
   })