feat: add quality selector to PNG export (standard / high / ultra)

Clicking Export PNG now opens a modal with three quality presets:
- Standard (1× pixel ratio) — small file
- High (2×, default) — recommended for sharing
- Ultra (4×) — print quality

Adds ExportModal component, updates exportToPng() to accept a quality
param, and wires the modal into App.tsx replacing the direct export call.

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

@@ -0,0 +1,71 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { exportToPng, EXPORT_QUALITY_OPTIONS } from '../export'
+
+const mockToPng = vi.fn()
+vi.mock('html-to-image', () => ({ toPng: (...args: unknown[]) => mockToPng(...args) }))
+
+describe('exportToPng', () => {
+  let el: HTMLElement
+  let clickSpy: ReturnType<typeof vi.fn>
+  let appendSpy: ReturnType<typeof vi.spyOn>
+  let createSpy: ReturnType<typeof vi.spyOn>
+
+  beforeEach(() => {
+    el = document.createElement('div')
+    clickSpy = vi.fn()
+    createSpy = vi.spyOn(document, 'createElement').mockReturnValue(
+      Object.assign(document.createElement('a'), { click: clickSpy }) as HTMLAnchorElement
+    )
+    appendSpy = vi.spyOn(document.body, 'appendChild').mockImplementation((n) => n)
+    mockToPng.mockResolvedValue('data:image/png;base64,abc')
+  })
+
+  afterEach(() => {
+    createSpy.mockRestore()
+    appendSpy.mockRestore()
+  })
+
+  it('calls toPng with pixelRatio 1 for standard quality', async () => {
+    await exportToPng(el, 'standard')
+    expect(mockToPng).toHaveBeenCalledWith(el, expect.objectContaining({ pixelRatio: 1 }))
+  })
+
+  it('calls toPng with pixelRatio 2 for high quality', async () => {
+    await exportToPng(el, 'high')
+    expect(mockToPng).toHaveBeenCalledWith(el, expect.objectContaining({ pixelRatio: 2 }))
+  })
+
+  it('calls toPng with pixelRatio 4 for ultra quality', async () => {
+    await exportToPng(el, 'ultra')
+    expect(mockToPng).toHaveBeenCalledWith(el, expect.objectContaining({ pixelRatio: 4 }))
+  })
+
+  it('defaults to high quality when no quality arg given', async () => {
+    await exportToPng(el)
+    expect(mockToPng).toHaveBeenCalledWith(el, expect.objectContaining({ pixelRatio: 2 }))
+  })
+
+  it('triggers a download with the correct filename', async () => {
+    await exportToPng(el, 'high')
+    expect(clickSpy).toHaveBeenCalled()
+  })
+
+  it('passes dark background color', async () => {
+    await exportToPng(el, 'standard')
+    expect(mockToPng).toHaveBeenCalledWith(el, expect.objectContaining({ backgroundColor: '#0d1117' }))
+  })
+})
+
+describe('EXPORT_QUALITY_OPTIONS', () => {
+  it('has exactly three options', () => {
+    expect(EXPORT_QUALITY_OPTIONS).toHaveLength(3)
+  })
+
+  it('options are standard, high, ultra in order', () => {
+    expect(EXPORT_QUALITY_OPTIONS.map((o) => o.value)).toEqual(['standard', 'high', 'ultra'])
+  })
+
+  it('pixel ratios are 1, 2, 4', () => {
+    expect(EXPORT_QUALITY_OPTIONS.map((o) => o.pixelRatio)).toEqual([1, 2, 4])
+  })
+})

frontend/src/utils/export.ts

@@ -1,14 +1,19 @@
 import { toPng } from 'html-to-image'
 
-/**
- * Export the React Flow canvas as a PNG and trigger a browser download.
- * Pass the `.react-flow` wrapper element.
- */
-export async function exportToPng(element: HTMLElement): Promise<void> {
+export type ExportQuality = 'standard' | 'high' | 'ultra'
+
+export const EXPORT_QUALITY_OPTIONS: { value: ExportQuality; label: string; pixelRatio: number; hint: string }[] = [
+  { value: 'standard', label: 'Standard', pixelRatio: 1, hint: '1× — small file' },
+  { value: 'high',     label: 'High',     pixelRatio: 2, hint: '2× — recommended' },
+  { value: 'ultra',    label: 'Ultra',    pixelRatio: 4, hint: '4× — print quality, large file' },
+]
+
+export async function exportToPng(element: HTMLElement, quality: ExportQuality = 'high'): Promise<void> {
+  const option = EXPORT_QUALITY_OPTIONS.find((o) => o.value === quality) ?? EXPORT_QUALITY_OPTIONS[1]
   const dataUrl = await toPng(element, {
     backgroundColor: '#0d1117',
+    pixelRatio: option.pixelRatio,
     style: {
-      // Exclude controls from the export
       '--xy-controls-display': 'none',
     } as Partial<CSSStyleDeclaration>,
   })