Add SVG layer snapshots for various components

- Added ruler layer snapshot with hidden display.
- Added scale bar layer snapshot with detailed structure and styling.
- Added temperature layer snapshot with opacity and stroke settings.
- Added terrain layer snapshot with ocean and land heights groups.
- Added vignette layer snapshot with mask and opacity settings.
- Added zones layer snapshot with specified opacity and stroke settings.

playwright.config.ts

@@ -1,14 +1,18 @@
 import { defineConfig, devices } from '@playwright/test'
 
+const isCI = !!process.env.CI
+
 export default defineConfig({
-  testDir: './e2e',
+  testDir: './tests/e2e',
   fullyParallel: true,
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
-  reporter: [['html', { open: 'always' }]],
+  forbidOnly: isCI,
+  retries: isCI ? 2 : 0,
+  workers: isCI ? 1 : undefined,
+  reporter: 'html',
+  // Use OS-independent snapshot names (HTML content is the same across platforms)
+  snapshotPathTemplate: '{testDir}/{testFileDir}/{testFileName}-snapshots/{arg}{ext}',
   use: {
-    baseURL: 'http://localhost:4173',
+    baseURL: isCI ? 'http://localhost:4173' : 'http://localhost:5173',
     trace: 'on-first-retry',
     // Fixed viewport to ensure consistent map rendering
     viewport: { width: 1280, height: 720 },
@@ -20,9 +24,11 @@ export default defineConfig({
     },
   ],
   webServer: {
-    command: 'npm run build && npm run preview',
-    url: 'http://localhost:4173',
-    reuseExistingServer: !process.env.CI,
+    // In CI: build and preview for production-like testing
+    // In dev: use vite dev server (faster, no rebuild needed)
+    command: isCI ? 'npm run build && npm run preview' : 'npm run dev',
+    url: isCI ? 'http://localhost:4173' : 'http://localhost:5173',
+    reuseExistingServer: !isCI,
     timeout: 120000,
   },
 })